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 }} | KEYWORD TEXT HERE</title>
{% elsif template == '404' %}
<title>Page Not Found | {{ shop.name }}</title>
{% else %}
<title>{{ page_title }} | {{ shop.name }}</title>
{% endif %}
Notes: If the page is a product page, the title displays the product title then shop name. If the page is a ‘page’, the title displays the page title followed by the shop name. If the page is your site’s homepage (or index page), the title displays the shop name followed by keyword text you can replace manually from within the code. Simply replace “KEYWORD TEXT HERE” with the text you would like to appear in your homepage’s title tag. If the page isn’t a product, ‘page’ or the homepage, the title will display as the page title followed by the shop name. If you are more advanced, you can replace the 'KEYWORD TEXT HERE' with a theme setting that will allow you to edit this field more easily.
Meta Description
{% assign maxmeta = 155 %}
{% if template contains 'product' %}
<meta name="description" content="{{ product.description | strip_html | strip_newlines | truncate: maxmeta | escape }}" />
{% elsif template contains 'page' %}
<meta name="description" content="{{ page.content | strip_html | strip_newlines | truncate: maxmeta | escape }}" />
{% elsif template == 'index' and shop.description != '' %}
<meta name="description" content="{{ shop.description | strip_html | strip_newlines | truncate: maxmeta | escape}}" />
{% endif %}
Notes: We are assigning a variable called ‘maxmeta’ that, when called, will limit the # of characters in a meta description to prevent the search engines from truncating them because they are too long. If the page is a product page, the meta description will be the product description. If the page is a ‘page’, the title will pull the first section of page content. If the page is the homepage, it will display the shop description you write from within Preferences → General Settings. If the page doesn't fit any of those three cases, there will be no meta description, allowing the search engines to use on page content to create one automatically themselves.
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 }} | KEYWORD TEXT HERE</title> {% elsif template == '404' %} <title>Page Not Found | {{ shop.name }}</title> {% else %} <title>{{ page_title }} | {{ shop.name }}</title> {% endif %} {% assign maxmeta = 155 %} {% if template contains 'product' %} <meta name="description" content="{{ product.description | strip_html | strip_newlines | truncate: maxmeta | escape }}" /> {% elsif template contains 'page' %} <meta name="description" content="{{ page.content | strip_html | strip_newlines | truncate: maxmeta | escape }}" /> {% elsif template == 'index' and shop.description != '' %} <meta name="description" content="{{ shop.description | strip_html | strip_newlines | truncate: maxmeta | escape}}" /> {% endif %} <link rel="canonical" href="{{ canonical_url }}" /> - Replace ‘KEYWORD TEXT HERE’ on the second line of the pasted code with keywords related to your shop, and save your changes.
- Within the Admin, navigate to Preferences -> General Settings.
- Fill out and save your Shop Description:
- 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 and paste 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>).
- Navigate to your sitemap, located at your.shop.url/sitemap.xml .
- Save the sitemap.xml file. You can do so by navigating to File → Save Page As or right clicking and hitting Save Page As.
- Log into your Google Webmaster Tools account, navigate to your shop’s site and submit the sitemap.xml file you just saved.
- You have now completed optimizing and indexing your site with Google! Congratulations!
