Next.js SEO
To improve the SEO of our pages, we should add some meta tags and the title of the page and inject them into the page. This can be done via the Head component provided by Next.js.
For the application, we want to have a dedicated component where we can add the title of the pages. Let’s open the src/components/seo/seo.tsx file and add the following:
import Head from 'next/head';
export type SeoProps = {
title: string;
};
export const Seo = ({ title }: SeoProps) => {
return (
<Head>
<title>{title}</title>
</Head>
);
};
The Head component will inject its content into the head of the page. For now, the title will suffice, but it can be extended to add different meta tags if needed.
Let’s add the Seo component to our landing page at src/pages/index.tsx.
First, let’s import the component...