Why the f*ck Doesn't This HREFLANG Work - BrightonSEO Autumn 2021

Why The F*$%
Doesn't This
HREFLANG Work?
Sophie Gibson | Rise at Seven
SLIDESHARE.NET/SOPHIEGIBSON3
@SophieGibson

@sophiegibson #brightonSEO Why the F*#& doesn't this HREFLANG work?
Hi, I'm Sophie
Technical SEO  Rise at Seven
@sophiegibson
@riseatseven

Helps Google understand the
relationship between the same
content in alternate languages
and/or regions

HREFLANG
Image via Sam Underwood: https://www.samunderwood.co.uk/resources/visualising-seo/
TSHIRT FOR A
UK AUDIENCE
SAME TSHIRT FOR
A US AUDIENCE

Improve search
visibility

Users more likely to
convert

Reduces duplicate
content problems

How does
HREFLANG
get on a site?

THREE WAYS TO IMPLEMENT
1 HTML tags

1 HTML tags
<link rel="alternate" href="https://www.example.com/"
hreflang="en" />
<link rel="alternate" href="https://www.example.com/en-gb/"
hreflang="en-gb" />
<link rel="alternate" href="https://www.example.com/en-us/"
hreflang="en-us" />

1 HTML tags
2 HTTP headers

Link: <http://example.com/file.pdf>;
rel="alternate"; hreflang="en",
<http://de-ch.example.com/file.pdf>;
rel="alternate"; hreflang="de-ch",
<http://de.example.com/file.pdf>;
rel="alternate"; hreflang="de"
2 HTTP headers

1 HTML tag
2 HTTP headers
3 In an XML sitemap

3 In an XML sitemap
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>http://www.example.com/english/page.html</loc>
<xhtml:link rel="alternate" hreflang="de"
href="http://www.example.com/deutsch/page.html"/>
<xhtml:link rel="alternate" hreflang="de-ch"
href="http://www.example.com/schweiz-deutsch/page.html"/>
<xhtml:link rel="alternate" hreflang="en"
href="http://www.example.com/english/page.html"/>
</url>

What does
HREFLANG
need to work?

HREFLANG NEEDS TWO THINGS
1 Valid hreflang attributes

HREFLANG
Image via Aleyda Solis: Avoiding hreflang issues by following a 6 step implementation process
VALID HREFLANG ATTRIBUTES
REQUIRED
OPTIONAL

HREFLANG NEEDS TWO THINGS
1 Valid hreflang attributes
2 Return hreflang tags on all
alternate page versions

RETURN TAGS ON ALL VERSIONS

HREFLANG THEORY

HREFLANG REALITY

Dev
resource
Size of site
/ country
versions
CMS
platform /
Site set-up
x x
DIFFICULTY COMPOUNDS

Why the F*#&
doesn't this
HREFLANG work?

WATCH OUT!
for

WATCH OUT FOR
Mix of alternate version landing
pages ranking for terms in
another location

WATCH OUT FOR
Content not being indexed in
alternative languages and
locations

WATCH OUT FOR
Google classing alternative
site page versions as a
canonical of the other pages

COVERING
Why HREFLANG is not
having an effect when it's
on the site

LOOKING AT
- Common problems with HREFLANG
- Why they're an issue
- How to fix

HOW?

SCENARIO

SCENARIO
How the issue was found

SCENARIO
Troubleshooting the problem

SCENARIO
Troubleshooting the problem
How it was resolved

SCENARIO
ECommerce site targeting UK 
two other countries

IMPLEMENTATION
HREFLANG in the <head>

WHAT WAS THE PROBLEM?
Non-UK landing pages were
ranking for keywords in the UK 
instead of the UK site

TROUBLESHOOTING
Checked GSC
International
targeting report

IMPLEMENTATION
It looked all correct…

IMPLEMENTATION
It was on the page…

IMPLEMENTATION
It was on the page…
It validated in tools…

ME BUT IT'S THERE?!

GOOGLE NOT THERE…MIRAGE

So,why the F*#&
doesn't this
HREFLANG work?

TROUBLESHOOTING
If it's there - why can't Google
see it properly?

???

TROUBLESHOOTING
Checked the page via the W3
validator

https://validator.w3.org/

THE ISSUE
<noscript> tag with an img
element in the <head>

<body> only <body> or <head>
can only contain <link>
<style> and <meta> tags

THE CULPRIT
3rd party tracking scripts

THE CULPRIT
3rd party tracking scripts
Looking at you,Facebook

<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '{your-pixel-id-goes-here}');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&
noscript=1"/>
</noscript>

SOLUTION
Move <noscript> to body

WHAT ACTUALLY HAPPENED
Non-UK landing pages were
still ranking for keywords in
the UK

TROUBLESHOOTING
Checked the page via Sitebulb

THE ISSUE
Single Point of Failure

Steve Souders - Frontend SPOF | High Performance Web Sites
WHAT HAPPENS IN THE BROWSER?

THE ISSUE
3rd party scripts in the
<head>

THE ISSUE
3rd party scripts
in the <head>

HOW TO FIX
Move the HREFLANG markup
above the scripts

FURTHER READING
Oliver
Mason
Breaking the Head (Quietly)
https://ohgm.co.uk/breaking-head-quietly/

TROUBLESHOOTING
Page HTML was okay?
Scripts moved?

TROUBLESHOOTING
If you visited the .com site it
redirects you to a subdirectory

THE BIGGER
ISSUE

GEOLOCATION

Geotargeting isn't an exact
science,so it's important
to consider users who land
on the "wrong" version of
your site
- Google Search Central - Managing Multi Regional Sites

WHY DOES THIS HAPPEN?
Geolocation based redirects
takes Google to one version

ROADBLOCK
Googlebot gets redirected to the
/us/ version of the site

Consider users who land
on the "wrong" version of
your site
- Google Search Central - Managing Multi Regional Sites

COUNTRY
SELECTORS
Users have
options - did bots?

Country switchers with me
Deliver search-friendly JavaScript-powered websites (Google I/O '18

Google can’t find any crawlable
internal links to alternate
country versions of the page

HOW TO FIX IT
Adding a href tag & anchor text
to create an internal link to
alternate page versions

DEVELOPMENT RESOURCE
What if you don’t have much?

OTHER OPTIONS
Set it up in the sitemap instead
via Magento plugin

OTHER OPTIONS
This wasn’t an option due to
the site set up,this didn't
work

IN SUMMARY

HREFLANG ISSUES CAN CASCADE

…IT'S PROBABLY
THE HEAD

HREFLANG is just
one aspect of
international SEO

Image via Onely

Thanks!
@sophiegibson
@riseatseven
Questions? Reach me on Twitter

RESOURCES
Aleyda Solis: Hreflang Implementation Guide
Analytics Mania: How to Fix Facebook Pixel Code <noscript> in GTM
OHGM Breaking the <head> (Quietly)
OHGM Hreflang Tags Not Respected (How to Solve)
Onely: Ultimate Guide to International SEO
Sitebulb: <head> contains a <noscript> tag, which includes an image
Sitebulb: Contains one or more single point of failure

Why the f*ck Doesn't This HREFLANG Work - BrightonSEO Autumn 2021

More Related Content

What's hot

Similar to Why the f*ck Doesn't This HREFLANG Work - BrightonSEO Autumn 2021

Recently uploaded

Why the f*ck Doesn't This HREFLANG Work - BrightonSEO Autumn 2021