Frequently Asked Questions

SEO & Technical Implementation

How does Hygraph handle SEO within a Headless CMS?

Hygraph manages SEO by implementing an operational SEO model within its platform. Required fields such as meta-title, description, focus keywords, OG images, and other SEO attributes are defined in the data model, ensuring every page and post has the correct SEO metadata. This approach allows content creators to easily create, edit, and modify SEO attributes, similar to the experience of using plugins in legacy CMS platforms. For more details, see How we handle SEO at Hygraph.

What SEO fields and attributes can be managed in Hygraph?

Hygraph's SEO model includes fields for meta-title, description, keywords, priority, frequency, noindex, image, and relations to pages/posts. This enables granular control over SEO attributes for each piece of content, including the ability to set crawling frequency, sitemap priority, and indexing preferences. For more details, visit this blog post.

How does Hygraph optimize images for SEO?

Hygraph supports advanced image optimization for SEO. Before uploading, images are pre-optimized and named descriptively. The Assets API allows for transformations such as resizing, format conversion (e.g., PNG to WebP), and compression. Custom fields like caption, resize percentage, and localized alt text can be added to the asset model for further SEO enhancement. Learn more in this post.

How does Hygraph implement SEO as a model?

Hygraph runs operational SEO as a model, setting required fields in an SEO model that can relate to various pages, posts, and resources. This ensures correct SEO attributes are enforced by defining metadata as a requirement. For more information, see How we handle SEO at Hygraph.

How does Hygraph handle technical SEO requirements like sitemaps and robots.txt?

Technical SEO requirements such as sitemaps and robots.txt are managed within the codebase, typically using Gatsby plugins like the Gatsby Sitemap Plugin. Structured data, redirects, and robots.txt are handled programmatically to ensure all content is indexed and discoverable as intended. For more details, see this blog post.

Where can I find more information about how SEO is handled within Hygraph?

You can find detailed information about SEO management in Hygraph in this blog post and our SEO guide.

Features & Capabilities

What are the key features of Hygraph?

Hygraph offers a GraphQL-native architecture, content federation, scalability, advanced SEO support, and a wide range of integrations (including Netlify, Vercel, Shopify, AWS S3, Cloudinary, and more). It provides an intuitive interface for both technical and non-technical users, robust security and compliance, and streamlined workflows for faster speed-to-market. For a full list of features, visit Hygraph Features.

Does Hygraph support integrations with other platforms?

Yes, Hygraph supports integrations with platforms such as Netlify, Vercel, BigCommerce, Shopify, AWS S3, Cloudinary, Bynder, Mux, Scaleflex Filerobot, Lokalise, Crowdin, EasyTranslate, Smartling, Ninetailed, AltText.ai, Adminix, and Plasmic. For more details, visit Hygraph Integrations.

Does Hygraph provide an API for content management?

Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. Learn more at Hygraph API Reference.

Pricing & Plans

What is Hygraph's pricing model?

Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For more details, visit the pricing page.

Security & Compliance

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. It offers enterprise-grade security features such as SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. For more details, visit Hygraph Security Features.

Use Cases & Benefits

Who can benefit from using Hygraph?

Hygraph is ideal for developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. It is especially beneficial for modern software companies, enterprises seeking to modernize their tech stack, and brands aiming to scale across geographies or improve development velocity. For more details, see About Us.

What business impact can customers expect from using Hygraph?

Customers can expect time-saving through streamlined workflows, ease of use with an intuitive interface, faster speed-to-market, and enhanced customer experience through consistent and scalable content delivery. These benefits help businesses modernize their tech stack and achieve operational efficiency. For more details, see Hygraph Product Page.

Customer Success & Case Studies

Can you share specific case studies or success stories of customers using Hygraph?

Yes, Hygraph has several notable success stories. For example, Komax achieved a 3X faster time to market, Autoweb saw a 20% increase in website monetization, and Samsung improved customer engagement with a scalable platform. Dr. Oetker enhanced their digital experience using MACH architecture. Explore more success stories at Hygraph Case Studies.

Which industries are represented in Hygraph's case studies?

Hygraph's case studies cover industries such as food and beverage, consumer electronics, automotive, healthcare, travel and hospitality, media and publishing, eCommerce, SaaS, marketplace, education technology, and wellness and fitness. For more details, visit Hygraph Case Studies.

Support & Implementation

How easy is it to get started with Hygraph?

Hygraph is designed for easy onboarding, even for non-technical users. Customers can sign up for a free account and use resources like documentation, video tutorials, and onboarding guides. For example, Top Villas launched a new project in just 2 months. Learn more at Hygraph Documentation.

What customer support and training does Hygraph offer?

Hygraph provides 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to documentation, video tutorials, webinars, and a community Slack channel. For more details, visit Hygraph Contact Page.

Performance & Metrics

How does Hygraph optimize content delivery performance?

Hygraph emphasizes optimized content delivery performance, which improves user experience, engagement, and search engine rankings. Rapid content distribution and responsiveness help reduce bounce rates and increase conversions. For more details, visit this page.

Documentation & Resources

Where can I find technical documentation for Hygraph?

Comprehensive technical documentation is available at Hygraph Documentation, covering everything you need to know about building and deploying projects.

Velocity at Scale: Join the Launch of Hygraph’s Latest AI Innovations

How we Handle SEO at Hygraph

How to handle SEO with a Headless CMS is an extremely common question we encounter. To simplify this, here’s how we handle SEO at Hygraph.
Ronak Ganatra

Written by Ronak 

Jan 19, 2021
How we Handle SEO at Hygraph

How to handle SEO with a Headless CMS is an extremely common question we encounter. To simplify this, here’s how we handle SEO for our own website using our CMS.

To clarify, this post covers the operational aspects of implementing SEO in your projects. For a general understanding of what to consider when setting up a new project, refer to our guides on Headless CMS and SEO Best Practices and Headless CMS and SEO: Technical Best Practices.

#SEO beyond website builders

Image of Yoast within WordPress

When setting out to build websites using a combination of well-known solutions like WordPress + Yoast, getting up to speed with operationally managing SEO is a very familiar concept. 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 the final frontends or how the content is rendered, this functionality has to be added in, ideally, once the technical foundations are set.

Why not just continue using a legacy website builder?

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 - all of which directly and indirectly impact your SEO. Since a headless CMS will not necessarily give you the plug-and-play simplicity of installing a plugin to manage SEO, you need to follow a few best practices and adjust your implementation to go beyond what monolithic CMS would offer you.

#How we handle SEO

We currently maintain all the content for our website from within Hygraph itself. We build our site using a Static Site Generator (Gatsby), and deploy new iterations to Vercel using webhooks.

All the content related to SEO is handled within Hygraph, along with image optimizations. The nuances for structured data, redirects, our sitemap, and robots.txt are handled within the codebase, usually via Gatsby plugins.

SEO as a model

Since the concept of simple plug-and-play plugins, like Yoast, does not exist in the Headless world, we opted to run our operational SEO as a model within Hygraph. All the required fields are set as an SEO model, which can have relations to a variety of pages, posts, and resources. In practice, this is what our SEO model currently looks like.

SEO content model in Hygraph

Using this approach, we enforce the correct SEO attributes in place by defining the metadata as a requirement in our data model when content creators create or edit new data.

The meta-title, description, and focus keywords are taken as text strings to reflect accordingly when the website is crawled and indexed.

Our OG Images are generated programmatically using Vercel's OG Image as a Service, although having the option to manually override each asset as a fallback option for greater control is made possible by including an asset field in the model. OG and meta info is populated to each page with each build, ensuring that all content has SEO attributes as required, and are up to date whenever the website is rebuilt.

hygraph meta tags

Pages and posts can be connected to this SEO model as required, ensuring that every piece of content has its corresponding SEO attributes attached. We’ve kept the relation optional, so if there are no tweaks needed, then the website inherits default SEO values from the page or post itself.

For certain pages (especially resources behind a lead wall), having a Boolean field for a _noindex tag (or a _nofollow, or any other SEO attributes as required) allows our content editors to exercise greater control over the content they're publishing. For even further granularity, the options are endless - we opted to include the ideal crawling frequency and sitemap priority as well.

Taking this approach at Hygraph allows us to make sure all SEO attributes for content are easy to create, edit, and modify on the fly, and might resemble the familiarity of adding SEO attributes via plugins in the majority of legacy CMS platforms.

SEO Fields

Now that we’ve seen how the concept of SEO as a model works, let’s get into the details of how we use them at Hygraph.

Headless CMS SEO - meta title

Title: A Single line text string field to establish the page/post meta title.

Headless CMS SEO - meta description

Description: A Multi line text string field to establish the page/post meta description.

Headless CMS SEO - focus keywords

Keywords: A Single line text string field with multiple options to define the focus keywords.

Headless CMS SEO - priority

Priority: A Float field with values ranging from 0.0 to 1.0 to set our preferred priority per page

Headless CMS SEO - changefreq

Frequency: A Dropdown enumeration field to indicate how often we change this page for an ideal recrawl.

Headless CMS SEO - noindex

noindex: A Boolean toggle to define whether or not this page should be indexed within SERPs.

Headless CMS SEO - meta image

Image: An Asset field to upload any corresponding image.

Headless CMS SEO - content relations

Relations: A Reference field to several pages and posts, to establish a one-to-one content relationship between an SEO model and its corresponding page/post.

SEO for Assets

While we’ll roll out a new post specifically catered towards Image SEO with a Headless CMS, here’s a quick peek into how we handle our assets at Hygraph.

Prior to any images being uploaded to the CMS, we ensure that our files have descriptive names and are pre-optimized. While it's always recommended to compress large files with services like Caesium or TinyPNG before uploading them - Hygraph’s Assets API allows for granular transformations to resize, modify, and optimize images when being queried.

For example, this very post renders its featured image with resize=w:960,fit:crop/quality=value:75/output=format:webp/compress/ to have the final output transformed from PNG to WebP, and optimized for greater performance.

More operationally, the Hygraph UI allows for greater flexibility in handling images and other assets for SEO. Similar to how the SEO component was explained, the asset model itself can be extended to include any attributes that you would need.

Here are a few quick wins on how to extend the asset model with custom fields:

Headless CMS Image SEO - Caption

Caption: A Rich text field to caption and credit images, and have them rendered below assets.

Headless CMS Image SEO - Resize

Resize: A Number field to set values, so your final images queried are rendered at predefined values like 25%, 50%, or 75%.

Headless CMS Image SEO - Localized Alt Text

Localized Alt Text: A Single line text field with localization enabled, to define the alt text of your images in several languages depending on your business model.

Depending on the complexity you require and the resources at hand, there are several possibilities to further expand on this depending on your use case - max dimensions, format switches, mobile-specific images - the options are endless.

Resolving SEO as a react Component

Finally, on the frontend, the added attributes are then compiled on the next website build prior to deploying as part of an "SEO" component.

import React from 'react';
import Helmet from 'react-helmet';
import useSiteMetadata from '../hooks/useSiteMetadata';
const SEO = ({ children, title, subTitle, meta }) => {
const {
description: metaDescription,
keywords: metaKeywords,
noindex,
title: metaTitle,
image,
} = meta || {};
const {
keywords,
title: siteTitle,
titleTemplate,
siteUrl,
defaultImage,
twitter,
} = useSiteMetadata();
const pageTitle = metaTitle || title;
const pageDescription = metaDescription || subTitle;
const pageKeywords = metaKeywords || keywords;
const ogImage = image?.url || defaultImage;
return (
<Helmet
htmlAttributes={{ lang: 'en' }}
defaultTitle={siteTitle}
titleTemplate={titleTemplate}
>
<title>{pageTitle}</title>
<meta name="description" content={pageDescription} />
<meta name="keywords" content={pageKeywords} />
<meta property="image" content={ogImage} />
<meta property="og:url" content={siteUrl} />
<meta property="og:title" content={pageTitle} />
<meta property="og:description" content={pageDescription} />
<meta property="og:site_name" content={siteTitle} />
<meta property="og:image" content={ogImage} />
<meta name="og:type" content="website" />
<meta name="twitter:site" content={`@${twitter}`} />
<meta name="twitter:title" content={pageTitle || siteTitle} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image:src" content={ogImage} />
{!!noindex && <meta name="robots" content="noindex" />}
{children}
</Helmet>
);
};
export default SEO;

And finally, when the time comes to build pages prior to deploying, the job is done for us with pages requesting any added meta attributes before our sitemap is updated using the Gatsby Sitemap Plugin.

meta: seo {
...seoData
}

Blog Author

Ronak Ganatra

Ronak Ganatra

A free Wi-Fi enthusiast and pizza purist, Ronak is the VP of Marketing at Hygraph. He's also the co-creator of Build Your DXP and co-author of the Composable Architectures for Digital Experiences in the Enterprise report. He also maintains curated resources for marketers on awesome-marketing and awesome-developer-marketing.

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.