SEO for Theme Designers
From Shopify Wiki
Contents |
Setting Up Your Theme for SEO
Shopify uses the Liquid templating system to generate the HTML code for your site. This means you can take advantage of liquid tags and filters in order to create rules about how the different elements of SEO optimization will display for a given page. Below are our recommendations for general best practices, along with a brief description of what is actually happening in the code.
If you don’t want in depth detail on each particular section of code, skip ahead to the step by step guide.
Warning: Always back up your code before making changes. Copy and paste the code to a text file so you have a backup just in case you wish to return things to their previous state. All of the recommendations below may interfere with certain settings your theme already has in place. If implementing a change to any element in your code, you need to ensure that you are carefully removing existing references to the content you are adding.
All of the snippets of code below go before the closing head tag (</head>) in your theme.liquid file. You can access the contents of this, and all the other template files for your theme from within the admin under Themes → Template Editor, or if you prefer to use TextMate, take advantage of the Shopify Texmate Bundle.
Title Tag
{% if template == 'index' %}
<title>{{ shop.name }} | {{ page_title }}</title>
{% elsif template == '404' %}
<title>Page Not Found | {{ shop.name }}</title>
{% else %}
<title>{{ page_title }} {% if current_tags %} - {{ current_tags.first }} {% endif %} {% if current_page != 1 %} Page {{ current_page }} {% endif %} | {{ shop.name }} </title>
{% endif %}
Notes: If the page is a product page, the title displays the Title tag of that product, if it has been set, or the product title otherwise, followed by the shop name. If the page is a ‘page’, the title displays the Title tag of the page if set, or the page title otherwise, followed by the shop name. If the page is your site’s homepage (or index page), the title displays the shop name followed by the shop's Meta title if set or the word 'Welcome' otherwise.
Meta Description
<meta name="description" content="{{ page_description }}" />
For resources pages, such as 'page' pages, product pages and collection pages, if a custom SEO description is provided in the admin (in Shopify 2 only), it will be used, regardless of its size. If a custom SEO description is not provided, the resource's description or body will be used in its place. 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 shop's description.
Duplicate Content (Rel Canonical)
<link rel="canonical" href="{{ canonical_url }}" />
Notes: Usage of rel canonical will help prevent duplicate content issues with the search engines. This could occur if the same page is accessible via two slightly different URLs.
Step By Step Guide
Warning: Always back up your code before making changes. Copy and paste the code to a text file before making changes so you have a backup just in case you wish to return things to their previous state. Refer to the other sections of this guide for more details on specific points.
Optimize page titles, meta descriptions and avoid duplicate content problems:
- In your admin, head to Themes → Template Editor.
- Open up your theme.liquid file and remove any lines of code that refer to <title>, meta name=”description”, or rel=”canonical” from before the closing head tag (</head>).
- Paste the following code on the line before the closing head tag (</head>):
{% if template == 'index' %} <title>{{ shop.name }} | {{ page_title }}</title> {% elsif template == '404' %} <title>Page Not Found | {{ shop.name }}</title> {% else %} <title>{{ page_title }} | {{ shop.name }}</title> {% endif %} {% if page_description != '' %} <meta name="description" content="{{ page_description }}" /> {% endif %} <link rel="canonical" href="{{ canonical_url }}" /> - Within the Admin, navigate to Preferences -> General Settings.
- Fill out and save your Shop Description:
- Fill out and save your Title tag.
The next steps are optional (but advised) once you launch your store - Create a Google Webmaster Tools account: www.google.com/webmasters/
- 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.
- Navigate from within the admin to Themes → Template Editor and open up your theme.liquid file.
- Paste the meta tag code on the line directly before the closing head tag (</head>).
- Log into your Google Webmaster Tools account, navigate to your shop’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! Congratulations!
