Part 36: Enhancing Your Next.js Website with Metadata for Better SEO and User Experience
[App] Metadata
Metadata plays a crucial role in how your website is perceived by both users and search engines. By setting appropriate metadata, you can improve user experience, enhance your website's SEO, and ensure that your site is easily recognizable in browser tabs. In this blog post, we will explore how to effectively set metadata in Next.js, focusing on the title and other metadata properties.
Setting Metadata for Individual Pages
Initially, we might set metadata like the title only for the HomePage. This is done by exporting a metadata object from the page component:
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 setting the title in the metadata object, the browser tab will display "Indie Gamer" when you visit the HomePage. However, this title will not apply to other pages like the About page or the Reviews page, which will still show the URL in the tab name.
Setting Default Metadata in RootLayout
To avoid setting metadata individually for each page, we can move the metadata object to the RootLayout. This way, the metadata will apply to all pages by default. Here's how you can do it:
Moving Metadata to RootLayout
First, remove the metadata from the HomePage:
// app/page.jsx
import Heading from '@/components/Heading';
import { getFeaturedReview } from '@/lib/reviews';
export default async function HomePage() {
const review = await getFeaturedReview();
console.log('[HomePage] rendering');
return (
<div>
<Heading />
{/* Render the featured review */}
</div>
);
}Next, add the metadata to the RootLayout:
// app/layout.jsx
import { exo2, orbitron } from './fonts';
import './globals.css';
export const metadata = {
title: {
default: 'Indie Gamer',
template: '%s | Indie Gamer',
},
};
export default function RootLayout({ children }) {
return (
<html lang="en" className={`${exo2.variable} ${orbitron.variable}`}>
<body>{children}</body>
</html>
);
}By doing this, the HomePage will have a title again, and this time, so will the About page and the Reviews page. They will all display "Indie Gamer" as the title by default.
Customizing Titles for Specific Pages
While it's convenient to have a default title, some pages might need more specific titles. You can override the default title by exporting a metadata object from those specific pages:
Customizing the About Page Title
// app/about/page.jsx
import Heading from '@/components/Heading';
export const metadata = {
title: 'About',
};
export default function AboutPage() {
return (
<div>
<Heading />
{/* About page content */}
</div>
);
}When you visit the About page, the title will now display as "About | Indie Gamer". This is because the title property in the metadata object of the About page overrides the default title set in the RootLayout.
Using a Template for Titles
To avoid duplicating the website name in each page's title, Next.js allows you to define a template. Instead of setting the title as a string, you can use an object that includes a default value and a template property:
// app/layout.jsx
export const metadata = {
title: {
default: 'Indie Gamer',
template: '%s | Indie Gamer',
},
};In this template, %s acts as a placeholder for the page-specific title. When you set a custom title in a page's metadata, it will be inserted into this template.
Example: Customizing the Reviews Page Title
// app/reviews/page.jsx
import Heading from '@/components/Heading';
import { getReviews } from '@/lib/reviews';
export const metadata = {
title: 'Reviews',
};
export default async function ReviewsPage() {
const reviews = await getReviews();
return (
<div>
<Heading />
{/* Render the list of reviews */}
</div>
);
}When you visit the Reviews page, the title will display as "Reviews | Indie Gamer", thanks to the template defined in the RootLayout.
Conclusion
Setting metadata, especially the title, is essential for both user experience and SEO. By leveraging Next.js's metadata features, you can easily set default values and customize them for specific pages. Using a title template helps maintain consistency and ensures that your website name is always included in the page titles.
By following these practices, you can make your website more user-friendly and improve its visibility on search engines. Happy coding!
Last updated