SEO Optimization with Sanity CMS

Introduction

At Operation Nation, we specialize in crafting SEO-optimized websites using Sanity CMS and our ONE Builder framework. With this, we're not just building websites; we're building content production engines that thrive in the competitive landscape of SEO.

We emphasize strong technical and on-page SEO foundations for effective SEO campaigns. In this article, we discuss the most important SEO factors that Sanity CMS recommends and highlight the ones that we find most useful within our ONE Builder.

At Operation Nation, our team specializes in SEO Optimization with Sanity CMS. All websites we build cover technical and on-page SEO as fundamental cornerstones. It's absolutely essential for a website to have this SEO foundation to fully harness the potential of an SEO campaign.

Clients often come to us looking for a simple SEO and Content plan, but when we audit their websites, it turns out that they’re full of SEO mistakes and have bad structures that make it nearly impossible to get good results from organic growth. No matter how great our content & SEO plan is.

In this article, we'll delve into how we assist our clients by delivering fully SEO-optimized websites through our ONE Builder framework, seamlessly integrated with the top-ranked CMS, Sanity.

SEO Management and Automation in Sanity

One of the benefits of Sanity is how easy it is to customize and adapt the CMS to your needs. Including all SEO automations and functionalities. Luckily, the awesome team at Sanity has put together a handful of SEO Guides. They provide some helpful SEO plugins and recommend best SEO practices.

In our ONE Builder framework, you’ll find all of Sanity’s recommendations and we added some of our own. This makes managing SEO as easy as possible. It includes a Yoast plugin that many of you are probably familiar with from WordPress. The Yoast plugin provides an easy-to-use validation and checklist during the editorial process. With this, your content team will follow best practices when writing new landing pages or creating new blog articles. 

Credit: Sanity

Another way we help our clients with improving SEO is by providing validation on SEO fields such as the title and meta description. As you can see in the image below, we provide clear instructions and validation on the recommended character length.

Interesting read: Content SEO vs Technical SEO

On-Page SEO with Sanity

On-page SEO is the art of optimizing individual web pages to improve their visibility and relevance in search engine results. This optimization process involves fine-tuning various elements directly within the web page itself, like crafting compelling and keyword-targeted content to optimizing meta titles, descriptions, headings, and URLs. On-page SEO aims to make your page more appealing to both users and search engines. By aligning your content with relevant keywords, improving the user experience, and following best practices, on-page SEO boosts your chances of ranking higher and attracting organic traffic to your site.

For a successful on-page SEO optimization, it takes both the developer and the content writer doing their job correctly. At Operation Nation, our websites are coded with on-page SEO as a core foundation. This empowers our content strategists, or your content team, to publish content with confidence.

Let’s go over some of the different elements that make up on-page SEO.

Title and Meta Description

As seen in the image above in this article, our internal framework for building websites, the ONE Builder, ensures that the user adds a Title and Meta Description to every page. This includes hint text and character length validation.

Headings (H1s, H2, H3s, etc)

I feel like a lot of developers and website builders overlook this, or just don’t know better, but you should only have one <h1> heading on a webpage. And it’s ideal if you can have the H1 text describe what the page is about and include your keyword.

Our ONE Builder also allows you to choose which heading you want to use for any module you add to a landing page. Keep in mind that content publishers should still use H2, H3, H4, etc in a way that creates a logical hierarchy for the content on the page.

Semantic HTML

Semantic HTML isn't just about structure; it's a catalyst for SEO success. By using semantic elements like headings (H1, H2, etc.), paragraphs, lists, and more, you provide a clear roadmap for search engines to understand your content's context. These elements help search engines decipher the hierarchy and relationship of your content, improving your chances of ranking higher for relevant keywords. Semantic HTML optimizes the user experience as well, making your content more accessible and readable. When search engines and users seamlessly navigate your content, it's a win-win for SEO.

Within our ONE Builder, we follow Semantic HTML best practices when architecting websites for our clients.

Image Optimization

Images on your website can be optimized in a variety of ways. Luckily, Operation Nation has you covered when it comes to SEO image optimization. Every image component in the ONE Builder comes with an `alt` and `caption` field and includes validation for the ‘alt’ field.

We also optimize all of our images on the front-end of the website as well. We use the <Image /> component in our code base from NextJS. This component extends the default <img> element with features for automatic image optimization:

• Image size optimization: serves images in the most optimized size for each device/screen width using modern image formats like WebP and AVIF.
• Visual Stability: Gives you the ability to prevent layout shift (CLS) when images are loading which in return will improve your Performance score in Core Web Vitals
• Faster Page Loads: Using native browser lazy loading, we can load images only when they enter the view port.
• Asset Flexibility: On-demand image resizing, even for images stored on remote servers

Automatic Open Graph Images with Sanity

Within our ONE Builder framework, we have implemented a feature allowing for quick and easy branded image generation for your Open Graph (OG) images, aka the image you see as a preview when you share a link through social media for example. Each page within the ONE Builder has a section where you can write a headline and body text that will be placed on a branded image that we design for a client.

Not only does this save your designers time, but it also encourages consistent branding whenever a URL is shared. To help automate this process for blog article hero images, we’ve included logic that will use a generated dynamic OG image, in case you don’t have the resources to design custom hero images for each article.

Internal Links

Internal linking within your site is an important part of on-page SEO optimization. Google uses these links to understand the content hierarchy and structure of your website, determining the importance of specific pages based on the frequency and context of internal linking. Furthermore, internal links aid search engine bots in discovering new or updated content, ensuring timely indexing and visibility of your web pages in search results.

The ONE Builder makes it super easy to include internal links within your content by having a dropdown of different pages to choose from within your site when you want to include a link. And by choosing a page instead of copy and pasting a URL, it helps you reduce broken links.

Yoast Validation

The popular Yoast SEO WordPress plugin is a tool that WordPress users have become comfortable using. Well, you will be happy to know that there is also a Yoast plugin for Sanity CMS and we have implemented it in our own ONE Builder framework.

This helps keep your writers and content team on top of their SEO game and makes sure they are producing SEO optimized content.

Technical SEO with Sanity

Technical SEO is crucial for high-performing websites. Think about page speed, an intuitive user-experience and a logical site structure. Our internal website builder, the ONE Builder, is built with technical SEO top of mind.

Robots.txt file

The robots.txt file is an essential aspect of SEO because it instructs search engine robots (often referred to as "crawlers" or "spiders") about which pages or files on your website they should or shouldn't visit.

By using NextJS config options and fields that we created in Sanity CMS, you are able to automatically generate a robots.txt file for your website. This also gives you full control over which pages you want public or private from Google and other search engines.

Automatic Sitemap Generation

A sitemap is like a blueprint for your website, indicating the structure of your website’s content to search engines. Your sitemap helps search engines efficiently crawl, understand, and index the content of your website, thus playing a pivotal role in your site's SEO health. Any website built with the ONE Builder has the functionality that automatically creates your sitemap for you.

Optimizing Code and File Size

This one is a big one, and it’s a problem we run into frequently with clients that come to us needing help with their website. Especially clients with WordPress sites that use a lot of plugins and page builders such as Divi or Elementor. These types of sites often score pretty low in the Performance category when conducting website audits with Google’s PageSpeed Insights tool. And a website that is slow and doesn’t perform well in Google’s Core Web Vital metrics will be punished when it comes to ranking in Google.

This is why it’s crucial to have a fast-loading website. Optimizing a website’s code and file size is one important way to do that. With our chosen tech stack of Sanity and NextJS we have full control over the code base, so we’ve optimized the ONE Builder to the max.

Page Speed and Google Core Web Vitals

To emphasize how important page speed is, Google has stated that having low scores for Core Web Vitals can negatively affect your ranking. Google includes Core Web Vital metrics into its search algorithm. Statistics indicate that if your website doesn’t load within 3 seconds, 40% of your visitors will exit the website. Imagine how many conversions your website is losing out on because it’s slow?

Speed and overall performance is a top priority and metric for our engineering team at Operation Nation. We guarantee that any website we build will score all above 90%, keeping your website in the green.

Mobile Friendly and Responsive

With more than 55%+ of internet traffic coming from mobile devices, it’s a no-brainer that your website should be optimized for mobile devices. For a website to be optimized for mobile, it should display correctly on mobile devices so the text is readable, interactive elements (such as dropdown menus, popups, etc) respond correctly, and it should load FAST! Not everyone is loading your website from a 5G network or fiber optic internet with over 50 mb/s.

An empathetic approach to mobile design , is to pretend you have customers trying to access your website and make a purchase from a remote location. They may only have 5 - 10 mb/s.

Responsive design is an approach to web design that ensures a website's layout adjusts optimally across various devices and screen sizes. It's crucial for SEO because search engines favor mobile-friendly websites, and a responsive design enhances the user experience, leading to longer site visits and reduced bounce rates.

The ONE Builder produces websites that are responsive by default and optimized for mobile devices!

Redirect Management

Redirects are crucial for SEO because they ensure users and search engines are taken to the correct webpage when an old URL is accessed, preserving the user experience, building link equity, and preventing multiple versions of a page from being indexed. Properly implemented redirects maintain the site's authority and rankings, and prevent "404 Not Found" errors, which can harm a website's trustworthiness and user engagement.

With our implementation in Sanity, we have a page dedicated to allowing users to set up redirects from the UI without any need for code changes.

Index Management

Page index management is the process of controlling which pages of your website are indexed by search engines. This means determining which pages you want search engines to store and display in search results and which ones you don't.

As we showed you under the section for Robots.txt, we have a feature that allows you to select if you want a page published or private. This feature is what controls the indexing of pages.

If you want to learn more about Technical SEO we have a whole article dedicated to Technical SEO vs Content SEO where we provide an in-depth comparison discussing the differences and importance of both.

Schema Markup

Schema Markup is a code in the form of structured data that communicates the meaning of your pages, elements, and how users should see it to the search engine. It helps Google understand the information on the page better. This enables Google to use it to show rich snippets in search results, which usually result in more clicks!

You can use Schema Markup tags for the following:

• Reviews
• Products
• Events
• People
• Local businesses
• And more

A lot of websites out there don't take the time to add Schema Markup to their pages. This is an easy way for you to get a leg up on your competition.

With Sanity, Operation Nation just made it even easier for you to add Schema Markup to your website with our Schema Markup Plugin for Sanity. This allows you to easily add Schema Markup to any page via the UI in Sanity Studio.

Check out our video tutorial we recently published to learn more and see a demo.

Conclusion

Harnessing the power of Sanity CMS and NextJS for SEO optimization empowers our team to deliver websites that not only excel in aesthetics and functionality but also in search engine performance. Our commitment to technical and on-page SEO forms the foundation of every website we create. Through the integration of automated SEO management tools, such as the Yoast plugin, we streamline the process for our clients, making it effortless to adhere to SEO best practices. The ONE Builder framework's meticulous attention to semantic HTML, on-page elements like headings, and image optimization ensures that each web page communicates effectively with both search engines and users.

Furthermore, our dedication to technical SEO, as reflected in efficient robots.txt file generation, automatic sitemap creation, and optimized code, guarantees websites that load swiftly, adhere to Core Web Vital metrics, and offer exceptional mobile experiences. Redirect and index management seamlessly tie the bow on our approach, ensuring that our clients' websites maintain their authority, trustworthiness, and search engine visibility.

With the ONE Builder and Sanity CMS, we're not just building websites; we're building content production engines that thrive in the competitive landscape of SEO.

You can learn more about our services for building websites with Sanity CMS on our Custom Websites page. If you're in need of an SEO campaign or simply would like us to perform an SEO audit on your current site, go to our SEO page to see how we can help!

Or, if you’re ready to schedule a chat to see if we can help you, click the the button below to schedule a Zoom meeting! Thanks for reading :)