Headless CMS & SEO [2023]

Summarised a few articles about SEO and headless CMS’s below:

• Headless SEO:
  • Refers to SEO processes when using a headless CMS.
  • Requires content modelling for SEO, intentional technical setup, and an omnichannel approach.
  • Traditional SEO tools and techniques may not automatically apply to a headless CMS.
  • Core SEO principles remain the same: provide the best content to answer user queries.
    

• Three Main Aspects of Headless SEO:
  • Content Models for SEO:
    • Headless CMS decouples content from its presentation.
    • Content is treated as data, stored centrally, and can be reused.
    • Content modeling defines content types, attributes, and relationships.
      

• Limited Plugins and Add-ons:
  • Can’t rely on traditional SEO plugins like Yoast.
  • SEOs have full control over technical setup.
  • Explicit technical requests to the development team are necessary.
    
• Omnichannel SEO:
  • SEO now goes beyond just website optimization.
  • Includes optimizing for search engines, social media, email, and other channels.
  • SEOs must ensure consistent experiences across all channels.
    
• Is Headless Better for SEO?:
  • Trade-offs exist with headless CMS.
  • Opportunities for content distribution and repurposing are larger.
  • Benefits include decoupling content from presentation and managing content in multiple languages.
  • Headless CMS can be combined with static site generators for modern web architecture.
    
• Best Practices for Headless CMS SEO:
  • Meta Tags:
    • Request essential meta tags like title, meta description, meta robots, viewport, content type, Open Graph tags, and language.
    • Include validation rules for these fields.
      
  • URL Slug:
    • Ensure content editors can modify the URL slug.
    • Keep URLs user-friendly and keyword-rich.
      
  • Canonical URLs:
    • Define canonical URLs in the page’s head or HTTP header.
    • Use absolute URLs and define only one canonical URL per page.
    • Consider URL types and evaluate with the technical team for additional canonicalization rules.
      
  • Define your XML sitemap setup:
    • Sitemaps should be dynamic and updated regularly.
    • Option to clear sitemap cache and regenerate on demand is beneficial.
    • Include only indexable, canonical URLs with a 200 HTTP response code in the sitemap.
    • Sitemaps typically reside in the website’s root directory but can be elsewhere if indicated in the robots.txt file.
    • Sitemaps can be divided based on content types (e.g., posts, pages, authors).
    • Google often ignores <priority> and <changefreq> tags in sitemaps.
    • Sitemaps can submit non-web page content like videos, images, or news articles.
      
    • Request a field for schema markup:
      • Schema markup helps search engines understand content better.
      • Can be added per URL or at a content component level.
      • Enables eligibility for various rich results (e.g., breadcrumbs, video results, FAQs).
        
  • Ensure logical heading hierarchy:
    • Headings in a headless CMS can be tricky due to content being decoupled from layout.
    • Heading hierarchy should reflect content organization.
    • Proper hierarchy is essential for web accessibility, aiding visually impaired users.
      
    • Summary:
      • Headless architecture empowers businesses to control their digital experience.
      • Initial technical setup for headless SEO can be challenging but offers greater control and integration.
      • Headless SEO provides vast possibilities for content-led experiences in ecommerce and content management for large international sites.
      • The true potential of headless SEO lies in the innovative ways digital teams will harness it in the future.

• What is a headless CMS?
  • A CMS that separates content creation and management from its presentation.
  • Offers flexibility in delivering content to various devices and platforms.
  • Results in faster loading times and personalized experiences.
    
• How headless CMS works in practice:
  • Removes the need for content changes to go through the development team.
  • Content marketers can publish and edit content using familiar CMS platforms.
  • Content is sent to the main website via API integration.
    
• Benefits of headless CMS for organizations and SEO:
  • Scalability: Allows rapid content production across various platforms.
  • Improved Relationships: Separation fosters better collaboration between developers and SEOs.

• SEO-friendly Features: Includes structured data support and customizable URLs.
• Enhanced Security: Decouples presentation from backend, shielding sensitive systems.
• Faster Load Speeds: Reduces complexity associated with traditional CMS architectures.
  
• Google’s stance on headless CMS:
  • Google is neutral about the CMS choice.
  • John Mueller, Google’s Senior Search Analyst, stated Google doesn’t look for specific CMS signals in its algorithm.
  • Headless CMS neither positively nor negatively impacts SEO directly.
    
• Best practices for SEO with headless CMS:
  • Ensure schema, metadata, and URL structure are consistent.
  • Validate content for mobile-friendliness.
  • Ensure content is included in fetch and render tests.
  • Update XML sitemap with new content.
    
• Conclusion:
  • Adopting a headless CMS offers numerous benefits, including improved SEO performance.
  • Understanding its workings allows organizations to leverage its advantages for content production, collaboration, security, and speed.

• Differences between headless SEO and traditional SEO:
  • Aim: Both aim to optimize content for search intent and high SERP ranking.
  • Omnichannel content delivery:
    • Traditional SEO has content delivery restrictions.
    • Headless SEO supports omnichannel content delivery for personalized experiences across devices.
      
  • Presentation layer freedom:
    • Traditional solutions limit innovative front-end experiences.
    • Headless SEO offers more creative freedom.
      
  • Platform dependence:
    • Traditional SEO locks users into a specific CMS platform.
    • Headless SEO offers freedom to choose tools and technologies.
      
  • Loading speed:
    • Traditional SEO can result in slow-loading websites.
    • Headless SEO optimizes loading speed and overall performance.
      
• Pros and Cons of headless SEO:
  • Pros:
    • Enhances performance: Optimizes front-end code for speed and user experience.
    • Effective at Scale: Allows independent work of developers and content teams, beneficial for large websites.
  • Cons:
    • Technical skills required: Need for developers to build the front end and manage data fetching.
    • Requires knowledge of technical SEO: Users must handle aspects like website crawlability, speed, mobile responsiveness, redirects, and more, which were typically managed by traditional CMSs.
      

Pros and Cons of Traditional SEO

• Pros:
  • No need for technical expertise due to traditional CMS.
  • Reduces decision-making time as tools and integrations are predefined.
• Cons:
  • Slow website speeds due to simultaneous loading of frontend, backend, and content.
  • Limited omnichannel content delivery and digital experiences.
    

Comparison: Headless SEO vs. Traditional SEO

• Headless SEO:
  • Supports omnichannel delivery.
  • Offers freedom in tool and technology choice.
  • Faster page load times.
• Traditional SEO:
  • Limited content delivery channels.
  • Restricted to platform’s tools and integrations.
  • Slower page load times.
    

SEO Best Practices for Developers

• Use semantic HTML for better content structure.
• Ensure websites are mobile-friendly.
• Optimize URLs for search with clear and relevant slugs.
• Implement schema markup for enhanced search results.
• Use server-side rendering for better page indexing. (look into “pre-rendering JS”
• Include essential SEO meta tags.
• Create XML sitemaps for improved website crawlability.
• Optimize images for faster loading and better user experience.
  

Conclusion

• Components like link building and pillar pages remain consistent regardless of CMS type.
• Headless SEO demands technical skills and in-depth SEO knowledge.
• Combining on-page, off-page, and technical SEO with the right tools ensures optimal search engine rankings.

Technical SEO And Headless CMS

Tech Audit case study from Bizwrites.com

Background

• Client used a headless CMS without considering marketing or SEO.
• Headless CMS without proper planning can lead to preventable problems.
• Traditional CMS (e.g., WordPress) covers basic SEO with plugins like Yoast.
• Headless CMS requires developers to add specific SEO functionalities.
• Client’s team lacked technical SEO knowledge during site development.

Approach

• Client’s main goal: reach their ideal customer.
• Instead of focusing on content, a technical SEO audit was recommended.
• Preliminary look revealed numerous technical issues.
• Decision made to prioritize technical audit over content.

Technical Issues Identified and Dealt With

1. Irrelevant pages being crawled:
   • Over 4000 irrelevant pages crawled by Google.
   • Adjusted robots.txt and eliminated source of dynamically generated duplicate pages.
   • Result: Significant reduction in crawled but not indexed pages.
     
2. Duplicate content issues:
   • No meta tag control: Duplicated page titles and meta descriptions.
     • Solution: Added a plugin for easy editing of titles and descriptions.
       
   • Incorrectly implemented redirects: Soft 404s caused by meta refresh redirects.
     • Solution: Use 301 redirects instead of meta refresh redirects.
       
   • Missing redirects: No consistent URL format, leading to multiple versions of the same page.
     • Solution: Redirected non-trailing-slash, non-WWW URL formats to the correct format.
     • Result: Eliminated duplicate content issues and improved user experience.

Results

• Collaborated with client’s dev team for implementation.
• Changes made within two weeks in December.
• Significant improvements observed:
  • Avg. weekly clicks increased by 92.5%.
  • Avg. weekly impressions increased by 2.3X.
  • Total keywords the domain ranked for increased by 4.2X.
• SEMRush’s crawl comparison showed positive technical SEO metrics.
• Emphasized that while growth is impressive, it will eventually level out.

Key Points about SEO in the JAMStack World with a Headless CMS

• Living in the JAMStack world doesn’t alter primary SEO priorities.
• Migrating from a Legacy CMS to a Headless CMS offers SEO benefits related to page performance, security, user experience, and multi-platform content delivery.
  
• Unlike traditional CMSs, a headless CMS doesn’t offer plug-and-play simplicity for SEO factors.
• The main difference between traditional and headless CMS is the ability to edit metadata instantly.
• Traditional CMSs, like WordPress or Drupal, allow easy addition of page titles, descriptions, and other meta tags.
  
• Headless CMSs, such as Hygraph, require different handling due to their cross-platform flexibility.
• Standard best practices for on-page and off-page optimization remain unchanged: quality content, keyword optimization, interlinked content, domain authority, social sharing, and reputable backlinks.
• SEO starts with the build and technical implementations, setting the foundation for content teams.
  

Technical SEO Best Practices for Headless CMS

• Ease-of-crawlability and Page Structure:
  • Use Schema.org structured data markup to enrich HTML tags, making content more understandable to search engines.
  • Structured data aids in better indexing and understanding by search engine bots.
  • Example provided: JSON-LD structured data snippet by Google for contact information.
  • Structured data can help content appear as featured snippets in search results.
    
• Meta Tags:
  • Essential for describing a page’s content to search engines.
  • Four key meta tags: Title tag, Meta Description, Meta Keywords, and Meta Robots. (not sure about meta keywords – think they went out with the arc)
  • In a headless CMS like Hygraph, meta tags should be added as String fields to content models, allowing content authors to add relevant metadata.
  • Proper use of a headless CMS with these practices can enhance SEO results.

• React or Vue:
  • While they favor fast loading, there are SEO challenges.
  • Essential to add a component for metadata.
  • React Helmet can manage metadata in React apps.
  • React Router can enhance URL structure.
  • Use Isomorphic Javascript or Prerender for better SEO with client-side JavaScript.
    
• Static Site Generators (SSGs):
  • Hugo, Jekyll, and Gatsby handle major SEO challenges.
  • They offer fast loading and manage metadata effectively.
  • Gatsby has plugins like React Helmet and Sitemap.
    
• Content Delivery Network (CDN):
  • Distributes content across global servers.
  • Enhances website performance and user experience.
    
• Image Optimization:
  • Optimize image size in headless CMS.
  • Use Lazy Loading for images and videos.
  • Prefer SVG or WebP formats for faster loading.
  • Add Open Graph metatags for images.
    
• HTTPS:
  • Upgrade to HTTPS for security and user trust.
  • HTTPS websites load faster and rank better on Google.

Setting Foundations for Content Creators

• URL Structure:
  • Use SEO-friendly URLs like example.com/page-title-with-keywords.
  • Include target keywords in URLs.
  • Ensure content has clear tags like H1, H2, etc.
    
• Content Enrichment:
  • Optimize the use of images and media for better user experience and SEO.
  • Ensure assets are resized, compressed, and have relevant file names and alt-attributes.
  • Make pages easily shareable with OpenGraph and Twitter Card meta information.
  • Shareable pages improve backlinks, referral traffic, and brand awareness.

Final Takeaway

• Proper technical foundation is crucial before content creation for better SEO.
• Empower content teams with the right tools and practices.
• Continuous engagement and regular audits are essential for maintaining and improving SEO.
• While challenges exist with headless CMS, with the right practices, SEO improvement is achievable.

References:

Search Engine Land

https://opensenselabs.com/blog/articles/omnichannel-content-delivery-guide

Bizwrites.com

Hygraph.com

In case you’re wondering what “omnichannel” means:

What is an omnichannel content approach? An omnichannel content approach is simply all about bringing together all content channels in order to make them work parallelly to improve and customize the user’s experience.