Creating SEO Friendly URLs

Last edit: Mar 11, 2021

One of the most important things to ensure for your online success is your search engine ranking. The following video demonstrates how you can achieve 100/100 Google Lighthouse scores and first page ranking in Google search results using platformOS.

This guide will help you create SEO friendly URLs. The example shows category listings grouped by country, for example:

/catalogue/Australia/Sydney
/catalogue/Spain/Seville

Requirements

This is an advanced tutorial. To follow it, you should be familiar with basic platformOS concepts, HTML, GraphQL queries, Liquid, and the topics in the Get Started section, especially topics related to Pages.

Steps

Creating SEO friendly category listings is a three-step process:

Step 1: Setup page

Create Search Page with slug catalogue
Define URL template in page:


{% assign url_template = '/catalogue/{country}/{city}' %}

Decode current page url into params with Liquid filter extract_url_params:


{% assign url_params = context.location.pathname | extract_url_params: url_template %}

Step 2: Prepare GraphQL query

Assuming you have the following Table schema/catalogue_listings.yml already in place:

name: catalogue_listings
properties:
  - name: country
    type: string
  - name: city
    type: string

Create a GraphQL query with country and city.

query get_catalogue_listings($country: String, $city: String) {
  records(
    per_page: 20,
    filter: {
      table: {
        value: "catalogue_listings"
      }
      properties: [
        {name: "country", value: $country},
        {name: "city", value: $city}
      ]
    }
  ) {
    total_entries
    results {
      id
      name
      city: property(name: "city")
      country: property(name: "country")
    }
  }
}

Step 3: Add GraphQL query to page

Add the GraphQL query you created to your page, and pass extracted params to it:


{% graphql g = 'get_catalogue_listings',
  country: url_params.country,
  city: url_params.city
%}

Final Page


{% liquid
  assign url_template = '/catalogue/{country}/{city}'
  assign url_params = context.location.pathname | extract_url_params: url_template
%}

<div class="results">
  <form action="." method="GET">
    {% graphql g = 'get_catalogue_listings',
      country: url_params.country,
      city: url_params.city
    %}

    <strong>{{ g.records.total_entries }}</strong>
    <ul>
    {% for item in g.records.results %}
      <li>
        {{ item.id }} - {{ item.name }} - {{ item.country }} - {{ item.city }}
      </li>
    {% endfor %}
    </ul>
  </form>
</div>

Example URLs

/catalogue/Australia/Melbourne - listings from Melbourne, Australia

/catalogue//Sydney - listings from Sydney

/catalogue// - all listings