Search engine optimization (SEO) for theme designers

Set up your theme for SEO

Shopify uses Liquid to generate the HTML code for your site. That means you can use Liquid tags to create rules about how the different elements of SEO optimization will display for a given page. Below are our recommendations of best practices.

If you don’t want in-depth coverage of each section of code, skip ahead to the step by step guide.

All of the following snippets of code go above the closing </head> tag in your theme.liquid file. You can access the content of that file by going to the Themes page of your Shopify admin, clicking the ... button, and then clicking Edit HTML/CSS. The theme.liquid file is located underLayout.

Title tag

<title>
{{ page_title }}{% if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif %}{% if current_page != 1 %} &ndash; Page {{ current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
</title>

For resource pages, such as product pages, collection pages, and custom pages, the <title> tag displays the SEO title that's set in the resource's details page of your Shopify admin, followed by the store name. If an SEO title isn't set for that resource, the <title> tag displays the resource's title, followed by the store name.

For your site's home page, the <title> tag displays the home page title set in the Online Storesettings of your Shopify admin. If the home page title isn't set, the <title> tag displays your store's name, followed by the word "Welcome".

Meta description

{% if page_description %}
<meta name="description" content="{{ page_description | escape }}" />
{% endif %}

For resource pages, such as product pages, collection pages, and custom pages, the meta description tag displays the resource's SEO description set in the resource's details page of your Shopify admin, regardless of the description's size. If a custom SEO description isn't provided, the resource's description or content will be used instead. In this case, it will be limited to 255 characters after all HTML tags and additional whitespace have been stripped.

For other pages, such as the home page, /search page, and /collections page, page_description will use the store's description set in the Online Store settings of your Shopify admin.

Duplicate content and canonical URLs

<link rel="canonical" href="{{ canonical_url }}" />

Usage of canonical URLs will help prevent duplicate content issues with search engines. This could occur if the same page is accessible via two slightly different URLs.

Step-by-step guide

1. From your Shopify admin, click Online Store, then click Themes (or press G W T):

   

2. Find the theme you want to edit, click the ... button, then click Edit HTML/CSS:

   

3. Under Layout, click theme.liquid.

4. Find and delete any lines of code above the closing </head> tag that refer to <title>, meta name="description", or rel="canonical".

5. Paste the following code on the line above the closing </head> tag:

   
   <title>
   {{ page_title }}{% if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif %}{% if current_page != 1 %} &ndash; Page {{ current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
   </title>
   {% if page_description %}
   <meta name="description" content="{{ page_description | escape }}" />
   {% endif %}
   <link rel="canonical" href="{{ canonical_url }}" />
   
   

6. Click Save.

7. From your Shopify admin, click Settings, then click Online Store (shortcut G S W):

   

8. Under Title and meta description, enter your home page title and description in the Homepage title and Homepage meta description fields:

   

9. Click Save.

The next steps are optional (but advised) after you launch your store

1. Create a Google Webmaster Tools account.

2. Verify your site to establish your ownership.

   If you're using Asynchronous tracking code, you should use Google Analytics to verify your site.

   Otherwise, choose to verify your site using a meta tag. They will give you a line of code to place on your site to verify that you are indeed the owner. Copy that line of code.

3. From your Shopify admin, click Online Store, then click Themes (or press G W T):

   

4. Find the theme you want to edit, click the ... button, then click Edit HTML/CSS:

   

5. Under Layout, click theme.liquid.

6. Paste the meta tag code on the line directly before the closing </head> tag.

7. Click Save.

8. Log in to your Google Webmaster Tools account, navigate to your store’s site, and submit your site and the sitemap (located at www.example.com/sitemap.xml).

You have now completed optimizing and indexing your site with Google.