<< Online Video Advertising Expected to Skyrocket Over the Next 4 Years
Internet Top Level Domain Names Expanding in a Big Way >>
Making Your Shopify Site SEO Friendly
Posted by Zac Heisey on Mon, 6-23-2008 at 09:00 am to Case Study
Shopify.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 ranking.
Post to
Where to put the above meta codes?
We need the meta tags for all the pages on the website. Where in shopify template editor do I put the codes your listed on this post? Do I put in the theme tempate, or any file linked to the pages?
works like a charm. thanks.
works like a charm. thanks.
Works a charm
Zac, i'd tried pretty much everything in the Shopify forums but nothing worked. Was pulling my hair out last night. Tried your simple code and works perfectly. Thanks for posting this, you've made my day! Ed
shopify SEO
How do you know when the code works?
Zac, Thanks a ton! That was
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
Thanks for the fix! I was
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 Customizationto 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.
Ted,For our client’s
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.
Zac, Thanks a ton! That was
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
Mr. Heisey, It’s also
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.
Christina, First, let me
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
Zac, Thank you for your
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
Christina, We’ve gone ahead
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
Hi Zac, I have been trying to
Hi Zac, I have been trying to get the code in this post for ages its driving me nuts. i managed to get Christina’s working just dandy but really need the fine control to specify met info were needed. What value is Welcome in the statement {% when ‘Welcome’ %} is it page name or page title or some other value? Cheers Mike
Post new comment