Table of contents
Fundamentally, the headless CMS SEO still follows the same rules as a traditional CMS. So crawlability, speed, and content quality remain the goals when you want to get into it. But although we have similar goals to attain, the means to achieve these goals are different in a headless CMS.
See more:
Is headless CMS good for SEO?
Yes, a headless CMS can be a game-changer for SEO when done right. It gives you more flexibility, control, and room to grow. But, there’s a catch – you’ll need some solid technical know-how and a hands-on approach, especially at the start. The perks? Faster site speed, complete control over URLs, and the freedom to shape your site exactly how you want. Plus, you can fine-tune the technical side way more than with a regular CMS.
What are the key advantages and disadvantages of headless SEO?
Headless SEO: The Good, the Bad, and the Technical
Headless SEO can open up a lot of possibilities – more flexibility, scalability, and the power to manage content across different channels. But let’s be real – it also comes with its fair share of hurdles, especially when you’re just getting started.
Why Headless SEO Rocks
- Flexibility: A headless CMS lets you decide exactly how your content shows up. Want to use the latest front-end framework? Go for it. Need a fully customized UI to handle SEO your way? No problem. You get to control the experience down to the tiniest detail.
- Scalability: Need to spin up a bunch of pages quickly but still keep them unique? Headless makes it easy to reuse templates while tweaking content where needed. It’s great for businesses with lots of locations or products. Plus, it plays nice with MarTech tools, so scaling up feels smoother.
- Omnichannel Content Management: Manage your content once, share it everywhere – from websites to mobile apps, even digital signs or smart devices. No more updating the same thing ten times across different platforms. Everything stays consistent, saving you time (and sanity).
- Speed Boost: Headless setups often use static site generators (SSGs), which make your pages load lightning fast. Faster sites = happier users and better search rankings. And since the front end is separate from the back, you can really fine-tune performance without limitations.
- Full Content Control: With a headless CMS for SEO, you’re in charge. Metadata, structured data, and SEO elements are all yours to manage. You can shape the content flow from draft to conversion however you like.
- Future-Proofing: The digital world changes fast, but headless CMSs keep you ahead of the game. Content is delivered via APIs, so if a new platform or channel pops up, you’re ready to roll.
The Not-So-Great Parts of Headless SEO
- Complexity: Without SEO plugins, you’ll need developers to bake SEO features right into the system. It’s a little more hands-on compared to traditional CMS platforms.
- Tricky Setup: A headless CMS means building from scratch. No out-of-the-box SEO tools like you’d get with WordPress or similar platforms.
- Developer Dependency:Headless SEO leans heavily on developers. If you’re short on dev resources, this could slow things down. Content teams also need to clearly outline what they need from an SEO perspective.
- Technical Know-How: Headless SEO isn’t just plug-and-play. You’ll need to get comfortable with content modeling, structured data, and how JavaScript plays into search rankings.
- JavaScript Rendering Issues: Using frameworks like React or Vue? Sometimes search engines have trouble crawling and indexing JavaScript-heavy pages. You’ll need workarounds like server-side rendering (SSR) to make sure your content shows up properly in search results.
- Meta Tag Requests: A headless CMS won’t automatically add meta tags. You’ll need to specifically ask for them and make sure editors can adjust things like URL slugs manually.
- Sitemap Hassles: Forget automatic sitemaps – you’ll need to team up with developers to build and update one regularly.
- Content Modeling Pitfalls: Mess up the initial content model, and fixing it later can be a pain. Careful planning upfront saves a lot of headaches down the line.
How SEO is different in a headless CMS
In a headless CMS, you have to handle most of the SEO work manually because there are usually no plugins or add-ons to simplify the process. This puts more responsibility on you and requires you to learn more along the way, rather than relying on third-party tools. Additionally, since most headless CMS platforms and frontend frameworks currently use JavaScript, managing SEO can become tricky as crawlers often struggle to render JavaScript.
Even though Googlebot can render JavaScript, we don’t want to rely on that.
Martin Splitt, on implementing dynamic rendering.
Recommended reading: Headless CMS vs Traditional CMS
Things to look out for in headless CMS SEO
Alt texts
Alt texts help make your image content readable by Google bots. Similar to custom metadata, most headless CMSs don’t include alt text for images by default, so your CMS provider will need to implement it.
For a headless CMS that doesn’t have a built-in Alt Text feature, we can manually add the alt text per image without much effort, as you only need to add an <alt> attribute to your images.
<img src="image.png" alt="our alt text">
Metadata
Meta tags are page descriptors not visible to users that help search engines understand content, using keywords, page descriptions, and instructions; key tags are: Title tag (70 chars), Meta Description (160 chars), Meta Keywords (5-10 keywords), and Meta Robots.
Unlike a traditional CMS, a headless CMS typically doesn’t let you edit metadata tags on the fly. You’ll need to manually add titles, descriptions, and other meta tags directly into your content models. This adds another layer of work, requiring careful setup to ensure every page is properly optimized from the start.
For example, for a headless website that has a React-based frontend but without support for custom metadata, we use react-helmet to conveniently add metadata into our <head>.
For a headless CMS that supports custom metadata, typically you’ll need to add fields containing custom metadata tags into your content model or to create a custom SEO model in which contains all the necessary meta tags. The created SEO model should be configured to have relations to all the pages that need it.
Structured data snippets
Structured data snippets help Google Search better understand your page and all the content within it. By providing valid structured data snippets, your site is eligible for rich results.
To create a structured data snippet, we use a JSON-LD array which is stored in the <head> of your site. And unlike the traditional CMS where the whole process is automated with a plugin (e.g., Yoast SEO), in headless CMS SEO, you’ll have to:
- Choose the correct structured data types for your pages
- Add custom JavaScript code which helps generate either all of the needed structured data or add more information to the server-side rendered structured data
fetch('https://api.example.com/recipes/123')
.then(response => response.text())
.then(structuredDataText => {
const script = document.createElement('script');
script.setAttribute('type', 'application/ld+json');
script.textContent = structuredDataText;
document.head.appendChild(script);
});- Test your implementation using Rich Results Test
Pageview tracking issues
Setting up Google Analytics on a headless website can feel a bit tricky at first. If you’ve tried it, you might have noticed it only tracks the first pageview. That’s because the frontend of a headless CMS works as a single-page application. Essentially, the page loads just once, so you only get one pageview event per session. But don’t worry! The fix is simpler than it sounds. By using the History API, you can enable virtual pageviews, which you can then track using the History Change trigger in Google Tag Manager. Problem solved!
History change trigger tracks for changes in URL fragments or history state objects. When a change occurs between these two, we have the following variables:
- History old URL fragment: What the URL fragment used to be.
- History new URL fragment: What the URL fragment is now.
- History old state: The old history state object, controlled by the site’s calls to pushState.
- History new state: The new history state object, controlled by the site’s calls to pushState.
To create a history change trigger, simply go to Google Tag Manager and:
- Choose Triggers > New
- Choose Trigger Configuration > History Change
After this, we’ll need to create a new Google Analytics Configuration tag to fire on the History Change trigger we’ve just created, like so:
And that’s it. You should now be able to track pageviews in your headless website.
Headless SEO audit issues
Since your headless website is mostly made of client-side JavaScript, SEO auditing it might pose to be a problem since the crawlers used in most free SEO auditing tools don’t come with the ability to render JavaScript.
This issue can, expectedly, be solved by paying more, as you can upgrade to the next premium plan to enable support for this feature. You should also note that JavaScript rendering is not enabled by default in most SEO audit tools, which means that you’ll have to manually enable it to crawl your headless website.
Code splitting
Since a typical headless CMS is heavily JavaScript-based, the amount of JavaScript code used in your website—especially when you use a large number of third-party libraries—can get to the point of overwhelming.
Page speed plays a big role in SEO, so leaving our JavaScript code as is just isn’t an option. That’s where code splitting comes in to save the day. By splitting your JS code into smaller, more manageable bundles, you can load them dynamically as needed, keeping things fast and efficient. Tools like Webpack and Browserify (using factor-bundle) make it easy to take advantage of this handy feature.
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
</Switch>
</Suspense>
</Router>
);Dynamic rendering
As the majority of headless websites are JavaScript in nature, they face the same major SEO challenge that is JavaScript rendering.
[…], it’s difficult to process JavaScript and not all search engine crawlers are able to process it successfully or immediately.
Implementing Dynamic Rendering, Google
Crawlers can’t render JavaScript effectively, hence why Google themselves suggests Dynamic Rendering as a workaround solution in the meantime. Introduced in Google I/O ‘18, dynamic rendering is an ideal solution for JavaScript-based websites that want an easy way to solve the SEO challenges while still retaining all the benefits that come with client-side rendering. With this new rendering method, your web server sends normal, client-side-rendered content to the users, while search engine crawlers get fully server-rendered, static HTML content.
What all this means is that you get the best of both worlds with dynamic rendering—the ease of crawlability of server-side rendering and the fast subsequent rendering of client-side rendering.
To implement dynamic rendering, we’re going to have to rely on dynamic renderers such as Rendertron or Puppeteer to shorten the whole process. These renders will convert your site’s content into static HTML understandable by the crawlers.
After finished installing and configuring your dynamic renderer, follow the additional steps in Google’s official doc to configure the behaviors of user agents.
FAQs
What are the primary differences between headless SEO and traditional SEO?
Traditional SEO relies on built-in CMS features and plugins, while headless SEO requires developers to implement SEO best practices and controls from the ground up since it decouples the front end from the back end.
What is the purpose of Schema.org structured data markup, and why is it important for headless SEO?
Schema.org provides predefined properties to enrich HTML tags, making content more understandable to search engines, leading to richer search results and featured snippets, therefore making content easily indexable and readable by search bots.
What is”content modeling” in the context of headless CMS SEO?
Content modeling involves defining content types, their attributes, and relationships between them, shifting from a page-centric approach to a data-centric one for better content reuse and structured delivery across devices and channels.
What is omnichannel SEO, and why is it important in the context of a headless CMS?
Omnichannel SEO optimizes content for search engines, social media, and other channels like voice search, and the headless structure ensures content can easily flow across all of those channels without being confined by a traditional website design.
Conclusion
Headless CMS SEO is not the most straightforward way, and it will require a bit of work from your developers to get everything right. But once you get the hang of it, a headless CMS can be just as effective as a traditional CMS when it comes to SEO. And what’s more is that you get much more freedom and flexibility to create content the way you want.
