All language subtitles for 001 Title and Meta Tags_en

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".