In this comprehensive guide, we’ll show you how to:

Install and configure the Sanity Plugin SEO

Integrate it with Next.js to display SEO metadata

Deploy your site and optimize it for search engines

Whether you’re a beginner or experienced developer, this blog will help you create a website that ranks higher on search engines.

First of all you need to create two separate folders:

Both folders will stay in the same root folder, it makes it easier to manage your code.

You can also include common configuration files like .gitignore and .editorconfig in the root, along with a README.md.

If you want to track your project with Git, run git init in the root folder.

To set up Sanity Studio, you can use npm / yarn / pnpm, here we have used npm,

npm create sanity@latest
yarn create sanity@latest
pnpm create sanity@latest

$ Select project to use: Create new project
$ Your project name: sanity-tutorial-blog
$ Use the default dataset configuration? Yes
$ Project output path: ~/path/studio
$ Select project template: Blog (schema)
$ Do you want to use TypeScript? Yes
$ Package manager to use for installing dependencies? npm

Once installed, redirect to the studio folder and run:

This starts the Studio on a local-host server 

 , that will allow you to edit and publish your content on the go.

With your Sanity Studio up and running, it’s time to define your content schema. This is where you specify the types of content you’ll be publishing on your blog.

Open the schemas folder in your studio directory and create a new file for your blog post schema, such as blogPost.js.

Here’s a basic example of how to define a blog post schema:

import { defineField, defineType } from 'sanity'

export default defineType({
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
    }),
    defineField({
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'title',
        maxLength: 96,
      },
    }),
    defineField({
      name: 'author',
      title: 'Author',
      type: 'reference',
      to: { type: 'author' },
    }),
    defineField({
      name: 'mainImage',
      title: 'Main image',
      type: 'image',
      options: {
        hotspot: true,
      },
    }),
    defineField({
      name: 'categories',
      title: 'Categories',
      type: 'array',
      of: [{ type: 'reference', to: { type: 'category' } }],
    }),
    defineField({
      name: 'publishedAt',
      title: 'Published at',
      type: 'datetime',
    }),
    defineField({
      name: 'body',
      title: 'Body',
      type: 'array',
      of: [{ type: 'block' }],
    }),
  ],
  preview: {
    select: {
      title: 'title',
      author: 'author.name',
      media: 'mainImage',
    },
    prepare(selection) {
      const { author } = selection
      return { ...selection, subtitle: author && `by ${author}` }
    },
  },
})

This schema includes fields for the title, slug, publication date, and content of your blog posts. You can customize it further by adding fields for images, categories, or authors as needed.

After saving your schema, return to the Sanity Studio. You should now see the option to create new blog posts, allowing you to fill in your content with ease.

Now that your CMS is set up, it’s time to install the 

This plugin simplifies the process of adding metadata, which is crucial for SEO. It handles meta titles, descriptions, and social media data (Open Graph and Twitter cards).

 Within your document schemas, you can quickly add and set up important SEO fields like title, description, keywords, and more.

Make sure SEO optimisation becomes a crucial step in your content development process by smoothly integrating SEO field creation into your Sanity Studio workflow.

 Easily connects with your current schemas and plugins and is fully compatible with Sanity v3. It also works well with React and Next.js, guaranteeing a seamless interaction with contemporary web development frameworks.

1. In your terminal, navigate to your studio directory and run:

2. After installation, integrate it into your project by modifying your sanity.config.ts file:

import { defineConfig } from 'sanity'
import { structureTool } from 'sanity/structure'
import { visionTool } from '@sanity/vision'
import { schemaTypes } from './schemaTypes'
import { seoMetaFields } from "sanity-plugin-seo";

export default defineConfig({
  name: 'default',
  title: 'sanity-seo-project',

  projectId: 'Your Project Id',
  dataset: 'production',

  plugins: [structureTool(), visionTool(), seoMetaFields()],

  schema: {
    types: schemaTypes,
  },
})

3: Adding SEO Fields to Your Content Types

 by adding fields for meta titles and meta descriptions. These fields will ensure that search engines like Google know what your content is about, which helps in ranking your pages.

1. Open the post.js file in your schema directory.

2. Add the following fields to your post schema:

import { defineField, defineType } from 'sanity'

export default defineType({
  name: 'post',
  title: 'Post',
  type: 'document',
  groups: [{
    title: 'SEO',
    name: 'seo'
  },
  {
    title: 'Main',
    name: 'main',
    default: true
  }],
  fields: [
    defineField({
      title: "Seo",
      name: "seo",
      type: "seoMetaFields",
      group: "seo"
    }),
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
      group: "main"
    }),
    defineField({
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'title',
        maxLength: 96,
      },
      group: "main"
    }),
    defineField({
      name: 'author',
      title: 'Author',
      type: 'reference',
      to: { type: 'author' },
      group: "main"
    }),
    defineField({
      name: 'mainImage',
      title: 'Main image',
      type: 'image',
      options: {
        hotspot: true,
      },
      group: "main"
    }),
    defineField({
      name: 'categories',
      title: 'Categories',
      type: 'array',
      of: [{ type: 'reference', to: { type: 'category' } }],
      group: "main"
    }),
    defineField({
      name: 'publishedAt',
      title: 'Published at',
      type: 'datetime',
      group: "main"
    }),
    defineField({
      name: 'body',
      title: 'Body',
      type: 'array',
      of: [{ type: 'block' }],
    }),
  ],

  preview: {
    select: {
      title: 'title',
      author: 'author.name',
      media: 'mainImage',
    },
    prepare(selection) {
      const { author } = selection
      return { ...selection, subtitle: author && `by ${author}` }
    },
  },
})

Now, You need to set up your Next.js app in the main root project folder:

After that on the prompt, name your project frontend and choose the following options:

In the frontend folder, your package.json should look something like this:

frontend

Next.js handles routing automatically based on your folder structure.

Create a pages folder and add an index.tsx file to make it the front page of your site. Replace the content in index.tsx with:

const Index = () => {
    return (
      <div>
        <p>Hello Guys!</p>
      </div>
    );
};

export default Index;

You can also remove the existing CSS files and references from _app.tsx if you don’t need them.

in your browser, and you should see your "Hello Guys!" message.

Let's use React to render some content that we pulled from Sanity's Content Lake.

 (Image courtesy of Sanity CMS) is where your content will be stored and accessed. Its fully managed by sanity and runs on the cloud. You can access the content lake via sanity API [Application Programming Interface] either directly through the 

 to terminate the current development server.

To start, install the requirements required to connect to the Sanity API in the frontend folder:

The root frontend folder should contain a new file named 

Enter the following after opening the file:

// client.ts
import sanityClient from '@sanity/client'

export default sanityClient({
  projectId: 'your-project-id', 
  dataset: 'production', 
  useCdn: true 
})

You can find the project id in sanity.json file.

 Production or the name you chose in step 1 of installation.

`false` if you want to ensure fresh data.

When working with sensitive data in your application, it's essential to prioritize security. 

One effective way to protect your Sanity configuration is by using a 

This file should be created in the root of your frontend folder and can store private information that shouldn't be exposed to end users.

 In the root directory of the folder named frontend , create a file named .env.

 Populate the .env file with your Sanity project details. For example,

SANITY_PROJECT_ID=12345678 [id of your sanity project]
SANITY_DATASET=production
SANITY_USE_CDN=false

import sanityClient from '@sanity/client';
import dotenv from 'dotenv';

dotenv.config();

const client = sanityClient({
   projectId: process.env.SANITY_PROJECT_ID || '',
   dataset: process.env.SANITY_DATASET || 'production',
   useCdn: process.env.SANITY_USE_CDN === 'true'
});

export default client;

You can import this client wherever you want to pull content out of your Sanity project.

Variables in sanity.config.ts in the studio folder should be the same as values for projectId and dataset.

Now, to create dynamic routing structure in your application, do this:

Go to your pages directory, create a new folder called post.

 In the post folder, you'll now create a file called [slug].tsx. In this file, you'll be using the slug that was passed in the URL for the dynamic routes.

 In the [slug].tsx file, you'll now add the code that renders the slug as an <h1> element. Just like above,

// post.tsx
import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  
  return (
    <article>
      <h1>{router.query.slug}</h1>
    </article>
  )
}

export default Post

Test Your Setup Run your application and go to 

. You should see "test" rendered as an H1 heading.

. Now, let's create a new post called Lorem Ipsum Dolar Sit Amet", as an example. Generate a slug. Fill in all your post's seo details in the seo tab. Don't forget to publish it for the content to show up via the public API.

That's how you implement it in your [slug].tsx file:

import { useRouter } from "next/router";
import client from "../../lib/sanity";
import { PortableText } from "@portabletext/react";
import { NextSeo } from "next-seo";

const query = `*[_type == "post" && slug.current == $slug][0]{
  title,
  body,
  slug,
  seo {
    _type,
    metaTitle,
    metaDescription,
    nofollowAttributes,
    openGraph{
      _type,
      title,
      url,
      description,
      siteName
    },
    seoKeywords,
    twitter{
      _type,
      cardType,
      handle,
      site,
      creator
    }
  }
}`;

export async function getServerSideProps(context) {
  const { slug } = context?.params;
  const post = await client.fetch(query, { slug });

  if (!post) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      post,
    },
  };
}

const Post = ({ post }) => {
  const router = useRouter();
  const {
    metaTitle,
    metaDescription,
    openGraph,
    twitter,
    nofollowAttributes,
    seoKeywords,
  } = post?.seo || {};

  const robotsContent = nofollowAttributes
    ? "noindex,nofollow"
    : "index,follow";

  return (
    <>
      <NextSeo
        title={metaTitle || "Default Title"}
        description={metaDescription || "Default Description"}
        robots={robotsContent}
        openGraph={{
          type: openGraph?._type || "website",
          title: openGraph?.title || metaTitle,
          description: openGraph?.description || metaDescription,
          url: openGraph?.url,
          site_name: openGraph?.siteName,
        }}
        twitter={{
          cardType: twitter?.cardType,
          site: twitter?.site,
          handle: twitter?.creator,
          title: openGraph?.title || metaTitle,
          description: openGraph?.description || metaDescription,
        }}
        keywords={seoKeywords}
      />

      <article className="p-8">
        {router?.query?.slug && <h1>{router?.query?.slug}</h1>}
        {post?.title && (
          <h2 className="text-2xl font-bold capitalize pb-2">{post?.title}</h2>
        )}
        {post?.body && (
          <div>
            <PortableText value={post?.body || []} />
          </div>
        )}
      </article>
    </>
  );
};

export default Post;

In today’s digital era, simply having a website isn’t enough 

 is key to making sure your site gets noticed.

, optimizing for SEO can be a challenge. That’s where 

 comes in, helping you manage all your SEO data directly within your CMS.

Step-by-Step Guide: Build an SEO-Friendly Website Using Sanity Plugin SEO

Before diving into the world of Sanity, there are a few things you need to know first:

Content Management System (CMS)Headless CMS

What Is Sanity.Io? A Beginner Friendly GuideAre you a beginner who wants to create a website but can’t seem to get past the technical jargon or the complexity of the process? Well, don’t worry! In the world of website building, there’s a magic tool called a 

.Technically,Think of a CMS (Content Management System) as your website’s foundation. It’s where you’ll find all the elements you want to add to your site, from text to images to videos, and everything in between. You can think of it as a digital toolbox with all the features and functions you need to customize your website to fit your needs.

What Is Sanity.Io? A Beginner Friendly GuideAs we discussed before, let's take another look, Imagine you’re building a website or app. You have content, such as text, images, or videos. You need a way to organize and update that content. That’s where a CMS comes in.A CMS is like a toolbox for organizing and updating your content. You don’t need to be an expert in coding to use it.But here’s where things get tricky.In a traditional CMS, such as WordPress, the CMS doesn’t just store your content. It also decides how your content will look on the web.It’s like a robot that cooks your dinner but doesn’t care how it’s served.In contrast, a headless CMS is like a chef that only cooks the meal.The “head” of the CMS is separated from the “body” of the content.

A headless CMS stores your content in one central location. Then, whenever a user wants to view that content, whether on a website, mobile application, or even on a smartwatch, they do so via an API. An API is like a waiter who brings your order into the kitchen and then brings your food back.Since the content and the appearance of the content are separated, you can change the appearance of your website or application without changing the content. If you want to update your website's design, you don't have to do a thing. Your content remains the same. All you have to do is plug in a new (the part that determines how things look) front-end.

The Sanity.io Content Management System (CMS) is a cross-platform, headless content management system (CMS) that enables developers to create and manage content across devices and platforms. Sanity.io helps you organize and manage your content in a way that makes it easier to build and manage websites, apps, and digital experiences.That’s a lot of technical jargon😄, isn’t it? Let’s make it easy for you.Let’s say you’re creating a website or app, as we mentioned earlier. You’ve got your content (text, images, video) and you need to organize and update it. That’s where you’ll find a tool like sanity.io. It’s an all-in-one solution to organize and update your content without having to be an expert in coding.

Sanity.io allows you to customize the content management system to your exact specifications. It’s like rearranging a room: you have the final say on where everything goes.

Sanity.io is designed to make your life easier as a developer. It provides language-friendly tools to help you work faster and more effectively

Let’s say you’re working on a project together with your friends. You’re all working on the same document, but you can’t edit it all at once. It’s that simple. That’s why you can easily work with your friends on a project. No need to wait for others to complete their work before you can begin yours. Sanity.io makes it easy to collaborate with your friends.

Whether someone is visiting your website from a desktop, mobile, or tablet, sanity.io makes sure your content looks great on all devices. It’s like having an all-over wardrobe.

Sanity.io maintains a history of changes in your content, just like your phone records your messages. This means that if you delete an important piece of content, you can easily restore it.

Sanity.io has been designed to be fast and reliable. It will never slow down, even when thousands of visitors are on your site at the same time.

If you ever get stuck, there are lots of friendly people and resources ready to lend a hand. Think of it like having a support team you can call whenever you need them.

In short, Sanity is a flexible, collaborative, and easy-to-use tool that makes online content management a breeze, whether you’re a web developer or not.

Some popular FAQs

The Sanity.io Content Management System (CMS) is a cross-platform, headless content management system (CMS) that enables developers to create and manage content across devices and platforms. Sanity.io helps you organize and manage your content in a way that makes it easier to build and manage websites, apps, and digital experiences.

What is Sanity.io? A Beginner Friendly Guide

A real-time headless CMS that gives you flexibility and control over your content.