SEO for theme developers

You can add search engine optimization metadata to your theme by using HTML and Liquid.

Add SEO metadata to your theme

You can add metadata by adding some HTML and Liquid to your theme.liquid file. You can use the code in this tutorial to add the following metadata:

To add SEO metadata to your theme:

  1. Find the theme you want to edit, and then click Actions > Edit code.

  2. Under Layout, click theme.liquid.

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

  4. 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 }}" />
    
    
  5. Click Save.

  6. From your Shopify admin, go to Online Store > Preferences.

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

  8. Click Save.

Title tag

For resource pages, such as product pages, collection pages, and custom pages, the <title> tag displays the SEO title that is 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, then 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 that is set in the Online Store settings of your Shopify admin. If the home page title isn't set, then the <title> tag displays your store's name, followed by the word "Welcome".

Meta description

For resource pages, such as product pages, collection pages, and custom pages, the meta description tag displays the resource's SEO description that is 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, then the resource's description or content is used instead. In this case, it will be limited to 320 characters after all HTML tags and additional whitespace have been removed.

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

Canonical URLs

You can use canonical URLs to help prevent duplicate content issues with search engines. Duplicate content issues occur when one page is accessible through two slightly different URLs.

Want to discuss this page?

Visit the Shopify Community