SEO

API2C

Distilled Summary 🧪

This page looks the same here and here. Both URLs share the same canonical, title, and description meta tags.

Search results are empty since soccer is not in season

Pre-existing complexity

The search parameters and query parameters are decoupled and held in state to enable shallow routing on CSR.

Part 1

Connect many SEO URLs to two pages

I have a list of URL patterns to support across two pages. Each pattern will match many different values, for example the /shop/:prefecture pattern will match /shop/tokyo, /shop/saitama, or any of the other 47 prefectures that exist in Japan, to the /shop page. There are 27 such patterns which match over 28,000 values.

I do this using regular expressions and Next.js rewrites!

Part 2

The anatomy of an SEO URL 🫁

  • An SEO URL simply represents one search
  • Path segments belong to one of two groups
  • If present, path segments have a pre-defined order
  • The combination of path segments dictates the search
  • The fewer path segments (search parameters) there are the broader the search and vice versa

We have rewritten SEO URLs to their respective pages but to effectively "connect" them to the page we need to integrate them into the pages' search functionality. To do so is a 3 step proccess outlined below,

  1. Parse the search parameters from the SEO URL
  2. Make an API request to fetch the necessary data for Step 3
  3. Using the search parameters from Step 1 and the data from Step 2 construct the query parameters

As in the distilled summary the final result becomes that, for example, the SEO URL https://fansta.jp/shops/s-soccer/j1 is rewritten to the /shops page but with the following query parameters appended https://fansta.jp/shops?prefecture=13&teams=1%2C3%2C4%2C5%2C6%2C7%2C8%2C10%2C17%2C35%2C20%2C36%2C11%2C12%2C13%2C14%2C19%2C15.

Creating SEO meta tags

We look at the combination of path segments to grab specific values from data fetched from the API.