2 min read
·
0 views
Making SEO better for blog posts with Structured Data
Search engines like Google use structured data to understand the contents of our page better. JSON-LD is a format that most use to describe the data.
Structured Data
Below is an example of a piece of structured data.
{
"@context": "https://json-ld.org/contexts/person.jsonld",
"@id": "http://dbpedia.org/resource/John_Lennon",
"name": "John Lennon",
"born": "1940-10-09",
"spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
}
Source: JSON-LD
Adding Structured Data in Next.js
- Create the following component
StructuredData.jsx
. Here we use the built-in component fromnext/head
to append elements to thehead
of the page.
import Head from "next/head";
const StructuredData = ({ data }) => {
return (
<Head>
<script type="application/ld+json">{JSON.stringify(data)}</script>
</Head>
);
};
export default StructuredData;
- Use the
StructuredData
component in your respective component containing the UI for your post.
const BlogPost = ({ post }) => {
const structuredData = {
"@context": "https://schema.org",
"@type": "Article",
headline: post.title,
description: post.description,
author: [
{
"@type": "Person",
name: post.author,
},
],
image: post.imageUrl,
datePublished: post.publishedAt,
};
};
return (
<>
<Structured data={structuredData} />
{/* ... the rest of your blog post */}
</>
);
Validate Structured Data
Before deploying the changes to production, we can inspect the HTML elements on a browser to see if the changes are reflected in the <head>
section of the page.
Upon successful deployment, we can use the Schema Markup Validator to validate.