The Nextjs head component is a built in component that makes it easy to manage your meta tags, third-party scripts and more. This becomes particularly important when you have hundreds of pages. To load third-party scripts you can also use the Script component which offers multiple different loading strategies. The next head components allows you to manage your the information in the head component across pages and selectively adjust them.
Table of Contents
How to add head in Next.JS?
You can specify the head component as a separate component, and then import it in your Layout component is a wrapper. The layout is then used on all the pages. NextJs will automatically extract your content from the Head component, and inject it into the HTML head tag.
The SEO-friendly head component that is detailed here is specific to NextJS. For different React framework, you can use React Helmet in place of the NextJS head component. If you are new to Next.JS, read our introductory guide: What is Next.js? Why developers love it!
Meta properties
There are a number of elements you can include in the title component. Make sure to include the most important tags.
- The title tag (arguably the most important metadata) should definitely be added to the head. A great, catchy title makes users click on your page in the google search results. The title tag is also used to understand what your page is about.
- Meta description is said to not be used anymore and reportedly no emphasis is placed on it anymore. You can include it but it’s up to you.
- Robots – Robots Tag has instructions for the search engine crawler. For example, follow means that the page will be crawled (no-follow = do not crawl it). No-index means that the page will not be indexed in the search results (even though it was crawled successfully).
- Canonical url – The canonical url points the search engine crawler to the most important version of a webpage should there be multiple copies of it.
The meta tag can be simply added to the head like this:
import Head from 'next/head';
function Index() {
return (
<div>
<Head>
<title>
My first website
</title>
<meta name="description"
content="Check out my new website"
/>
</Head>
<h1>My first website</h1>
</div>
);
}
export default Index;The open graph protocol
The open graph protocol standardized how metadata is structured so that in the event of the page being shared on social media, all metadata is correct.
- Open graph protocol is not important for search engine optimization, but it is important for the correct display on social media platforms. You simply prepend the open graph tag: “og:” to the meta tags in the head component and add all your open graph tags accordingly.
<meta property="og:description"
content="This text here should show up when someone shares the link on social media" />
<meta
property="og:image"
content="https://myfirstwebsite.com/this_is_me.jpg"
/>Structured Data
You can also add further structured data to the head.
- Structured data – For an overview of possible schemas, you can refer to schema.org. Adding schemas to your page is very helpful for indexing by search engines. For example, having a schema for jobs will make your jobs pop up in the google for jobs marketplace (and drive substantial traffic).
const structuredData =
{ '@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'Title of the blog post',
description: 'Description of the blog post',
author: [ { '@type': 'Person', name: 'John Doe', }, ],
datePublished: '2022-09-14T09:00:00.000Z', };
<script
key="structured-data"
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />Common issues with meta properties
It is highly recommended to hard-code or pre-render your meta-data. If your metadata depends on the execution of Javascript, it is likely that search engine bots will not be able to read it on their first pass of your website crawling phase. It’s important that your meta component are SEO friendly. One way is to generate static content or prerender your next app.
It is important to avoid the ‘duplicate title tag’ penalty and a ‘duplicate meta tag’ penalty. This can happen if there’s a title tag already present in the HTML code and another title tag is added by executing javascript code. Having duplicate meta tags can severely impact your search engine results.
Rapid fire questions
What is H2?
An H2 tag is the first sub-heading. Blog and content is broken down into different headings (H1, H2, etc.). H2 tag (much like H1) also appears larger than the rest of your main body text.
What is the difference between head vs h1?
The Head component contains the meta-tags, styles, scripts etc. Headings like H1, H2, etc. allow to break down the text into different parts.
