Creating SEO Friendly URLs

Last edit: Apr 10, 2020

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

/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_url into params with Liquid filter extract_url_params:


{% assign url_params = current_full_path | extract_url_params: url_template %}

Step 2: Prepare GraphQL query

Assuming you have the following Model Schema model_schemas/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) {
  models(
    per_page: 20,
    filter: {
      name: {
        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


{% assign url_template = '/catalogue/{country}/{city}' %}
{% assign url_params = current_full_path | 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.models.total_entries }}</strong>
    <ul>
    {% for item in g.models.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