Search engines like Google use structured data (JSON-LD) to better understand your website's content, enabling rich search results. In this tutorial, you'll learn how to implement JSON-LD in a Next.js application using the <Head> component.
Why Use JSON-LD?
- Helps search engines index your site more effectively.
- Enables rich snippets (FAQ, breadcrumbs, business info, etc.).
- Improves visibility and click-through rates in search results.
Step-by-Step Guide to Adding JSON-LD in Next.js
1. Install Next.js (If Not Already Installed)
If you don’t have a Next.js project, create one by running:
npx create-next-app@latest my-nextjs-app
cd my-nextjs-app
npm run dev
2. Add JSON-LD in Your Next.js Page
Next.js provides a built-in <Head> component to manage metadata. We will use this to inject our JSON-LD script dynamically.
**Example: Implementing JSON-LD in **pages/index.tsx
import Head from "next/head";
export default function Home() {
const jsonLd = {
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebSite",
"name": "ared.dev",
"url": "https://ared.dev",
"author": {
"@type": "Person",
"name": "Ajin Varghese Chandy",
"url": "https://ared.dev"
}
},
{
"@type": "WebPage",
"name": "Ajin Varghese Chandy | Web Developer",
"description": "Ajin is a web developer proficient in Next.js, Svelte, Node.js, and Express. He has developed multiple websites and Chrome extensions.",
"url": "https://ared.dev",
"isPartOf": {
"@type": "WebSite",
"url": "https://ared.dev"
}
},
{
"@type": "Person",
"name": "Ajin Varghese Chandy",
"url": "https://ared.dev",
"sameAs": [
"https://github.com/aajinn",
"https://x.com/ChandyAjin"
],
"jobTitle": "Web Developer",
"worksFor": {
"@type": "Organization",
"name": "ared.dev",
"url": "https://ared.dev"
},
"image": {
"@type": "ImageObject",
"url": "https://ared.dev/path-to-your-profile-image.jpg"
}
}
]
};
return (
<>
<Head>
<title>ared.dev | Web Developer</title>
<meta name="description" content="Ajin Varghese Chandy - Web Developer proficient in Next.js, Svelte, Node.js, and Express." />
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
</Head>
<main>
<h1>Welcome to ared.dev</h1>
</main>
</>
);
}
3. Explanation of the Code
-
Head** Component**: Used to add metadata inside<head>. - JSON-LD Object: Defines structured data for the website.
-
dangerouslySetInnerHTML: Injects JSON-LD as a script tag inside<Head>. -
@graph** Property**: Contains multiple schema types (WebSite, WebPage, Person) for better SEO.
4. Validate Your JSON-LD Schema
After adding structured data, test it using:
Final Thoughts
By adding JSON-LD structured data in Next.js, you improve SEO and enhance how your site appears in search results. This method ensures your metadata is dynamically added and up-to-date.
Do you have questions or need further improvements? Let me know! 🚀
Top comments (0)