Can you index a page that redirects to a filtered view?

On-Page SEO
1
I have developed a platform for startup pitch decks similar to Dribbble, and I want to create different URLs for various filtered views of my platform. For instance, I want to have a page for "Adtech deck examples" based on filtered decks at "/search/decks?filter=categories.Adtech", or a page for "Competition slides examples" based on slides at "/search/slides?filter=slideType.Competition". What is the best way to achieve this? 1) Should I design a dynamic landing page template that can be populated based on the filter selected? 2) Is it possible to create paths that directly redirect to the filtered view of the "/search/slides" page? Just for more information, I am using NextJS 14.

image
image1025×61 4.4 KB

You can definitely create URLs that directly redirect to filtered views of your “/search/slides” page. This is a common practice and can be achieved with server-side rendering (SSR) in Next.js.

Here’s how you can approach this:

  1. Dynamic Route Generation: Next.js allows you to define dynamic routes using brackets in your file names. You can create a file like [category]/[slideType].js in your pages directory. Inside this file, you can use the context.params object to access the dynamic route parameters (category and slideType) and use them to fetch the relevant data for your filtered view.

  2. Redirection: You can use the getServerSideProps function within your dynamic route file to fetch the data based on the filter parameters and then redirect the user to the appropriate filtered view on the “/search/slides” page with the relevant filter parameters appended to the URL.

For example, you can have a route like /adtech/competition that redirects to /search/slides?filter=categories.Adtech&filter=slideType.Competition

Here’s a simplified code example:

// pages/[category]/[slideType].js

export default function FilteredPage({ category, slideType }) {
  // ... (render your landing page template)
}

export async function getServerSideProps(context) {
  const { category, slideType } = context.params;

  // ... Fetch data from your API based on category and slideType

  return {
    redirect: {
      destination: `/search/slides?filter=categories.${category}&filter=slideType.${slideType}`,
      permanent: false // Set to true for permanent redirects
    }
  };
}

This approach allows you to have user-friendly URLs for your filtered views while leveraging Next.js’s SSR capabilities to dynamically generate the appropriate content and redirect to the correct search page.