Making Metadata Work in Your Next.js Application

Metadata in Your Next.js Application - Some SEO Goodness!

1import type {Metadata} from "next";
2    
3export default async function Page() {
4    
5    export const metadata: Metadata = {
6        title: 'Making Metadata Work in Your Next.js Application  - Next.js',
7        description: 'Next.js 14 does metadata differently, here&apos;s a rundown on how to do it easily',
8        keywords: ['Metadata in Next.js', 'SEO in Next.js', 'Next.js code']
9    }
10    return (
11    <>
12        Your page content goes here.
13    </>
14    )
15}

Next.js 14 does SEO and metadata a little differently than past versions did.

There's some detailed docs on Vercel's site about using the Metadata object in Layout.tsx and even on how to use a single Metadata object at your application's root level for all of your site's content. Here I demonstrate how to apply custom metadata values for each page - at the page level - that will be properly displayed in your application's <Head> tag.

You have to import the Metadata object from Next at the top of your file and then express it within your component by applying the specific details about the title, description and keywords attributes (see above). Don't forget the keywords attribute requires you to add your list of words as a comma delimited list within an array, for example "['keyword1','keyword2','keyword3' etc]"

Summary: The above metadata object can be inserted onto each page where you want the corresponding meta tags to appear. Even though they aren't directly scripted into the head tag of your application they will be parsed at build time so that they render correctly in the browser. Vercel actually built out an effective metadata "system" whereby each layout in your application can apply a unique set of metadata values and all pages under that layout can optionally inherit (or override) values as needed. RTFM!