How to Add SEO-Friendly Headers to a Next.js Website
Page titles, meta tags and meta descriptions are important for SEO. They are the first thing a user sees in the SERPS and determines whether they click through to your website. It is therefore important that you optimize your website’s titles, meta tags and description.
In Next.js you add them via the custom head component. You can either add them to all pages of the application or customize them for each page.
Adding a global head tag to all Next.js pages
Next.js provides _app.js to initialize pages. You can use it to create meta tags that will be shared across 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 component in the app component.
Adding meta tags and description to a specific Next.js page
Static meta tags and descriptions are useful for pages whose content stays the same, such as a home page.
Open the /pages/index.js file and change 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 appending elements to the head tag of an HTML page. Depending on where you place this component, the meta tags and description are available throughout the application or on individual pages.
Adding the title, viewport width, and description in 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 use dynamic content.
Adding dynamic meta title and descriptions to a Next.js page
Depending on your use case, you can use getStaticProps(), getStaticPaths(), or getServerSideProps() to get data in Next.js. This data determines the content of the page. Use it to create the metadata for the page.
For example, it would be tedious to create the metadata for the Next.js application that renders blog posts.
The recommended method is to create a dynamic page that is given an identifier that you can use to fetch the 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 the post data as props to the post component. The Post component destructures the title, description, and content from the props. The head component then uses the title and description in the 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-friendly headers, climb the SERPs, and drive more traffic to your website.
In addition to the head component, Next.js offers other components such as link and image. These components are ready to use and make it easy to create fast SEO-friendly websites.