Headless SEO: Optimising Next Gen Sites | brightonSEO 2021

Headless SEO
Optimising Next Gen Sites
Alex Wright | Clicky Media
https://www.slideshare.net/AlexWright84/
@Wrighty__

What we’ll cover
What a headless CMS is, and
examples
Beneﬁts to using a headless CMS
Things to look out for when
moving to a headless CMS
Intro >

So, you’re thinking of moving to a
headless CMS.
#BrightonSEO @Wrighty__
Home >

...but it’s all a bit nerve wracking
Intro >

Not quite at the stage to move?
You’ll ﬁnd some resources on the ﬁnal slide!
Intro >

What are
headless websites?
Intro > What A Headless CMS Is

The notion of a “headless” website
refers to a situation where:
https://pantheon.io/blog/headless-websites-whats-big-deal-decoupled-architecture

There is a traditional database-driven CMS
which editors use to maintain the content for
the site, usually via the same old admin
interface as always.

The content for the site is accessible via a
web-service API, usually in a RESTful manner

The end-user experience is delivered by a
Javascript application rendering the output of
this API into HTML

Let’s break that
down a little...

Image credit - Brett Cameron -
https://medium.com/@bretcameron/building-my-ﬁrst-headless-cms-what-i-wish-i-knew-a
t-the-start-1f3ef3a00bb8
Monolithic CMS
Database
Back-end CMS
Interface
Front-end
presentation layer
One back-end is used to create
one front-end, which must run on
the same server
Headless CMS
Database
Back-end CMS
Interface
API
One back-end can be used to provide data for
numerous front-ends, each with their own
server, and there are no limitations on the
technologies used for these front-ends.

CMS.
1

A CMS is used to create &
control content:
CMS

API.
2

The CMS translates that
content into an API
CMS API

HTML.
3

The API is translated into HTML
by a Javascript framework
##BrightonSEO @Wrighty__
CMS API HTML

Popular headless CMS’es
Strapi
8.5k installs
Netlify
345k installs
Contentful
25.6k installs

Traditional CMS with headless
capabilities
WordPress Magento Drupal

It’s also possible to run a
hybrid setup...
WordPress + Magento Storyblok + Shopware

What are the Beneﬁts?
Intro > What A Headless CMS Is > Beneﬁts

Headless CMS Beneﬁts
Performance
Flexibility Hosting

Case studies

25% Increase
In conversions
30% Increase
In conversions

Making the switch
Intro > What A Headless CMS Is > Beneﬁts > Switching

First of all, don’t panic

The fundamentals
still apply

Keep content & URL
structures the same

Things to look out for

Rendering
Issues.

APIs from the CMS deliver page
information as JSON data

This means that the site will be
rendered client side

Why is this a problem?

For users, the diﬀerence comes
in performance

Yes, crawlers can render webpages client side
https://developers.google.com/search/docs/guides/javascript-seo-basics
Crawl
Queue
Crawler Processing Index
Render
Queue
Renderer
URLs
URL HTML
Rendered
HTML

...but it’s deﬁnitely not optimal for them
or the site

How do we make life easier for
crawlers & users, AND maintain
performance?

Server side rendering & Static Site
Generation are popular ways to deal
with this issue

SSR vs SSG
Server Side Rendering Static Site Generation
Pages built on the server at request time Pages built during ‘build’ time - before users have
accessed the site
Unable to use a CDN Can use a CDN
Good solution for dynamic sites/extremely large sites Good solution for more static sites/smaller sites
Impacts TTFB speed Can take a long time to ‘build’ sites if they’re larger

Server Side Rendering
Pages built on the server at request time
Unable to use a CDN
Good solution for dynamic sites/extremely large sites
Impacts TTFB speed

Static Site Generation
Pages built during ‘build’ time
Can use a CDN
Good solution for more static sites/smaller sites
Can take a long time to ‘build’ sites if they’re larger

You might have also heard of
dynamic rendering
Server
Initial HTML + JavaScript
Browser
Crawler
Initial HTML
+ JavaScript
Static
HTML
Renderer

Prerendering
Good solution for smaller, easy to manage sites
Ensures pages are rendered correctly for crawlers
User error can cause incorrect pages to appear
Some providers struggle handling large numbers
of requests

Useful tools for diagnosing
rendering issues

Meta data

Most traditional CMS tend to have
meta data built in

But this isn’t the case with many
headless CMS’
“most traditional CMSs allow you to edit site metadata
such as titles and descriptions out of the box. Since a
headless CMS has no control over how the content is
rendered, we have to add this functionality ourselves.”
- Storyblok
https://www.storyblok.com/tp/seo-in-times-of-headless-cms-and-spa

We need to consider this at
build stage

Previewing
Pages

Page preview functions
don’t come with all headless
CMS as default

But that doesn’t mean
it’s not possible

CMS’es such as Sitecore
have a preview option

CMS that support drafts
can be set up to support
previews

Static URLs

With pages being generated through
API calls, some CMS might not use
static URLs
https://yoursitename.com/api/?category=
primary&subtype=subcategory

These need to be set at build stage.
The good news is, with a headless
CMS you have full control over URL
structures

Blocking
ﬁles
#BrightonSEO

It’s also crucial to analyse your
robots.txt when you migrate

If you’re blocking any JS ﬁles then
crawlers won’t render them, and
might not see the full content of
your pages

Web Vitals

Just because your site feels fast,
doesn’t mean it passes CWV tests

The issues don’t disappear,
they evolve

Internal
linking

Enter... ‘onclick’

With APIs being translated using JS, it’s common
to see JS elements such as “onclick” creep in
@Wrighty__

Fortunately, using a tool such as
Screaming Frog, we can spot these
onclick issues quickly.

Once identiﬁed, speak to your
development team to have these
changed to standard href links.

The wrap up
Intro > What A Headless CMS Is > Beneﬁts > Switching > Summary

1. Switching to a headless CMS needn’t be terrifying
2. The fundamentals of SEO still apply
3. Getting the build right is key
4. Ensure that you have SSR/SSG/Dynamic rendering
in place
5. A switch to headless can lead to big
performance improvements

The most important thing…
is to make friends with your development team

https://www.contentful.com/r/knowledgebase/wha
t-is-headless-cms/
https://www.storyblok.com/tp/headless-
cms-explained
https://www.sanity.io/blog/
headless-cms-explained

https://www.clicky.co.uk/BSEO2021
Get the Slides

Headless SEO: Optimising Next Gen Sites | brightonSEO 2021

More Related Content

What's hot

Similar to Headless SEO: Optimising Next Gen Sites | brightonSEO 2021

Recently uploaded

Headless SEO: Optimising Next Gen Sites | brightonSEO 2021