International SEO often looks relatively simple on the surface, but when you look under the hood you find a whole lot of stuff that needs fixed before you even get close to getting it working.
I’m writing this as I’ve just finished implementing Hreflang for a client using shopify across 5 main regions – the UK, Europe, US, Germany and Canada.
Now there’s no built-in way to specify Hreflang code on individual pages in Shopify (by page I mean), which is a bit of an oversight, as it means that anything you drop in to your theme is likely to be hard-coded and only work on one page (your home page for example).
That means any other pages using the same page/collection templates etc. will not work, because the Hreflang code just won’t be accurate – e.g. /exciting-products will end up with a Hreflang alternative that’s the same as the one you wrote for your homepage.
That sucks because the purpose of Hreflang is to ensure that potential customers in other regions see the correct version of every page – not just your homepage, and the way Shopify is setup, that’s bloody hard to achieve.
Anyway – here’s the process we had to follow just in case it helps anybody else out who faces having to get this sorted out in Shopify (which ordinarily I really like!)
First, you need to crawl all your sites and rationalise the path URLs so that they’re all exactly the same.
Over 5 big sites, with URLs originally generated by different people and sometimes in different languages, it’s not fun. If there are pages that exist on some of them, but don’t on others, you’re either going to need to think about creating them where they don’t exist, or noindexing/using canonical URLs to keep Google away. Your sites are going to have to be as close to carbon copies structurally as possible (I only mean the URLs here).
Okay, so after a few days fighting with Screaming Frog and 301 redirecting old URLs to others, then fixing old 301s, then clearing out old collections that nobody uses any more but are still live on the site, and wondering why a Canadian site has German language URLs, you should be able to sit back – crawl all the sites again, and put together a doc in which you compare all 5 sites URLs – Collections/Products/Informational pages and see that they’re all the same right through the estate.
You also need to keep an eye on existing canonicals. Shopify generates canonicals automatically, so understand which URLs are canonical and which aren’t.
Okay – so you’re happy that the URLs match on every site you’re working with?
Yes – that means that the German language site needs to have the English language URLs – sorry Germany, it’s just the way we have to do it.
What we’re going to do now is use the canonical URL on the page to generate the hreflang on the fly.
Your Hreflang code is going to look like this:
<link rel=”alternate” hreflang=”en-US” href=”{{ canonical_url | replace: shop.domain, ‘yoursite.us’ }}” />
<link rel=”alternate” hreflang=”de-DE” href=”{{ canonical_url | replace: shop.domain, ‘yoursite.de’ }}” />
What we’re doing here is pulling the canonical URL from the page, replacing the domain with the appropriate regional site and putting that all back together within the Hreflang statement.
You need to do that for each language/country variation and appropriate site.
Don’t forget your x-default too (which also needs to be dynamic so individual pages have the correct default set:
<link rel=”alternate” hreflang=”x-default” href=”{{ canonical_url | replace: shop.domain, ‘yourdefaultsite.com’ }}” />
Prep that in a text editor and then paste it in as per the instructions over here.
Save it, and you should have a relevant, dynamically generated hreflang on every page. Don’t forget that you need it on all your regional sites so that there is reciprocity (otherwise it won’t work).
Caveat – this method uses the canonical URL – there may be other methods you can work out using liquid’s page.url or similar, perhaps adding different code to different page/collection themes etc.
This code will use the canonical URL for Hreflangs on URLs that are different to their canonical. To my mind this is okay – the canonical URL is the one that will be indexed, and the international equivalent to the canonical is the logical page to be indexed for those pages. Others may disagree, but based on my experience it seems Google is smart enough to figure out that the canonical is the best place to take the Hreflang instruction from.
Good luck…
