Headless CMS and SEO Best Practices

Disclaimer: I work at GraphCMS, and this was originally written for the GraphCMS website.

Key Takeaways

• When using a Headless CMS, being aware of SEO best practices is key, since the concept of plugins and add-ons are not prevalent.
• A Headless CMS can provide a stronger SEO readiness based on performance, content, and optimization for multiple devices.
• A Headless CMS is critical when becoming SEO-ready for omni-channel queries across desktop, mobile, wearables, smart devices, and other IoT platforms like appliances, VR/AR, etc.
• A Headless CMS can integrate and connect with any MarTech stack, ensuring content creators have full control on their content lifecycle from start to conversion.
• High-quality original content, proper keyword choice and placement, interlinked content pieces, domain authority, social sharing, and backlinks from reputable sources are still of prime importance for strong SEO.
• The 17 Best Practices for SEO with a Headless CMS are around page performance, structured data, knowledge graph, HTTPS, CDN, keyword research, SERP friendly URLs, metadata, optimized media, regular audits, quality content, focus keywords, content frequency, XML sitemaps, canonical URLs, internal linking, mobile readiness, and voice readiness.
• A Headless CMS could get better SEO results due to added flexibility and framework agnostic behavior.

Headless CMS and Search Engine Optimization

Simply put, from an editorial side, the biggest visible difference between a traditional CMS and a Headless one is the ability to better edit metadata on the fly, tweak content based on device, have better control of working with structured data, and build digital experiences that are defined by the user rather than by the theme or technology of a traditional CMS, among others. Since a traditional CMS is closely integrated with your domain and has control over how content is rendered, using a platform, like Wordpress or Drupal, allows you to easily add page titles, descriptions, and other meta tags out of the box. A Headless CMS, like GraphCMS, does not control the way your content is rendered due to its cross-platform flexibility, which is why this functionality has to be handled differently.

With a traditional CMS, users are heavily reliant on multiple combinations of plugins to deal with metadata, structured content, breadcrumbs, custom taxonomies, caching, security, and content optimization, to name a few factors, whereas a Headless CMS empowers teams to configure all these factors in the way that works for them, and have granular control on what content goes where.

That being said, the commonly accepted best practices for on-page and off-page optimization do not change. High-quality original content, proper keyword choice and placement, interlinked content pieces, domain authority, social sharing, and backlinks from reputable sources are guidelines your content team should keep following.

Previously, we're talking historically here, SERP placements were heavily dictated by keyword volume and density, resulting in poor quality web pages aimed at robots more than humans. Since then, algorithms have evolved to factor in content quality, NLP (Natural Language Processing), context, performance, cross-device UX, history, and a multitude of other ranking factors, resulting in websites finding the need to produce more human-oriented quality content rather than robot-focused gibberish.

Traditional CMS platforms, like Wordpress and Drupal, made it easier for marketers to have better oversight on their optimization efforts, primarily via "plugins" and "add-ons" that gave editors a "SEO Score" amongst other information.

However, the closer we move into the IoT era, cross-platform experiences, AI, Voice Search, and omni-channel experiences, traditional CMS start to show their limitations. The introduction of voice assistants like Google Home, Alexa, and Siri; wearables like the Apple Watch, Galaxy Watch, SNAP spectacles; and VR Devices like the Oculus have dramatically changed how we interact with the digital world around us. The emergence of these devices mean that we can no longer rely on legacy CMS to push content to the countless devices around us, leading to the emergence of the Headless CMS.

Interestingly, the principles of SEO, or a loose translation of them, also apply to the devices we interact with even though they might not be search results. The structure of a web page selling dresses and following SEO best practices could have its content qualified for an Alexa answer when asked "Alexa, where can I find a red dress". The same principles apply for news apps that want to deliver headlines and blurbs to a smartwatch in its native format.

With all these added layers of complexity pressing on the need to create quality and relevant content, the importance of following SEO best practices with a Headless CMS rise in value.

Technical SEO best practices for Headless CMS

SEO has a particularly bad rep of being overly complicated and time-consuming, especially with Google's constantly changing algorithms. While good SEO is an investment, and something that isn't going to give out measurable results as rapidly as advertising, SEO is most definitely one of the strongest foundations to growing a sustainable online presence. Before even creating content, the building blocks for SEO are based on 3 core technical factors:

• Page structure and ease-of-crawlability .
• Website performance .
• Strong foundations for content creators .

Living in the JAMStack world and using a Headless CMS does not change these key SEO priorities, although they may make it easier to get them right.

There are well-known SEO benefits of migrating from a Legacy CMS to a Headless CMS in regard to page performance, security, user experience, and delivering content to multiple platforms. Since a headless CMS will not necessarily give you the plug-and-play simplicity of installing a plugin to manage SEO factors, you need to follow a few best practices to kick-start stellar SEO results.

An in-depth insight into the technical best practices for Headless CMS and Technical SEO are covered in the GraphCMS blog, however, in summary, the key takeaways from that post are:

• Use structured data markup schema from Schema.org.
• Ensure accurate and concise meta tags.
• Regularly audit your page.
• Focus on website performance.
• Consider using a Static Site Generator (SSG).
• Optimize assets and media files.
• Use a Content Delivery Network (CDN).
• Use SSL.

Benefits of a Headless CMS for SEO, content management, and content distribution.

In another academy article, GraphCMS has covered the basics of what a Headless CMS is. The key understanding here is that a Headless CMS disconnects the frontend presentation layer (head), from the content repository as a backend (body). A Headless CMS comes without a "frontend" out of the box, meaning that a user has no restrictions on dictating how, where, when, and why content is dictated across platforms, without the limitations often imposed by themes, templates, plugins, and technology frameworks.

Since Headless CMS are "built for the IoT era," content creators are free to deliver content in any format to any device. The evolution of treating content as anything more than the text on a webpage or mobile app has led to the emergence of having an editor-ready "CMS" delivering content to any platform including smart speakers, VR devices, cars, watches, and even smart fridges. In principle, a Headless CMS is a future-proof solution, since it is capable of delivering content via APIs to platforms and channels that may not even exist yet.

In principle, this also ensures that a Headless CMS can integrate and connect with every MarTech stack out there, as there are no longer issues related to native integrations, plugins, or compatibility. A Headless CMS can allow you to easily hook up your favorite tools for marketing automation, CRM, CDP, analytics, performance marketing, A/B testing, and personalisation, either directly via API, or through a series of hooks - the combinations are quite literally endless.

To summarize, this allows developers, content creators, and editors, complete flexibility in ensuring the best structures for content creation, distribution, and SEO. Marketers don't need to wait on developers to implement changes and vice versa. So, teams are able to deliver digital experiences even faster by working in parallel and applying agile methodologies. A Headless CMS saves time since content only needs to be created once, and can be customized and distributed across platforms natively. Without the frontend layer and mandatory tech-stack of a monolithic CMS tying down the processes, performance, and capabilities of teams, embracing a Headless CMS improves performance metrics for SEO across the board.

17 SEO best practices for Headless CMS

1. Focus on page performance and loading

Although loading speed definitely favors single page applications built with React and Vue, there are a few SEO challenges that can be avoided if you take the necessary precautions.

Adding a component for your metadata is essential. However, a JavaScript-powered web application that renders dynamically on the client-side may not be crawled and indexed at all. Components that are not properly read will be assumed to be empty. Here are some measures to properly manage your metadata:

To manage the metadata of a React web app, take a look at React Helmet. A component like React Router will make the URL structure of your website more search engine friendly by creating paths between different pages.

If JavaScript is disabled on the client side, you can look into Isomorphic Javascript technology, which runs JavaScript on the server-side before sending it to the client. Alternatively, a tool like Prerender will pre-render the website and return the content in full HTML.

2. Use Schema.org structured data markup schema for ease of crawlability

Schema.org provides web developers with a set of pre-defined properties to enrich their HTML tags. The on-page markup adds structure to content and makes it more understandable to search engines. Richer search results can be delivered.

Helping search engines by providing explicit clues about the meaning of a page with structured data allows for better indexing and understanding. An example of contact information provided by Google using the structured data markup schema is as follows:

<script type="application/ld+json">
  {{
    '@context': 'https://schema.org',
    '@type': 'Organization',
    url: 'http://www.example.com',
    name: 'Unlimited Ball Bearings Corp.',
    contactPoint: {
      '@type': 'ContactPoint',
      telephone: '[phone]',
      contactType: 'Customer service',
    },
  }}
</script>

3. Make use of the Knowledge Graph

The Knowledge Graph is a knowledge base used by Google and its services to enhance its SERP with information gathered from a variety of sources - which is presented as an info-box next to results for rapid consumption of search queries.

Depending on your use case, structured data might contribute to Google's Knowledge Graph to provide your readers with better results, relevant links, and upfront information. For context, the Knowledge Graph is applicable to a variety of entities, including but not limited to local businesses, public personalities, brands, attractions, etc.

Common information that is part of the Knowledge Graph includes factors like reviews, opening hours, contact information, directions, links to sources, etc.

Information from the Knowledge Graph is used to answer direct spoken questions in Google Assistant and Google Home voice queries.

4. Use HTTPS

Secure your communication with users by upgrading to HTTPS. Users are more conscious about websites that aren't secure by default, and with Google marking HTTP websites as insecure, there's no excuse to avoid adding that layer of encryption and security.

HTTPS websites load much faster, and as we know, page speed plays an important role in ranking. More specifically, HTTPS has been a factor in Google's ranking algorithms since 2014.

5. Use a CDN

A CDN allows websites to deliver media faster than from a single or even multiple servers, since it distributes your content across servers globally. A CDN allows you to deliver content faster, have lesser loads on your servers, reduce network latency, and give you better availability for your content in a secure manner. GraphCMS gives you a CDN integrated out of the box, however you are free to connect GraphCMS to your own CDN.

6. Keyword Research

The precursor to well optimized pages are relevant content needs. No SEO campaign would exist if people didn't know what search terms visitors are using to search for products or services. Google Keyword Planner, Google Search Console, and a wide range of tools and services can help identify both short- and long-tail keywords. Building quality around highly-searched and relevant keywords can dramatically improve reader relevance and reduce bounce rates.

7. Use concise, SERP friendly URLs

Ensure that all pages follow a friendly URL structure.

A clear SERP friendly URL reads similar to example.com/about-this-page.

A complicated and unclear URL reads similar to example.com/products/page-id-1231/2019-09-01

SEO friendly URLs are designed to match what people are searching for with better relevance and transparency of where their click leads to. URLs that are keyword-rich and short tend to perform better than longer ones.

8. Optimize metadata

Meta tags are the most essential descriptors of a page's content. Not visible to the user, they help search engines determine what your content is about. The four key meta tags with their respective recommended maximum text lengths are:

• Title tag (70 characters)
• Meta Description - short description of the content (160 characters)
• Meta Keywords - what keywords are relevant for a page (5-10 keywords)
• Meta Robots - what should search engines do with a page

Since a developer freely designs the content architecture of a website with an un-opinionated headless CMS like GraphCMS, the metatags should be added as String fields to all relevant content models. Content authors can then comfortably add the relevant metadata.

9. Optimize media and images for SEO

Optimize image size (and ensure to add alt text) in your headless CMS. In the case of GraphCMS, you can pre-define the desired maximum size of your image assets in your GraphQL query. Even if an inexperienced content creator uploads a large image to the CMS, your precautions will take care of fast loading times.

Make use of Lazy Loading of images and video. The most essential content is downloaded first and only when required do media resources get fetched. Page size goes down, page load time goes up.

Use the "blur-up" technique or a solid background color to show a preview of the image while it loads. More about the approach and how it is implemented at GraphCMS can be found here.

Use images in the SVG or WebP format where possible. They are vectorized for the best quality and optimized in size for quick loading.

10. Regularly audit your website

Lighthouse is an open-source tool for auditing webpages. It runs a series of tests on your webpage and generates a report with a lighthouse score and a series of recommendations. The audit categories include performance, accessibility, progressive web apps etc.

More recently, a surge in Static Site Generators, like Gatsby and Hugo, have also made a compelling argument for going Headless when starting new projects. When testing Gatsby's starter out of the box, performance scores are very high compared to starting with basic themes from most legacy CMS, giving new projects a head-start on page performance and optimization.

11. Create content with quality for humans, not quantity for robots

Consider this to be the number one rule when it comes to creating content with your headless CMS. High-quality content that is engaging, informative, and relevant is a strong SEO factor as it reduces bounce rates, increases time on page, could improve UX, and results in high relevance scores.

Always aim for a conversational and friendly tone with all your content, and match it to your brand persona.

12. Describe your content with focus keywords early on, and include focus keywords in the URL.

Your URL should encourage the inclusion of the target keyword for your page, with the content itself having clearly defined tags like H1, H2, etc. When you include a keyword in your URL, the keyword tells search engines that "This page is about this keyword," and having meta tags enforce that content correlation strengthen your page's relevance to the search.

This lets Search Engines know exactly what your content is about, and how relevant it would be for a user searching for those queries.

Similarly, using the focus keywords higher up in the article increase their relevance to search results. If your page is talking about pizza in New York, having a URL like example.com/new-york-pizza combined with talking about "New York pizza" in the first few sentences would send strong signals to SERPs.

13. Create content regularly

While the quality of content that you produce is important, and quality trumps pure quantity, we can't deny the perception of larger websites to smaller ones. SERPs tend to prefer larger websites since they are more content heavy, indicating a more mature and established brand. Similarly, the UX wouldn't be exceptional when looking for information only to find a website that has a few pages. To make your site larger, you need to get into the habit of producing high-quality content on a consistent basis.

14. XML Sitemaps

To ensure search engines index all of your content, you need to create, maintain, and update an XML sitemap, and accordingly submit them to Google Search Console, Bing Webmaster, and similar. There are many tools that are available that can help you with this when using a Headless CMS like GraphCMS. Either you can generate one yourself based on your page structures, or use tools like Gatsby's Sitemap Plugin.

15. Use canonical URLs and practice internal linking

SERPs tend to lose their preference for websites that create too much duplicate content, even when necessary (like in the case of E-Commerce websites with multiple variations of the same product). But it is less about the main body of the content, it is more to do with the tags and HTML duplication that appears in a repetitive manner. Implementing canonical URLs for duplicated content with minor differences will notify search engines which duplicated content should take precedence.

Similarly, internal linking adds authority to pages you control and lets search engines understand what content is relevant to the other. Strong internal linking and high quality content further enrich site extensions on Google, allowing readers to get relevant and related results for their queries, increasing their likelihood of clicking onwards.

16. Be mobile ready

With over 50% of all searches on mobile devices, businesses no longer have an excuse for having their content purely optimized for desktop traffic. When optimizing mobile experiences, avoid using Flash since it may not be available on the user's phone. Use HTML5 instead.

Additionally, don't block CSS, JavaScript, or images. In the past, most mobile devices couldn't support all the elements, so developers either blocked one or all three. But nowadays, this is no longer a worry. The Googlebot now wants to see all elements of your mobile site to determine whether you have a responsive site or a different mobile offering. In fact, Google is aggressively indexing websites "mobile first", and placing greater importance on mobile-friendliness for websites that are indexed.

17. Be voice ready

In 2016, 20% of all queries on Google were voice based. By 2020, it's predicted that the number will rise to almost 50%. Voice readiness and optimization is no longer a passing fad, and businesses are struggling to grasp "voice readiness." Although the combination for a Headless CMS and Voice Search deserves its own piece, in summary, to rise to "position 0," a few factors play in parallel.

• Use structured data .
• Claim your business' information across reputation platforms to contribute to the Knowledge Graph .
• Be mobile friendly .
• Create content answering questions rather than discussing topics .