This is Part 3 of a 4 part series of Shopify SEO tips that started here.
If you want to shortcut a lot of the SEO headaches, the Shoptimized™ Theme is renowned as one of the fast-loading Shopify themes to consider. If you’ve read the previous articles in this series, you’ll know how important page-load speed is to top rankings in Google.
Sitemap Status
Google already knows about your store’s sitemap from your robot.txt file that we mentioned earlier, so the main thing to understand about your sitemap is that you’re submitting it purely to help identify errors inside your Google Search Console dashboard. Once you’ve identified any errors, then you can fix them.
Inside GSC click on ‘Crawl’ then ‘Sitemaps’. If there isn’t a sitemap you’ll need to submit yours pronto.
To submit your sitemap to GSC, paste your URL as below:
http://yourstore.com/sitemap.xml
http://yourstore.com/sitemap.xml
Canonicalization is effectively streamlining pages when there are multiple versions of the same page. Having a single version of a page eradicates duplicate content issues (which Google will penalize you for) and helps build the link value of your pages.
There can be between three and five versions of any Shopify page:
http://yourstore.comhttp://www.yourstore.comhttps://yourstore.comhttps://www.yourstore.comhttp://your-store.myshopify.com
All of the above versions need to be directed to a single page. Number 3 on the above list is preferential as it’s easier to read without the ‘www’ prefix. It’s a no-brainer that you should be using HTTPS.
You can easily set up page canonicalization in Shopify under ‘Online Store’ > ‘Domains’ then select ‘Redirect all traffic to this domain’.
rel canonical
The rel canonical tag on a page tells the search engines the preferred version of your page that you want them to index.
The tag is critical for stores with variants and collections because these will alter the URLs.
When a variant is selected you’ll notice the URL gets appended with a query string for example:
?variant=39568359751742
Whenever a product is in a collection, Shopify creates a new URL for the product. If for example, a product is in two different collections, it has two collection URLs in addition to its main product URL:
https://yourstore.com/collections/best-sellers/products/satin-drape-tie-bodysuit
https://yourstore.com/collections/tops/products/satin-drape-tie-bodysuit
https://yourstore.com/products/satin-drape-tie-bodysuit
Use Screaming Frog (as mentioned in part two of this series) to quickly scan for canonicalizations. Below, you can see three examples of products that have a canonicalized version that differs from the primary URL:
Whenever the canonical version of one of your product pages is yourstore.com/products/product-name, it usually means that you have everything set up correctly. The only caveat is if a developer has added conditional statements around the canonical tag.
Check the liquid template for the following code, if it’s missing add it between the <head> and </head> tags in your theme.liquid file:
<link rel="canonical" href="{{ canonical_url }}" />
You can also follow the ‘Directives’ tab in your Screaming Frog scan. If your scan reveals no use of rel canonical or incorrect use, add the above code.
HTTPS
This is a no-brainer and in fact, Shopify forces all new stores to use HTTPS. If your store is older and still using HTTP URLs then it will be suppressed by Google so it’s a good idea to switch.
It’s easy to set up an SSL certificate inside Shopify and then claim your HTTPS URL. All of your previous HTTP URLs will automatically be redirected to the HTTPS version.
Accessibility
Although accessibility for people with disabilities is an important consideration, we’re only going to cover the factors that affect SEO here.
- Geographic Targeting
If you have various different storefronts for different countries then this section of the guide is for you. This can be achieved using multiple websites, sub-domains, or folders that a visitor sees depending on which country they are browsing from.
It’s important to associate the appropriate county with the correct website inside your GSC dashboard. Google is sophisticated enough to do this automatically for top-level domains like co.uk for the UK. Otherwise, you’ll have to configure it yourself.
- Language Targeting
It makes sense that your store should show content to your visitors in their own language, it will dramatically reduce the bounce rate for international visitors and improve conversions.
If your theme doesn’t offer alternative languages, you can create and add translations yourself.
You can also configure the language targeting option in GSC:
If your store has multiple languages, use the hreflang tag. Most Shopify stores won’t have this set up already, so if you want to target Spanish speaking customers, for example, you could use a multilingual folder structure and redirect visitors from Spanish speaking countries to the Spanish version of your page by adding the following code to the English version of the homepage:
<link rel="alternate" hreflang="es-us" href="http://yourstore.com/es/" />
You can write custom Liquid code so the hreflang is functional for multilingual stores. The precise solution will depend on your store’s URL structure. If you have a UK store with identical pages to your US store, insert this code on the UK store:
<link rel="alternate" hreflang="en" href="{{ canonical_url | replace: '.co.uk', '.com' }}" />
On the .com domain, insert:
<link rel="alternate" hreflang="en-au" href="{{ canonical_url | replace: '.com', '.co.uk' }}" />
Of course, you could just use an app like Multi-Store Hreflang Tags to make it simple to manage multiple stores and protect your SEO.
- Javascript & CSS Disabled
For the most part, search engine bots view your store in HTML so it’s a good idea to check your store’s appearance when javascript and CSS are disabled. Plus, although it’s extremely rare, some people disable CSS & javascript on their browsers.
Browseo is a great, free tool to use. Here’s what you should be checking for:
- Are all menus visible?
- Are all links clickable?
- Is unimportant content appearing above more crucial content? If so, move it down the page.
- Structured Data Errors
When your store appears on the Search Engine Results Pages (SERPs) it can have a nicer markup in some cases. This is sometimes called ‘markup’, ‘schema’, ‘structured data’, or ‘rich snippets’.
You’ll find two useful tools here for reviewing your structured data and optimizing it in real-time.
In the example below, Amazon’s listing is displaying the rich snippet with the review ratings, whereas Klevercase’s own store is displaying as standard.
The reality is that rich snippets affect the click-through rate to your store and how visitors perceive your store. Even if you have glowing 5-star reviews on your store’s product page, an aggregate 3-star Amazon rating displayed in the SERPs can hurt your sales.
Using scheme markup does not guarantee that your listings will display it in the SERPs but without it, you have zero chance.
With that said, every Shopify store should use at least three types of markup:
- Semantic markup for products
- Semantic markup for reviews
- Semantic markup for the product offering
Semantic Markup for Products
Without fail, your store should be using product markup. This will include things like the brand, GTIN/UPC number, color, etc. The full documentation on this can be found here.
Below is a simple example of schema markup for a typical Shopify product:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<link itemprop="availability" href="http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}">
<meta itemprop="priceCurrency" content="{{ shop.currency }}" />
<meta itemprop="seller" content="{{ shop.name | escape }}" />
<meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition" />
<meta itemprop="price" content="{{ variant.price | money_without_currency }}">
<h1 itemprop="name">{{ product.title }}</h1>
</div>
Semantic Markup for Reviews
If your store is brand new you might not have any reviews yet but if you already have some, it makes sense to showcase them in the Google SERPs. Most of the well-known review apps use the correct schema but if you need it, you can go to https://schema.org/AggregateRating for the full documentation.
Semantic Markup for the Product Offer
The offer schema shows up as the ‘In Stock’, currency, and price in the SERPs – see the example above.
Below is what the source code looks like for the example above:
As before, you can check the full https://schema.org/Offer documentation to make sure you’ve optimized it correctly for your store.
Semantic Markup for the Collection Pages
Every collection page on your store should use the CollectionType element along with ListItem for each product on a collection page.
At the time of writing Google doesn’t alter the search results based on the collection page schema markup but it won’t do any harm having everything ready for that day if it ever comes.
See the example below of how to correctly configure your collection page markup:
{%- capture collection_json_ld %}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "ItemList",
"name": "{{ page_title }}",
"url": "{{ shop.url | append: collection.url }}",
"description": "{{ page_description | escape }}",
"image": "https:{{ collection.image | img_url: "master" }}",
"mainEntityOfPage": {
"@type": "CollectionPage",
"@id": "{{ shop.url | append: collection.url }}"
},
"itemListElement": [
{%- for product in collection.products %}
{
"@type": "ListItem",
"position": {{ forloop.index }},
"url": "{{ shop.url | append: '/products/' | append: product.handle }}"
}{%- unless forloop.last -%},{%- endunless -%}
{%- endfor %}
]
}
</script>
{%- endcapture %}
{{ collection_json_ld | strip_newlines | replace: ' ', '' | replace: ': ', ':' | replace: ' {', '{' }}
Part 4 will be published soon.
