Creating SEO Friendly URLs
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