TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service Workers, Does it Work?

Dan Taylor | @TaylorDanRW | #TechSEOBoost
Implementing
Hreflang on
Legacy Tech
Stacks Using
Service Workers,
Does it Work?
–
Can we really bypass legacy stacks &
DevOps altogether?

Why?

If there is no struggle,
there is no progress.

Legacy issues, Devs…
When working with a lot of big brands and
enterprise clients, they often come with a lot
of baggage, such as:
• Congested development queues/long lead
times
• Gatekeeper devs who are, unhelpful
• Old platforms/servers not scalable
• Builds not originally scoped properly
• Code freezes
• Duct tape fixes preventing changes

Case Study
• International travel client with 15
international sites (including English for
the US, English for AU, English for the
UK…)
• Running a very legacy stack (physical
servers)
• Unable to implement Hreflang due to
platform restrictions through the HTTP
Header or the XML sitemap…
• Unable to implement Hreflang in the
<head> due to developer resistance in
changing the <head>

Problems Faced
• Content duplication across the multiple
English alternate versions
• Built on separate databases, so effectively
15 different URLs and websites with no
real connection (aside from a header
dropdown)
• Incorrect versions ranking and competing
in incorrect Googles (leading to users
inquiring to the wrong sales team,
increased costs of handling leads)
• Tracking and attribution all over the place
• And using an IP redirect…

Solution. Cloudflare Workers.

Cloudflare Workers provide a
lightweight JavaScript execution
environment that allows
developers to augment existing
applications or create entirely new
ones without configuring or
maintaining infrastructure.

Why Cloudflare
Workers?
• Cloudflare Workers allow us to take
control of the DOM before the website is
served, and layering new technology
without need to change old (edge tech)
• Accessible from Cloudflare’s free account
and cost effective to implement, and
scalable
• Taking back control from development
restrictions

Hreflang Service Workers

Requirements
• Placement within the <head> to prevent
accidental issues with head-parsing
• Needs to appear within the rendered
HTML for Google to pick-up (Mobile
Friendly Test)
• Needs to work (duh)
• Needs to be able to be validated easily
• Accessible, scalable and manageable by
non-developers/those with working code
competency
• Complimentary, and not cause conflicts or
issues with existing infrastructure

Is it picked up in the
rendered HTML?
Google’s Mobile-Friendly Test (as advised by
John Mueller)
This shows that you can inject Hreflang to
a legacy page through Workers, without
server or CMS access, and it will be
picked up by Googlebot.

Does it work?
Test markets:
• English (primary)
• French
• Russian
Tested through NordVPN in:
• Google Chrome
• YaBrowser
Google.fr – Query “Dan Taylor SEO”, French homepage
Google.ru – Query “Dan Taylor SEO”, Russian homepage
Yandex.ru – Query “Dan Taylor SEO”, Russian homepage

Can it be validated &
monitored?
Validated through third-party Hreflang
validation tools:
• Hreflangchecker.com
• Technicalseo.com
• Hreflang.ninja
• Flang.dejanseo.com.au
• SiteBulb

Accessibility & Scalability

How do we make this work for everyone?
Accessible
• Generators for Hreflang (and Redirects), either ”one by
one” or CSV upload (https://sloth.cloud) for free.
• Documentation available on how to setup Cloudflare
Workers
Scalable
• Able to be implemented through Cloudflare’s free plan at a
cost of $5 for 10m requests, then 50c per 1m requests
thereafter (can limit requests to bots only)

Hreflang is only the start.

Future Use Cases
Redirects
• 301/302 redirects
“Server” Logs
• Pseudo log file tracking (useful for
platforms like Demandware/Salesforce
CC, and Shopify)
Page Load Time Tracking
Downtime & Error Discovery

Future Use Cases #2
Content Modification
• Banner/panel, primary copy, hiding
content…
• Canonicals, scripts, styles, JSON-LD
schema, OG/Twitter Meta Tags
• Fragment injection
• Inject CSP (security headers, preventing
XSS, CSRF)
• Global overrides, i.e. maintenance mode

Thank you!
@TaylorDanRW | dan@salt.agency | @salt_agency

TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service Workers, Does it Work?

TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service Workers, Does it Work?

Recommended

More Related Content

What's hot

What's hot(20)

Similar to TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service Workers, Does it Work?

Similar to TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service Workers, Does it Work?(20)

More from Catalyst

More from Catalyst(20)

Recently uploaded

Recently uploaded(20)

TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service Workers, Does it Work?