in

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 things a user sees on the SERPS and determine whether they click through to your website. It is therefore important that optimize your website’s titles, meta tags, and description.


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.

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.

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.

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 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.

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 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.



Source link

What do you think?

Written by seo_links_shop

Leave a Reply

Your email address will not be published. Required fields are marked *

GIPHY App Key not set. Please check settings

Westborough Lions hosting Peace Poster, Youth Speech contests

Global Digital Marketing Market Report 2022: Technological Advancements in the Electrical and Electronics Industry Present Opportunities – ResearchAndMarkets.com