[Maximilian Schwarzmüller] So how can you add metadata
to NextJS pages?
Well, the most straightforward way of adding metadata
is to go to a page where you want to add it
and typically, you should add metadata to all your pages
and then in that page.js file,
you export a constant called metadata
and it must be called metadata
and it must be in a page.js file or a layout.js file,
as you will see soon, and it must be exported.
Now this metadata constant then should hold an object,
and that object can hold a couple of different properties
that you can configure.
Most importantly, you can set a title
and a description property here.
And the title property will determine the page title,
which for example, also will show up here in your tabs,
but which will also show up
when your page is displayed as a search result
on Google, for example.
So here for this page where I display my latest posts,
the title could, for example, be latest posts.
The description then is some metadata text,
which for example, shows up here below the title
when your page is displayed in search results.
So here we could say, browse our latest posts.
With that, if you then save that
and you load the page where you added the metadata,
in my case, the starting page here,
you'll see that the title is indeed reflected
here in the tab and you can also see
that metadata text you added that description text
if you go to the head tag of the loaded page.
And then there you should see that description meta element,
which contains that description text
and that's the text that, for example,
would show up in search results.
Now, you can also add more fields than just title
and description to this exported metadata object
and your official metadata fields reference page
holds all the details about that
and shows you all the different values
and fields you can add here
and attached you find a link to that document.
You can, for example, also add a open graph setting
to this metadata object, which controls the metadata
that will be used when you share a page on X or Facebook.
So for example, you can control which image will be shown
as a preview if you share a link to your page and so on.
So these are all settings you can set up
on that metadata object,
which is exported with that metadata constant.