Open In App

Next.js next/head

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we’ll learn about the Head component in NextJS and see how the head component is SEO friendly.

The Head component is a built-in component provided by NextJS. We can add any element like we were adding in the head component of HTML. If you know HTML and CSS well then NextJS will be easy for you to learn. To keep everything simple they have taken some components like HTML.

Why Head component is SEO friendly?

When it comes to SEO, the Head component plays an important role. The Head component adds elements such as title, meta tags, charset, author, viewport settings, etc. All these tags help to provide information about the website to Google. Google ranks your website by using this information. That is why the Head component is considered SEO friendly.

Steps require to run NextJS and its Head component:

Step 1: NodeJS should be installed on your computer. To learn how to install NodeJS click here.

Step 2: Create a new file and change the directory to the created file. Use the below command in the terminal.

cd file_name

Step 3: Create the Next app using the below command.

npx create-next-app app_name

Project structure: It should look like this.

 

Step 5: Import the head component in pages/index.js

import Head from "next/head";

Example 1: First, let us see what will happen if we do not use the head component: If we don’t use the head component in the index route. We can’t add a title or additional metadata to the route.

Javascript




//Without Head component
import Image from "next/image";
const index = () => {
    return (
        <>
            <h1 style={{ color: 'green' }}>GeeksForGeeks</h1>
            <Image src=
                alt="Loading"
                width={600}
                height={450}
            />
        </>
    );
};
 
export default index;


Output:

 

Note: By default, there is a head component in NextJS, but to add a title and additional metadata we need to define it by ourselves. We can add any element like we were adding in the head component of HTML. The following image shows the default metadata:

 

Use of Head component: Let us understand the Head component by taking examples:

Example 2: Adding a title to the web page using the Head component: The title tag in the head component is reflected in the browser’s title bar. Using this we can add custom tags to our website. If we add a title in the index route only then other pages won’t allow showing that title. We have to define a different title for each different page.

Javascript




//Adding Title by using Head component
import Head from 'next/head'
import Image from "next/image";
const index = () => {
    return (
        <>
            <Head>
                <title>Index Page</title>
            </Head>
            <h1 style={{ color: 'green' }}>
                GeeksForGeeks</h1>
            <Image src=
                alt="Loading"
                width={600}
                height={450}
            />
        </>
    );
};
 
export default index;


Output:

 

Example 3: Adding additional metadata using the Head component: We can add any element like we were adding in the head component of HTML such as title, meta tags, charset, author, viewport settings, favicon, etc. All these tags help to provide information about the website to Google. To clarify in more depth in the following example we have added some elements.

Javascript




import Head from 'next/head'
import Image from "next/image";
const index = () => {
    return (
        <>
            <Head>
                  //Title Name
                <title>Index Page</title>
 
                  //Adding custom favicon
                <link rel="icon" href="/favicon.ico" />
 
                 //Adding additional information about website
                <meta charset="UTF-8" />
                <meta name="description"
                    content="NextJS Head component" />
                <meta name="keywords"
                    content="HTML, CSS, JavaScript, NextJS" />
                <meta name="author"
                    content="Amar Madhekar" />
                <meta name="viewport"
                    content="width=device-width, initial-scale=1.0" />
            </Head>
 
            <h1 style={{ color: 'green' }}>
                GeeksForGeeks</h1>
            <Image src=
                alt="Loading"
                width={600}
                height={450}
            />
        </>
    );
};
 
export default index;


Output:

 



Last Updated : 05 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads