How to Add SEO Optimized Headers to a Next.js Website

Page titles, meta tags, and meta descriptions are important for SEO. These are the first things a user sees on the SERPS and determine whether they click through to your website. It is therefore important to optimize the titles, meta tags and description of your website.


In Next.js, you add them through the custom head component. You can either add them on all pages of the app or customize them for each page.


Added a global header tag to all Next.js pages

Next.js provides _app.js to initialize pages. You can use it to create shared meta tags on all pages.

import '../styles/globals.css'
import Head from 'next/head'

function MyApp({ Component, pageProps }) {
return <>
<Head>
<meta name="author" content="John Doe"/>
</Head>
<Component {...pageProps} />
</>
}

export default MyApp

If you want a page to have a custom title and description, add the head component to it and Next.js will use it instead of the default one in the App component.

Add Meta tags and description to a specific Next.js page

Meta static tags and descriptions are suitable for pages whose content remains the same, for example a home page.

Open the /pages/index.js file and modify the head tag with the appropriate title and description.

import Head from "next/head";

const Home= () => {
return (
<>
<Head>
<title>Blog</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name='description' content='Programming Articles'/>
</Head>
<main>
<h1>Welcome to my blog!</h1>
</main>
</>
);
};

export default Home;

You access the Head component by importing it from next/head. It works by adding elements to the head tag of an HTML page. Depending on where you place this component, the meta tags and description will be available throughout the application or on individual pages.

Adding the title, viewport width, and description to the _app.js file ensures that all pages have the same metadata.

This page has static content, but sometimes you may want to create pages that consume dynamic content.

Adding dynamic meta titles and descriptions to a Next.js page

Depending on the use case, you can use getStaticProps(), getStaticPaths(), or getServerSideProps() to retrieve data in Next.js. This data determines the content of the page. Use it to create page metadata.

For example, creating metadata for the Next.js application that renders blog posts would be cumbersome.

The recommended way is to create a dynamic page that receives an ID that you can use to retrieve blog content. You can then use this content in the head component.

import { getAllPosts, getSinglePost } from "../../utils/mdx";
import Head from "next/head";

const Post = ({ title, description, content }) => {
return (
<>
<Head>
<title>{title}</title>
<meta name="description" content={description} />
</Head>
<main>{/* page content */}</main>
</>
);
};

export const getStaticProps = async ({ params }) => {
const post = await getSinglePost(params.id, "posts");

return {
props: { ...post },
};
};

export const getStaticPaths = async () => {
const paths = getAllPosts("posts").map(({ id }) => ({ params: { id } }));

return {
paths,
fallback: false,
};
};

export default Post;

The getStaticProps function passes post data to the Post component as props. The Post component deconstructs the title, description, and content of the props. The main component then uses the title and description in meta tags.

Next.js is an optimized framework

You just learned how to use the head component to add meta titles and descriptions to a Next.js project. Use this knowledge to create SEO-optimized headers, climb the SERPs, and drive more visitors to your site.

Apart from the main component, Next.js provides other components like Link and Image. These components are optimized from the start, making it easy to build fast, SEO-optimized websites.

Comments are closed.