Add Schema Markup In Next 13

Schemas, or structured data markups, provide information about a web page to search engines. This markups help search engines understand the content on a webpage better and can be used to enhance the way search engine results are displayed.

In this article, we will show you how to add schema markup to your pages in next 13 application.

Creating JSON Ld Object

JSON-LD (JavaScript Object Notation for Linked Data) is a lightweight data interchange forma. JSON-LD is often used to describe structured data.

Now go to your a page in the app directory and create a JSON LD object.

Here is our JSON LD object for this website's article page.

 const jsonLd = {
    "@context": "https://schema.org",
    "@type": "TechArticle",
    headline: article.attributes.title,
    image: article.attributes.image.data?.attributes.url
      ? "https://api.onjsdev.com" +
        article.attributes.image.data?.attributes.url
      : "https://onjsdev.com/og.png",
    publisher: {
      "@type": "Organization",
      name: "OnJSDev",
      logo: "https://onjsdev.com/og.png",
    },
    url: "https://onjsdev.com/article/" + article.attributes.slug,
    description: article.attributes.description,
  };

As you see, we have some dynamic values coming from an API. You replace own values with these values.

Now let's see a bit properties consistiong of this obejct:

• @context: Specifies the context or vocabulary in which the data is described. In this case, it's set to "https://schema.org," indicating the use of the schema.org vocabulary.

• @type: Indicates the type of the entity being described. Here, it's set to "TechArticle," signifying that the structured data pertains to a technical article. You can find more type in the official website

• headline: Represents the title or headline of the technical article.It is set to the title attribute of the article object.

• image: Represents the image associated with the technical article.

• publisher: Represents information about the organization that published the technical article. An embedded object with its own properties.

• description: Represents the description or summary of the technical article.

Adding JSON LD Object To Page

Then, simply add a regular HTML script tag your page and include the object as shown below:

/* *** */
export default async function Article({ params: { slug } }) {
  const article = await getArticleBySlug(slug);

  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "TechArticle",
    headline: article.attributes.title,
    image: article.attributes.image.data?.attributes.url
      ? "https://api.onjsdev.com" +
        article.attributes.image.data?.attributes.url
      : "https://onjsdev.com/og.png",
    publisher: {
      "@type": "Organization",
      name: "OnJSDev",
      logo: "https://onjsdev.com/og.png",
    },
    url: "https://onjsdev.com/article/" + article.attributes.slug,
    description: article.attributes.description,
  };

  return (
    <article className="dark:text-white text-darker font-staatliches">
     {/* .....*/}
      <section className={`article font-roboto`}>
        <ReactMarkdown
          rehypePlugins={[rehypeHighlight, rehypeRaw]}
          remarkPlugins={[remarkGfm]}
          children={article.attributes.content}
        />
      </section>

      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
    </article>
  );
}

That's all. Now you can check your schema in a developer tool to see if it is implemented without error. In addition, you can use the google's schema checker tool.

Conclusion

Schema plays a important role in optimizing your website for search engines (SEO) and enhancing its visibility in search results.

In this article, we have showed you how to add a schema markup your next 13 app with app directory.

Thank you for reading