The Ultimate Guide to SEO with Sanity

SEO is a complex topic. There are thousands of ways to optimize websites for search engines, and each technology stack has its own particularities.

When using Sanity as a CMS, you’re actually doing headless SEO. Although this approach requires thoughtful technical implementation, it can liberate your content to help you reach more users across all channels.

Thanks to Sanity’s flexibility and its powerful APIs, you can integrate with any third party API imaginable. Take advantage of this agility to publish content across different channels, translate and localize your content to any language, evaluate adherence to brand guidelines, and even use AI text generation.

This guide will walk you through SEO best practices for Sanity. We will cover the ins and outs of on-page SEO, including titles and meta descriptions, as well as indexation management, sitemap creation, redirects, and web performance optimization.

Title and meta description

The best way to consistently add titles and meta descriptions across your documents in Sanity is to build a reusable SEO object schema. In this object, you will want to include two text input fields, one for each meta tag.

You can add validation rules to any field in your schema to ensure that the content of your meta tags adheres to the right character limits.

You’ll want to cut your titles at around 65 characters and your meta descriptions at around 155. While this is a little lower than the allowed character count for those fields, a smaller limit can prevent your tags being cut off on the search engine results pages (SERPs).

To enable your writers to create content that shines, you can design the SEO object to provide prompts that contextualize what each field does and how best to fill them out.

You could take this even further by checking for duplicate titles or meta descriptions as part of your validation rules.

Optimization tips

• Title tags are important for SEO, so pay careful attention to your tags. Add your target keyword in the title, but don’t over-do it. Remember you’re writing for users, not robots.
• Make sure your title is original and appealing. The title should set clear expectations for what the content is about and provide clarity on what users can expect to get out of your post. Gain insight into the topics that are resonating in your search space by looking at the content that’s already ranking for your target keywords.
• The meta description gives you an opportunity to control how your document looks in the search results. As with the title, make sure your meta descriptions are clear, concise, and reflective of the content users will find on your page.

Indexing management

Managing the pages you want Google to index is absolutely essential to a solid SEO strategy. A good indexing strategy will help you keep irrelevant URLs out of the SERPs and direct users to the best page to answer their query.

In a headless setup, you will have more control over what search engines index and how they reach your content. This is due to the fact that you are not limited to a single URL structure. This is an advantage over traditional CMSs, where the URL is generated by the CMS itself.

The “noindex” directive

Indexation is managed through the meta robots tag or the x-robots-tag. The x-robots-tag on the HTTP header response is best for managing the indexation of non-HTML files such as PDFs. For pages, the meta robots tag is easier to manage.

The tag is made of two parts: the tag name and the content. Let’s look at an example:

<meta name="robots" content="noindex" />

The name determines what robots this tag is addressing, and the content is the directive. In the above example, the tag is telling all robots to not index the page.

The “nofollow” directive

Directives in meta robots tags can manage other aspects of your page’s relationship with search engines. One of the most well-known is the “nofollow” directive. This is used to tell search engines not to crawl the links in the page.

Indexing management in Sanity

The best way to approach indexing management with Sanity is by adding a section for it on the SEO object mentioned above. This should control the inclusion (or not) of a meta robots tag on the HTML head including the “noindex” directive.

A simple way to manage your meta robots tags would be presenting users with the choice of not showing the page on search results, with a single-option choice field or a toggle. You could also develop a more advanced setup that allows users to include other relevant directives.

Make sure you are descriptive when adding this field to your Sanity Studio, so that authors and content creators can make the best choice for their content.

It’s important to be aware that search engines default to an “index” and “follow” directive if there is no meta robots tag or if the object is empty. So you don’t need to include them for Google to index your pages and follow the links in them, but it’s not harmful if you do.

URL slugs

Your page’s URL is a critical part of your on-page optimization strategy. The slug is the last section of your URL. It comes after your domain names and any directories you have chosen to include.

The Sanity Studio enables editable URL slugs by default. All you have to do is create the best best slugs for your site.

The slug schema type comes with a helpful option to define your own function to generate slugs from the value of any field in the document. The slug field can even take asynchronous functions to apply powerful custom logic to create and validate slugs.

Optimization tips

• Your URL slug should be short and descriptive and should include your target keyword.
• Your URL needs to be human readable, but not stuffed with keywords or meaningless stop-words.
• Avoid including numbers or years in your URLs, as this will make it harder for you to re-use and update your content over time.
• Consider making slug fields “read only” for certain user groups, as allowing any user to change a slug could be detrimental to your rankings by creating broken incoming links.

Image optimization

There are two ways in which the use of images can impact your SEO: the impact of images on web performance, and ranking images on search.

Let’s take a look at the first one.

Optimizing performance

Out of the box, Sanity comes with a globally-distributed asset CDN that speeds up your performance and offers some remarkable flexibility.

With Sanity, you can automatically resize your image, adjust the quality level or request a new crop. The asset will be created for you and cached close to your users. To maximize performance, reuse crops and sizes across your front-end, so you can make the most of your cached assets.

While Sanity can intake most image formats, your choice impacts the size and quality of the file. As a rule of thumb, use SVGs for logos and icons, PNGs for illustrations and transparency, and JPG for photos.

You can convert your images to WEBP automatically by appending ?auto=format to the image URL.

File names

To improve your image’s rank on Google, you want to be able to optimize the filename and alt text for each image. As an SEO best practice, your file name should contain your target keyword or a variation of it.

Sanity converts image file names into hashed URLs. This is more secure, because it protects your site from any compromising text in the original filename, and it’s unique.

However, this is not ideal for SEO, so you will want to personalize your image URLs by adding a vanity filename, which appends a string at the end of the image URL before the parameters. You can set up your image URLs to store and use the original file name at the vanity filename.

Alt text

Your team has full control over how it manages alt text. You can set the alt text at image level on your asset library using the Sanity Media plugin, or set it at document level.

Get the best of both worlds by setting your alt text at image level with the ability to overwrite it at document level.

As a best practice, it’s helpful for your alt text to precisely describe the image. Stuffing it full of keywords is against Google’s advice and it’s detrimental to the experience of users with disabilities.

Open Graph images

Although open graph images don’t typically play a role in SEO, they often end up on your team’s list of responsibilities. To help, Sanity allows you to auto-generate your open graph images based on your Sanity content and a few visual rules.

There are different plugins and options that make this easier. One of our favorites is the OG Image Generator Asset Source plugin. Alternatively, you can use the OG Image Generation feature from Vercel.

Of course, if you’d like to upload individual images, you have the option to do so too.

Internal linking

Internal linking is the process of linking one page on a website to another page on the same website. This is important for SEO because it helps search engines understand the structure of a website, find new pages, and decide which pages work best to answer a user’s query.

And it does something similar for your users. Good internal linking can contribute to a positive and persuasive user experience, where users find exactly what you want on your site and can easily navigate access the information and resources they want.

Internal linking is available by default on the Sanity Studio, and it offers some cool extra features. When you’re linking internally between pages, the Sanity Studio uses references in the background. This means that when you change URL, all of your internal links will change too.

This feature will save your SEO team hours of finding and replacing links and will keep your website healthy by reducing the amount of internal redirects on your pages.

Creating your sitemap

With Sanity, you’re in full control of your sitemap. You build it manually or automatically and make it as simple or complex as you choose.

Our partners at Tinloof have created an easy four-step process to building a dynamic sitemap with Sanity and Remix.

There are many different ways to add or remove complexity from your sitemap process but three basic steps to build a sitemap with Sanity.

1. Query your content for a list of URL slugs

Easily query your content with GROQ, or use GraphQL if you’re not yet familiar with GROQ.

You can make this as simple or as rich as you want. For a basic sitemap, you just need to query the slugs, but you can enrich your sitemaps by creating specific maps for videos, news articles, or images.

Using GROQ queries, you can include different fields on your sitemap such as the last modified date for your content or hreflang tags.

For a more advanced sitemap setup that gives you better visibility on your site’s organic performance, you can break up your sitemaps by content types or website sections.

If you’re managing a large site, make sure your sitemaps remain under 50MB. If you reach this limit, you will have to split them into different sitemaps.

Users who are managing a more advanced setup might want to choose validation rules that determine what URLs get included in the sitemap. You will want to include only indexable and canonical URLs with a 200 HTTP response.

This is what a GROQ query for the slugs on the Sanity blog would look like:

*[_type == 'post' &&
  !(_id in path("drafts.**")) &&
  includeInSitemap != false &&
  publishedAt < now()] | order(publishedAt desc) {
    slug
  }

2. Write a script to build out the full URLs

Once you have queried all the information you need, build out the full URLs. Since you already have the slugs, and you know how your URLs are set up on your front end, building out URLs is easy.

For the Sanity blog, it would look like this:

const blogUrls = blogposts
  .filter(({ slug = {} }) => slug.current)
  .map((post) => ({
    url: `/blog/${post.slug.current}`
  }))

3. Generate the XML file with your front end framework

To complete this last step, you will have to rely on your front end framework to create and deploy the XML sitemap that will be seen by search engines.

Sitemaps can contain more than just URLs, so this is your chance to incorporate any extra information you’ve queried in step 1.

Managing redirects

Sanity users can create and store redirect documents on the Sanity Studio and then implement them in the front-end framework. Here's a full guide covering how to manage and implement redirects with Sanity with reference to some of the most popular frontend frameworks.

Depending on how much automation you’d like to use, there are a few different ways to manage redirects with Sanity. Regardless of what you choose, creating a section on your Sanity Studio for redirect documents allows your marketing team and content creators to manage redirects without having to push a single line of code.

This solution can intake any type of redirect. Developers can then allow users to choose between permanent or temporary redirects when they’re building the redirect document type.

Opening up redirects to non-technical users can carry some risk. Mitigate  risk by leveraging Sanity’s role-based permissions.Custom automations automatically redirect any changes in slugs. For example, an advanced setup for redirect management would fire a GROQ-powered webhook when a slug field changes and respond by building a redirect document.

These redirect documents will be queried by the front end, which will then build a redirect file. Developers can customize how and when to pass these redirects on to the front end.

Are you doing SEO with Sanity?

We’ve covered a wide range of implementation options, from basic functionality to custom automations. But this is not a complete guide.

One of the most exciting aspects of working with Sanity is everything we have not yet seen. Our users surprise us every day with innovative uses and applications that we could not have imagined ourselves. And we cannot wait to see what you come up with.

Join our Slack community to ask questions, see what other people are building with Sanity, and get feedback on your development.