Home > Shopify Tutorials > Build URLs on your site

How to build URLs on your site in Shopify

Last updated: April 01, 2024
This article has been written and researched by our expert Avada through a precise methodology. Learn more about our methodology

Sam

Author

Daniel

Researcher

As a shop owner, you must really concern about the way to SEO your site effectively. The first step you can do this is that you need to set up URLs to make it friendly with the search engine.

Firstly, here come some useful information I prepared about the URLs. Simply, they are clear addresses that users access the online resources stored on the Internet. They play an important role in SEO because if you have an ideal URL, there will be a larger amount of audiences visit your site.

I would like to give you some tips to have search engine friendly URLs to drive more and more users to your site. They should not have unnecessary words but the content of the article. In addition, it must be the most concise and not be too long. Remember to leave unnecessary words. Each word in the URL is separated by a dash “-“. If you’ve known all of above, the rest will tell about how to build URLs on your site. To configure the best URLs, you should set up permalink on your site.

Below is a clear guide for you to take steps.

Table of content

For example, if we have a page called /blog.html, we want it on the live site to be /blog/. We could carry out what we expect by creating a new folder named blog. Then, you move blog.html to that folder and change its name into index.html. Afterward, move /blog/index.html back to /blog.html. Add a permalink in the front matter and specify the URL we expect by the code below:

---
layout: default
title: Blog
permalink: /blog/
---
...

As /blog/ now outputs the blog page, you just need to go to blog.html in the browser 404s.

It would be such a waste of time when you have to set a permalink to every blog post. There’s a solution for this. You just need to set it for all blog posts at once in _config.yml. You can use the variables available while setting permalinks for posts. They are year, month, i_month, short_year, hour, etc. You can see them more details in the following table.

Variable Description
year Year from the Post’s filename.
month Month from the Post’s filename.
i_month Month from the Post’s filename without leading zeros.
day Day from the Post’s filename.
i_day Day from the Post’s filename without leading zeros.
short_year Year from the Post’s filename without the century.
hour Hour of the day, 24-hour clock, zero-padded from the post’s date front matter. (00..23)
minute Minute of the hour from the post’s date front matter. (00..59)
second Second of the minute from the post’s date front matter. (00..59)
title Title from the document’s filename. May be overridden via the document’s slug YAML front matter.
slug Slugified title from the document’s filename (any character except numbers and letters is replaced as hyphen). May be overridden via the document’s slug YAML front matter.
categories The specified categories for this Post. If a post has multiple categories, Jekyll will create a hierarchy (e.g. /category1/category2). Also Jekyll automatically parses out double slashes in the URLs, so if no categories are present, it will ignore this.

Here is the code you can use to create the permalink the day, the month, the year respectively by the title of the post.

 ...
permalink: /:day/:month/:year/:title/
...

Similar to set the permalinks to blog posts, when you set them to collections, there are variables available such as collection, path, name, title and output_ext. You can take advantage of the table below to know more variables.

Variable Description
collection Label of the containing collection.
path Path to the document relative to the collection’s directory.
name The document’s base filename, with every sequence of spaces and non-alphanumeric characters replaced by a hyphen.
title The document’s lowercase title (as defined in its front matter), with every sequence of spaces and non-alphanumeric characters replaced by a hyphen. If the document does not define a title in its front matter, this is equivalent to name.
output_ext Extension of the output file.

You can set permalinks to metadata of the collection in _config.yml by adding the code:

collections:
  cookies:
    output: true
    permalink: /baked-goods/:path/
...

As you can see, it now links to /bake-goods/afghan/ instead of /cookies/afghan/.

Summary:

In a nutshell, that you know how to build URLs on your site is such a great way to SEO your site easily. Hope your site has more and more positive visitors by the search engine friendly URLs you created. If you find this instruction works, visit more helpful writings we write.


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.