With the featured review displayed
on the HomePage,
our website is almost ready to go live.
But there are still a few details
we want to sort out.
For a start, our pages are missing a title.
You can see that the browser
tab just displays the URL,
because there's no "title" tag on this document.
Let's use the Chrome Developer
Tools to inspect the Elements.
If we look at the document "head"
there is no "title" tag inside here.
So, let's see how we can set a title for our page.
Since it goes inside the "head"
of the HTML document,
we cannot 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 were we can set additional
properties for this page.
And one of these properties
is in fact the "title".
Let's set it to "Indie Gamer",
that's the name of our website.
And if we save,
we can see that the browser shows
"Indie Gamer" as the tab name.
That value is set based on the "title"
tag in the document "head".
You can see that we do have a "title" tag now.
And, by the way, this will also
be used by search engines
when indexing our pages.
It's important to set a "title" on each page,
for Search Engine Optimization.
Now, the "metadata" object can contain
other properties as well,
such as a "description" for example.
This is another value that will
be used by search engines.
I'll just copy the tagline as the description.
And if we save this change,
we'll need to look at the HTML elements to see it,
but here's the "meta" tag with the "description".
You can see that the "content" attribute has
the value we set in our code.
Now, 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.
To keep things simple,
we'll only set the "title" in our pages.
But you can check the Next.js documentation
to see all the possible properties
you can set in the "metadata".
Many of them are useful for SEO,
like the "keywords" meta tag for example.
Others, like the "colorScheme",
allow us to customize the appearance of our app.
This example is not the full list,
there are actually many more fields you can set.
Another useful one is "openGraph" for example.
This is used if somebody posts a link
to your website on Facebook,
or other social networks.
The "openGraph" properties will be
used to generate a preview card
for the page shared as a link.
Here you can include things like
an image and a description.
"openGraph" also works for Twitter,
although Twitter also has its own slightly
different way of doing the same thing,
which is why there's a separate
property for "twitter" here.
Anyway, I won't go through all the possible
metadata configuration options,
because there are just too many of them.
But you can check this page if you're interested.
Some of the properties are standard meta tags,
defined by the HTML specification,
like "keywords", that I mentioned earlier.
And many of these are used by search engines.
So, if you want to improve the
chances of your website
showing up in Google's search results for example,
you can read this page where it explains
which meta tags are supported by Google.
You'll find the link in this lecture's Resources.
But, at a minimum, we should
set a "title" on each page,
and we can do that by exporting
this "metadata" object.
The way I think of it is that
"metadata" here really means "meta tags",
and other tags that go in the document "head",
like the "title".