Make your own reusable Next.js / React basic seo component for your article.
The creation of a reusable Next.js component for SEO, specifically for blog posts and articles, is covered in this tutorial. It explains how to set up a Next.js project, develop the component, and provides advice for boosting SEO in Next.js projects.
I suggest you look at this easy SEO implementation for straightforward, search engine-friendly headers here.
When developing a Next.js website or application, it is essential to optimise your pages for search engines (SEO). Your pages could rank better in search results with proper SEO, which could bring in more visitors and possibly more business. One way to make managing SEO easier is by creating reusable components that can be used on multiple pages.
In this tutorial, we’ll go through how to build a reusable Next.js component for SEO that’s tailored to blog posts and articles. We will go over how to build a Next.js project, how to construct a component, and how to optimise SEO in Next.js projects. Let’s get going!
Install Next.js
Open a terminal and go to the directory where you want to build the project in order to start a new Next.js project. Run the command after that:
npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-appThis will build a new Next.js project with the most recent version of Next.js. Give your project a name and make any other necessary selections by following the prompts.
Now we will set the default language for the project. We will use the “pages/_document.js” file to add our <Html lang="en"> on every page. This will add the lang attribute with the value of "en" to the html element on the page’s HTML. If needed, you can choose another language code. You can read more here.
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}Let’s create the reusable component
Now that we have our Next.js project set up, we can create our reusable component. Make a new file called Seo.js in the components directory of your project’s directory. components/Seo.js will be the complete path.
In the Seo.js file, we need to import the Head component from next/head:
The Head component is built-in to Next.js and is used to add metadata to the page. We will use it to add various SEO tags to our pages. Let’s create a function that returns the metatags property and content.
The Seo Components function accepts an object as input, which consists of properties and corresponding content. It returns all the meta tags that are placed within the head tag, using the properties and content from the input object to populate the meta tags.
import Head from 'next/head'
import React from 'react'
export default function Seo({fields}) {
return (
<Head>
{Object.entries(fields).map(([property, value]) => {
return <meta key={property} property={property} name={property} content={value} />;
})}
</Head>
)
}In this code, we are using the Object.entries() function to convert the fields of the object into an array. We are then iterating through the array, destructure each element into its property and value, and creating a meta tag using this. The resulting meta tags are returned as the output. Please know key is very important, it prevent any duplicate meta entry for same key.
To use the Seo function on our home page, we need to import it and provide the object it requires into our index.js file. We will create a constant called “seoFields” that contains some demo tags for testing purposes.
Now, our index page should look like this:
Now we need to save and run to check if it is working. Our work is not done yet. Run the following into your command prompt and go to the url.
yarn devAs a result of integrating the Seo function and seoFields object into our home page, all meta tags are populated with the data from seoFields. Our site is now SEO aware. However, we may need to add additional meta tags with the same property but different values, such as tags, authors, and canonical links, to further optimize our site for search engines.
In order to improve the search engine's understanding of our site, we can add canonical links to our meta tags. These links point to the main platform where an article is posted, and can help search engines understand if a piece of content has been duplicated across multiple platforms. This can be especially useful if you post your blogs on multiple platforms.
We simply check whether the property is canonical and return this link if it is. Really easy. Now our Seo.js looks like this.
import Head from 'next/head'
import React from 'react'
export default function Seo({fields}) {
return (
<Head>
{Object.entries(fields).map(([property, value]) => {
if(property === "canonical"){return <link key="canonical" rel="canonical" href={value} />}
return <meta key={property} property={property} name={property} content={value} />;
})}
</Head>
)
}Output:
Some tags and auther, have the same property but different content or values. This functionality must be added as well.
import Head from 'next/head'
import React from 'react'
export default function Seo({fields}) {
return (
<Head>
{Object.entries(fields).map(([property, value]) => {
if(property === "canonical"){return <link key="canonical" rel="canonical" href={value} />}
if (Array.isArray(value)) {
return value.map((val, index) => (
<meta
key={`${property}-${index}`}
property={property}
name={property}
content={val}
/>
));
}
return <meta key={property} property={property} name={property} content={value} />;
})}
</Head>
)
}In this code, we are checking if the value associated with a property is an array. If it is, we iterate through the array and create multiple meta tags with the same property and one value for each element in the array. This allows us to include multiple values for a single property in our meta tags. For input, we provide the content as an array. So here is what our input object looks like:
const seoFields = {
canonical:"/example.com/demo",
keywords: "HTML, CSS, JavaScript",
"article:published_time": "25 Dec 2022",
"article:modified_time": "25 Dec 2022",
"og:image": "./varcel.svg",
"og:title": "Next.js Seo Components",
"og:description": "Next.js Seo Components",
"og:image:width": "850",
"og:image:height": "650",
"twitter:creator": "@handle",
"twitter:card": "summary_large_image",
"twitter:site": "summary_large_image",
tags: ["tag1", "tag2", "tag3"],
author: ["Debjit Biswas", "D Biswas"],
};Output:
For an article, I use these SEO tags. Please configure to your needs and conduct additional research before deploying this on a production site.
const post ={
//post contains all the details and coming from api server,
// replace with yoru own
}
const seoFields = {
title: post.title,
description: post.description,
keywords: "HTML, CSS, JavaScript",
canonical: post.canonical,
"article:tag": post.tags,
"article:published_time": post.published_time,
"article:modified_time": post.modified_time,
"article:expiration_time": post.expiration_time,
"article:author": post.author,
"og:url": post.url,
"og:type": post.type,
"og:image": post.ogImage,
"og:title": post.title,
"og:description": post.description,
"og:image:width": "850",
"og:image:height": "650",
"twitter:creator": "@handle",
"twitter:card": "summary_large_image",
"twitter:site": "summary_large_image",
};For more articles, please follow me. Thank you.
Here is the Github Repo Code.
