Part 35: Setting Up Metadata in Next.js for Better SEO and User Experience
[App] Metadata
With the featured review displayed on the HomePage, our website is almost ready to go live. However, there are still a few details we need to sort out. One important detail is setting the page title and other metadata, which are crucial for both user experience and search engine optimization (SEO).
Why Metadata Matters
When you visit a website, the browser tab displays a title. This title is not just for aesthetics; it's also used by search engines when indexing your pages. If you inspect your page using Chrome Developer Tools and look at the document's <head>, you might find that there's no <title> tag. Without a title, the browser tab just displays the URL, which is not user-friendly.
Setting the Title in Next.js
Since the title goes inside the <head> of the HTML document, we can't simply add it to the existing JSX elements because those are rendered inside the <body> of the document. Instead, when using Next.js with the App Router, we can export a constant called metadata. This is an object where we can set additional properties for the page, including the title.
Here's how you can set the title for your Next.js page:
import Heading from '@/components/Heading';
import { getFeaturedReview } from '@/lib/reviews';
export const metadata = {
title: 'Indie Gamer',
};
export default async function HomePage() {
const review = await getFeaturedReview();
console.log('[HomePage] rendering');
return (
<div>
<Heading />
{/* Render the featured review */}
</div>
);
}By exporting the metadata object with a title property, Next.js will automatically set the title tag in the document's <head>. If you save and refresh the page, you will see "Indie Gamer" as the tab name.
Adding More Metadata
The metadata object can contain other properties as well, such as description, which is another value used by search engines. Here's an example of adding a description:
export const metadata = {
title: 'Indie Gamer',
description: 'Your go-to source for indie game reviews and news.',
};If you save this change and inspect the HTML elements, you will see a <meta> tag with the description attribute:
<meta name="description" content="Your go-to source for indie game reviews and news.">Other Useful Metadata Properties
There are a number of <meta> tags you can set on a page, and there's a corresponding property in the metadata object for each one of them. Here are a few examples:
Open Graph Metadata
Open Graph metadata is used to generate a preview card when someone shares your website link on social networks like Facebook and Twitter. Here's how you can set Open Graph properties:
export const metadata = {
title: 'Indie Gamer',
description: 'Your go-to source for indie game reviews and news.',
openGraph: {
title: 'Indie Gamer',
description: 'Your go-to source for indie game reviews and news.',
url: 'https://indiegamer.com',
type: 'website',
images: [
{
url: 'https://indiegamer.com/images/og-image.jpg',
width: 800,
height: 600,
alt: 'Indie Gamer Logo',
},
],
},
};Twitter Metadata
Twitter has its own set of metadata properties. Here's how you can set them:
export const metadata = {
title: 'Indie Gamer',
description: 'Your go-to source for indie game reviews and news.',
twitter: {
card: 'summary_large_image',
site: '@indiegamer',
title: 'Indie Gamer',
description: 'Your go-to source for indie game reviews and news.',
image: 'https://indiegamer.com/images/twitter-image.jpg',
},
};Additional Metadata Properties
There are many more metadata properties you can set, such as keywords for SEO or colorScheme to customize the appearance of your app. For a full list of metadata options, you can refer to the Next.js documentation.
Conclusion
Setting metadata like the title and description is crucial for both user experience and SEO. By using the metadata object in Next.js, you can easily add these important tags to your pages. This not only improves the user experience by providing meaningful titles in browser tabs but also enhances your website's visibility on search engines.
At a minimum, make sure to set a title on each page, but consider adding other metadata properties to fully optimize your website for search engines and social media sharing.
Happy coding!
Last updated