Add SEO Friendly headers to your NextJs project.

Debjit Biswas
2 min readApr 7, 2022


Adding SEO is pretty easy with the next js head tag. The key-value pair let you define default values and page-specific values.

Let's start with creating a new NextJS project

npx create-next-app@latest

Now we needed to add the language of our website inside the next.config.js file. This will add <html lang=”en”> lang tags for SEO.

i18n: {
locales: ["en"],
defaultLocale: "en",

Now we prepare the “_app.js” file to use NextJS head built-in component. Here is the code I used for adding some SEO, you can use better keywords.

The key is very important if you wanted to use different content for a separate page. Key avoids duplication of your content and ranks SEO better.

Now it is time to add SEO to our index page. Add “next/head” as Head and define your meta tags inside the component and that's it, lets's add some meta tags.

Here is the code for the index file.

So now any page you add just add your desired meta tags with a key to replace and all your pages will have default meta tags to work with.

You don't need any keys for unique keys if you are not replacing them. The Key is to stop rendering duplicate tags.

Update: 28–04–2022: Language tag inside HTML.



Debjit Biswas

I am a Web Developer. I love to do experiments and share my journey with you. Please follow me for more posts. Go to for more info.