In Next.js, you add them through the custom head component. You can either add them on all the pages in the application or customize them for each page.
Adding a Global Head Tag to All the Next.js Pages
Next.js provides _app.js to initialize pages. You can use it to create meta tags shared across all pages.
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.
Adding Meta Tags and Description to a Specific Next.js Page
Static meta tags and descriptions are suitable for pages whose content remains the same, for example, a home page.
Open the file /pages/index.js and modify the head tag with the appropriate title and description.
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 will be available across the whole application or on individual pages.
Adding the title, the viewport width, and the description in the _app.js file ensures all the 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 Title and Descriptions to a Next.js Page
Depending on the use case, you can use getStaticProps(), getStaticPaths() or getServerSideProps() to fetch data in Next.js. This data determines the page’s content. Use it to create the metadata for the page.
For example, creating the metadata for Next.js application that renders blog posts would be tedious.
The recommended way is to create a dynamic page that receives an identifier you can use to fetch the blog content. You can then use this content in the head component.
The getStaticProps function passes the post data to the Post component as props. 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 up the SERPs and attract more visitors to your site.
Apart from the head component, Next.js provides other components like Link and Image. These components are optimized out of the box making it easier to create fast SEO-friendly websites.
