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