Improperly configured website metadata can cause drastic issues in user experience and website discoverability.
It’s important to not only understand what metadata is, but how it’s used by the greater internet, and how to configure it in your Next.js application. Next.js offers a number of different options when it comes to setting metadata, and the best option depends on the version of the framework you are using, and the way you are using it to generate pages for your visitors.
In this article, you'll learn the various ways you can customize and optimize your Next.js website's metadata to improve its SEO and user experience, as well as suggestions on when to use each approach.
How is metadata used?
Wikipedia defines metadata as "data that provides information about other data".
In the context of websites, metadata refers to the invisible data that describes the content of a website. This metadata is used by search engines, social media platforms, and other web services to understand the structure, content, and meaning of your website.
Depending on the configuration, missing or incorrect metadata can actively hurt the performance of your website. Here are some ways metadata is used:
- Search engine optimization (SEO): Search engines use metadata to determine the relevance of your webpage for specific searches, as well as how those search engines rank a specific web page. The more accurate and defined the metadata is, the better a search engine will know to serve it when it matches a query.
- Social media sharing: Social media platforms use Open Graph metadata to display your website's content in their feeds, such as Facebook, Twitter, and LinkedIn. This is the information that's used to show stylized cards when a link is pasted in.
- Content discovery: Metadata helps users discover content that matches their interests and preferences.
- Rich snippets: Search engines can extract structured data from your website to display rich snippets in search results. Below is an example of rich snippets that are displayed with a movie to show ratings:
What problems can occur with misconfigured metadata?
A number of issues can arise when metadata is not configured correctly.
For instance, poorly configured metadata can lead to lower search rankings, making it less likely users will find your website (e.g. ranking outside of the first search engine results page (SERP). This can be extremely detrimental to websites that thrive from organic traffic such as online shops. Furthermore, inaccurate or misleading metadata can damage a website's reputation and credibility, leading users to question the trustworthiness of its content.
Broken links and 404 errors can occur when metadata is incorrect or missing, creating a poor user experience. Other issues that create a poor user experience include incomplete page titles, descriptions, or images, duplicate content issues, inconsistent branding across different pages or sections, mobile usability issues, which increase the likelihood of users abandoning if errors or inconsistencies are encountered.
By properly setting up your metadata, you can avoid these problems and create a better experience for your users.
How does Next.js handle metadata by default?
By default, Next.js includes basic metadata such as the page title, character set, and viewport settings in the HTML head section of each page. The following is the HTML head of a newly generated Next.js project:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="next-size-adjust" content="" />
<!-- script and link tags removed for brevity -->
</head>
However, this default behavior does not provide any specific metadata for SEO or social media optimization. You’ll want to add your own metadata for the application, and often on a per-page basis.
How to customize metadata in Next.js
Next.js offers several solutions for customizing metadata depending on the application's needs.
Using next/head
The first approach uses the built-in next/head component that can include Open Graph tags, Twitter cards, and other relevant metadata. This allows you to tailor your metadata to specific pages or routes, giving you more control over how your content is presented in search results and social media platforms.
import Head from 'next/head'
export default function Home() {
return (
<>
<Head>
<title>My Custom Title</title>
<meta name="description" content="This is my custom description for SEO." />
<meta name="keywords" content="Next.js, metadata, SEO" />
<meta property="og:title" content="My Custom Title" />
<meta property="og:description" content="Open Graph description for sharing." />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1>Welcome to My Page</h1>
</main>
</>
)
}
This approach is primarily used for client-side components where the head of the page needs to be changed dynamically based on the client interaction. For example, if you need to update the title or favicon of a tab in the browser.
Exporting the metadata object
In versions of Next.js that use the App Router, you may also define the page metadata by exporting a variable aptly named metadata. This lets you define your metadata in a structure:
// app/page.tsx
export const metadata = {
title: 'Clerk | Authentication and User Management',
description:
'The easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and “The Modern Web”.',
keywords: ['Next.js', 'Authentication', 'User Management'],
openGraph: {
title: 'Clerk',
description: 'The best user management and authentication platform.',
url: 'https://clerk.com',
},
}
// Code removed for brevity...
If you want to apply the same values across multiple pages, you can also export metadata from a layout file as well. This would apply the metadata to any child route of that layout.
Using this approach is best suited for pages with metadata that does not change frequently.
Generating metadata dynamically
Finally, if you are generating metadata values on page load, you can use the generateMetadata() function to dynamically set the values. This is used in situations where a page template renders differently depending on the data that's loaded into it.
Using a blog as an example, there is typically one page template that's used to render every post, with the post slug being passed in as a page parameter. The following snippet demonstrates how this approach works. The slug is used to fetch the data for the post from an API before generating the metadata for that page:
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
const res = await fetch(`/api/posts/${params.slug}`)
const post = await res.json()
return {
title: post.title,
description: post.summary,
openGraph: {
title: post.title,
description: post.summary,
url: `https://clerk.com/blog/${params.slug}`,
images: [{ url: post.image }],
},
}
}
export default function BlogPost({ params }) {
return <h1>Blog Post: {params.slug}</h1>
}
Any place where the page is generated dynamically based on a data source would use this method.
Next.js metadata inheritance
When customizing Next.js metadata, you don't need to specify the same values in all routes.
Next.js will automatically apply inheritance rules from the parent route to any child route if they are not defined. Using the blog example, if the root of the website has the following metadata defined in the topmost layout file:
export const metadata = {
title: 'Clerk | Authentication and User Management',
description:
'The easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and “The Modern Web”.',
keywords: ['Next.js', 'Authentication', 'User Management'],
openGraph: {
title: 'Clerk',
description: 'The best user management and authentication platform.',
url: 'https://clerk.com',
},
}
And also has this function that generates metadata for blog posts:
export async function generateMetadata({ params }) {
const res = await fetch(`/api/posts/${params.slug}`)
const post = await res.json()
return {
title: post.title,
description: post.summary,
openGraph: {
title: post.title,
description: post.summary,
url: `https://clerk.com/blog/${params.slug}`,
},
}
}
The keywords value would still be set on the blog post even though it is not explicitly defined in the generateMetadata function. This is because child metadata overwrites parent metadata, but only if a value is present.
Conclusion
As you've learned throughout this guide, customizing metadata in Next.js can have a significant impact on user experience and how search engines rank your website. By understanding how to define and generate metadata dynamically, you'll be able to create a seamless and informative experience for your visitors.
Leverage a user management system designed to easily integrate with your Next.js application. Learn more
Top comments (0)