Making Your Shopify Site SEO Friendly
June 23rd, 2008 by Zac HeiseyShopify.com is an all-in-one ecommerce solution for users looking for a quick and easy way to begin selling products online. A simple and intuitive system, Shopify allows users to create and customize their own ecommerce website in minutes. Despite it’s appeal, especially among first-time web sellers, Shopify does present some challenges, particularly in areas of SEO.
In dealing with a template-based system such as Shopify, making SEO-friendly changes to your site can be a headache. The main problem in terms of SEO that many users report with Shopify is the difficulty in creating custom Title tags and Meta tags. We recently began optimizing a client’s site that was being hosted on Shopify.com and ran into some similar problems.
After scouring Shopify’s forums, piecing together bits of information, and tweaking the code, we came up with a relatively simple way to include custom tags on your Shopify site.
To create tags, you need to add conditionals to the “theme.liquid” file of your site (bold portion). Here is the technique that we used:
{% case page_title %}
{% when null %}
<title>{{shop.name}} - {{page_title}}</title>
{% when ‘Your Page Title’ %}
<title>Your Custom Title Here</title>
<meta name=”keywords” content=”Your Custom Keywords Here” />
<meta name=”description” content=”Your Custom Description Here” />
{% else %}
<title>{{shop.name}} | {{page_title}}</title>
{% endcase %}
Use the bolded conditional statements above for each page that you wish to create customs tags for. For example, if your page was titled “Welcome”, your conditional might look something like this:
{% when ‘Welcome’ %}
<title>T-Shirt Printers | T-Shirt Customization</title>
<meta name=”keywords” content=”t-shirt printing, personalized t-shirts” />
<meta name=”description” content=”Create and customize your own t-shirt” />
This is just one of many ways to create title and meta tags for your Shopify site. There are also several other factors that go into making your Shopify site SEO friendly (internal linking, sitemap, url redirects, etc). Start by creating custom, keyword-focused title and meta tags, and your Shopify site will begin to climb the search engine rankings.
Subscribe to our Blog
July 8th, 2008 at 11:50 pm
Thanks for the fix! I was able to get it working for the homepage; however, I’m having trouble with the product pages. Should I be adding…
{% when ‘Welcome’ %}
T-Shirt Printers | T-Shirt Customization
to the top of my product page above my 1st paragraph of content? I’m not clear on where this code goes. Also, do I need to modify page.liquid at all?
Thanks again for putting this out there. Shopify rocks, but the SEO functionality is lacking.
July 9th, 2008 at 1:34 pm
Ted,
For our client’s shopify site, all of our work was done on the theme.liquid page. We made no changes to product pages, page.liquid, etc.
You want to place the code between the head tag and body tag on the theme.liquid page. Each page that you wish to add Title and Meta tags to should have a conditional.
Here is an example for a ‘Welcome’ page and a ‘Product 1′ page:
{% case page_title %}
{% when null %}
{% when ‘Welcome’ %}
{% when ‘Product 1′ %}
Use this method for each of your landing pages, then insert the remaining portion of the code before the body tag (the part that comes after the bold section in the article).
July 9th, 2008 at 2:57 pm
Ted,
For our client’s Shopify site, we only made modifications to the theme.liquid page. No changes were made to any products pages or the page.liquid page.
You want to place the code on the theme.liquid page between the head tag and body tag. You are also going to be creating conditionals for each page that you wish to modify the Title and Meta tags for.
Here is an example of the code you would want to place if you were modifying your ‘Welcome’ and ‘Product 1′ pages:
{% case page_title %}
{% when null %}
{% when ‘Welcome’ %}
{% when ‘Product 1′ %}
Once you have completed the above conditionals for all of your landing pages, paste the rest of the code (which is under the bolded conditional in the post) before the body tag.
July 9th, 2008 at 11:23 pm
Zac,
Thanks a ton! That was driving me nuts. I was able to get my first product page to work. Thanks again for posting this article. It was most helpful.
-Ted
September 18th, 2008 at 10:45 am
Mr. Heisey,
It’s also customary to give credit when you publish someone else’s code.
The one you refer to as yours was developed and published by me, here: http://forums.shopify.com/categories/1/posts/19248#comment-19425.
Thank you for acknowledging that.
September 18th, 2008 at 11:42 am
Christina,
First, let me apologize for not crediting you for portion of the code. I mentioned in the post that I had searched through Shopify’s forums and had pieced some things together- but you are correct in saying that a portion of the code displayed should be credited to you. However, the main focus of the post was the bolded portion of the code which we developed and was not included in your original forum post. As per my understanding of your forum post, you propose to make changes to each template page independently. The conditionals that we developed refer to a site’s unique pages, rather than the template pages. Also, all of the conditionals that we worked with were placed on the “theme.liquid” page as opposed to altering each individual template page.
It was not my intention to pass off your work as my own. In fact, the post also mentions that there are several other ways to create custom title and META tags, and that this was just one way. Once again, I apologize for not citing your contribution to the post. Please feel free to express any other questions or concerns you may have.
Zac Heisey
September 18th, 2008 at 1:12 pm
Zac,
Thank you for your acknowledgment; I appreciate it.
Let me correct you on one point: as I explained in the instructions accompanying this code, the whole code goes into the theme template, not in the other templates, as you assume. It appears once.
From this mistaken perception, it is clear that you do not fully understand the code, and hence, your changes to it do not make much sense: you’ve now got a case loop wrapped within another case statement, and the two contradict each other.
Please feel free to express any questions or concerns you may have.
Best regards,
Christina
September 19th, 2008 at 10:00 am
Christina,
We’ve gone ahead and removed the portion of code that we referenced on your end, after realizing that the code wasn’t being executed in our given situation and wasn’t necessary. There didn’t appear to be any problems on our end when our original code was executed but we appreciate input from people who are able to point out potential fixes in our work that helps us to learn, thanks again.
-Mike