Add SEO Friendly headers to your NextJs project.
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@latestNow 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.
https://gist.github.com/debjit/eabdd49f9846e3f33697101d05f3bcd0
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.
https://gist.github.com/debjit/e22308916da3a0c1388df123fecdaf7b
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.
