Posted By
Published Date
Read Time
random code image
Boost your SEO and improve search engine visibility by adding Schema.org markup to your Next.js blog powered by Prismic. This guide provides a clear and concise walkthrough, making it easy to implement structured data for enhanced user experience and search engine optimization.
Schema.org markup provides search engines with a structured understanding of your content, helping them display richer and more informative search results. This can lead to:
Start by defining a TypeScript type to ensure type safety and consistency when working with your schema data. Create a file named schemaData.ts in your src/types directory:
// src/types/schemaData.ts export type SchemaData = { "@context": string; "@type": string; headline: string | null; description: string | null; image: string | null; author: { "@type": string; name: string | null; }; datePublished: string | null; dateModified: string | null; mainEntityOfPage: { "@type": string; "@id": string | null; }; };
Update your blog post page component to fetch data from Prismic and generate the schema data based on the fetched content.
import { Metadata } from "next"; import { notFound } from "next/navigation"; import { SliceZone } from "@prismicio/react"; import { createClient } from "@/prismicio"; import { components } from "@/slices"; import { SchemaData } from "@/types/schemaData"; type Params = { uid: string }; export default async function Page({ params }: { params: Params }) { const client = createClient(); const page = await client .getByUID("blog_post", params.uid) .catch(() => notFound()); const schemaData: SchemaData = { "@context": "https://schema.org", "@type": "BlogPosting", headline: page.data.title || null, description: page.data.summary_content || null, image: page.data.featured_image.url || null, author: { "@type": "Person", name: page.data.author_name || null, }, datePublished: page.data.publication_date || null, dateModified: page.data.last_modified_date || null, mainEntityOfPage: { "@type": "WebPage", "@id": params.uid || null, }, }; return ( <> <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }} /> <SliceZone slices={page.data.slices} components={components} /> </> ); } // ... (rest of the component code)
To prevent potential hydration errors, create a utility function to safely serialize the JSON for the script tag. This ensures that special characters are correctly escaped.
// src/utils/jsonLD.ts export function safeJSONLD(data: any): string { return JSON.stringify(data).replace(/<\/script>/g, '<\\/script>'); }
Update your page component to use the safeJSONLD function when rendering the JSON-LD script.
// ... (import safeJSONLD from "@/utils/jsonLD") export default async function Page({ params }: { params: Params }) { // ... (rest of the component code) return ( <> <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: safeJSONLD(schemaData) }} /> <SliceZone slices={page.data.slices} components={components} /> </> ); }
Ensure that the data returned from the Prismic API matches the SchemaData type, especially the fields used in the schema (title, summary_content, featured_image.url, author_name, publication_date, last_modified_date).
Deploy your updated Next.js application and navigate to a blog post page. Use the browser's developer tools to inspect the rendered HTML and ensure the schema is correctly included as a JSON-LD script tag.
Use Google's Structured Data Testing Tool to validate your structured data and ensure everything is set up correctly. This tool will help you identify any errors or potential issues with your schema markup.
By following these steps, you've successfully added structured data to your Next.js blog posts using Prismic. This will help search engines better understand your content and improve your site's SEO. Remember to regularly validate your structured data to ensure its accuracy and effectiveness.
Additional Tips:
By implementing Schema.org markup, you can significantly improve your blog's visibility and user experience, leading to better SEO results and increased traffic.