Creating SEO Friendly URLs

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 tutorials 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"
      }
      deleted_at: {exists: false},
      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,
      is_deleted: false
    %}

    <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

Questions?

We are always happy to help with any questions you may have.