1
00:00:03,000 --> 00:00:05,304
With the featured review displayed

2
00:00:05,304 --> 00:00:06,388
on the HomePage,

3
00:00:06,456 --> 00:00:09,773
our website is almost ready to go live.

4
00:00:09,773 --> 00:00:12,170
But there are still a few details

5
00:00:12,170 --> 00:00:13,623
we want to sort out.

6
00:00:13,696 --> 00:00:17,176
For a start, our pages are missing a title.

7
00:00:17,176 --> 00:00:19,106
You can see that the browser

8
00:00:19,106 --> 00:00:20,899
tab just displays the URL,

9
00:00:20,968 --> 00:00:24,414
because there's no "title" tag on this document.

10
00:00:24,414 --> 00:00:26,468
Let's use the Chrome Developer

11
00:00:26,468 --> 00:00:28,522
Tools to inspect the Elements.

12
00:00:28,591 --> 00:00:30,680
If we look at the document "head"

13
00:00:30,791 --> 00:00:33,525
there is no "title" tag inside here.

14
00:00:33,525 --> 00:00:37,386
So, let's see how we can set a title for our page.

15
00:00:37,386 --> 00:00:39,766
Since it goes inside the "head"

16
00:00:39,766 --> 00:00:41,379
of the HTML document,

17
00:00:41,455 --> 00:00:43,281
we cannot simply add it to

18
00:00:43,281 --> 00:00:45,107
the existing JSX elements,

19
00:00:45,177 --> 00:00:47,504
because those are rendered inside

20
00:00:47,504 --> 00:00:49,409
the "body" of the document.

21
00:00:49,479 --> 00:00:53,287
Instead, when using Next.js with the App Router,

22
00:00:53,287 --> 00:00:56,874
we can export a constant called "metadata".

23
00:00:56,874 --> 00:00:59,782
This is an object were we can set additional

24
00:00:59,782 --> 00:01:01,435
properties for this page.

25
00:01:01,501 --> 00:01:03,326
And one of these properties

26
00:01:03,326 --> 00:01:04,881
is in fact the "title".

27
00:01:04,949 --> 00:01:07,224
Let's set it to "Indie Gamer",

28
00:01:07,229 --> 00:01:09,171
that's the name of our website.

29
00:01:09,171 --> 00:01:10,418
And if we save,

30
00:01:11,151 --> 00:01:13,560
we can see that the browser shows

31
00:01:13,560 --> 00:01:15,749
"Indie Gamer" as the tab name.

32
00:01:15,822 --> 00:01:18,579
That value is set based on the "title"

33
00:01:18,579 --> 00:01:20,538
tag in the document "head".

34
00:01:20,610 --> 00:01:24,053
You can see that we do have a "title" tag now.

35
00:01:24,053 --> 00:01:26,215
And, by the way, this will also

36
00:01:26,215 --> 00:01:27,959
be used by search engines

37
00:01:28,029 --> 00:01:30,093
when indexing our pages.

38
00:01:30,093 --> 00:01:33,337
It's important to set a "title" on each page,

39
00:01:33,337 --> 00:01:35,571
for Search Engine Optimization.

40
00:01:35,643 --> 00:01:38,325
Now, the "metadata" object can contain

41
00:01:38,325 --> 00:01:40,088
other properties as well,

42
00:01:40,159 --> 00:01:43,013
such as a "description" for example.

43
00:01:43,013 --> 00:01:45,182
This is another value that will

44
00:01:45,182 --> 00:01:47,001
be used by search engines.

45
00:01:47,071 --> 00:01:50,176
I'll just copy the tagline as the description.

46
00:01:50,176 --> 00:01:51,986
And if we save this change,

47
00:01:52,236 --> 00:01:55,689
we'll need to look at the HTML elements to see it,

48
00:01:55,689 --> 00:01:59,069
but here's the "meta" tag with the "description".

49
00:01:59,069 --> 00:02:01,924
You can see that the "content" attribute has

50
00:02:01,924 --> 00:02:04,024
the value we set in our code.

51
00:02:04,024 --> 00:02:06,340
Now, there are a number of "meta"

52
00:02:06,340 --> 00:02:08,234
tags you can set on a page,

53
00:02:08,304 --> 00:02:10,651
and there's a corresponding property

54
00:02:10,651 --> 00:02:12,216
in the "metadata" object

55
00:02:12,282 --> 00:02:13,717
for each one of them.

56
00:02:13,717 --> 00:02:15,327
To keep things simple,

57
00:02:15,327 --> 00:02:18,451
we'll only set the "title" in our pages.

58
00:02:18,451 --> 00:02:21,489
But you can check the Next.js documentation

59
00:02:21,489 --> 00:02:23,729
to see all the possible properties

60
00:02:23,729 --> 00:02:25,705
you can set in the "metadata".

61
00:02:25,771 --> 00:02:28,618
Many of them are useful for SEO,

62
00:02:28,618 --> 00:02:31,856
like the "keywords" meta tag for example.

63
00:02:31,856 --> 00:02:34,212
Others, like the "colorScheme",

64
00:02:34,212 --> 00:02:37,767
allow us to customize the appearance of our app.

65
00:02:37,767 --> 00:02:40,458
This example is not the full list,

66
00:02:40,458 --> 00:02:43,545
there are actually many more fields you can set.

67
00:02:43,545 --> 00:02:47,554
Another useful one is "openGraph" for example.

68
00:02:47,554 --> 00:02:50,542
This is used if somebody posts a link

69
00:02:50,542 --> 00:02:52,803
to your website on Facebook,

70
00:02:52,884 --> 00:02:54,849
or other social networks.

71
00:02:54,849 --> 00:02:57,343
The "openGraph" properties will be

72
00:02:57,343 --> 00:02:59,617
used to generate a preview card

73
00:02:59,690 --> 00:03:02,077
for the page shared as a link.

74
00:03:02,077 --> 00:03:04,239
Here you can include things like

75
00:03:04,239 --> 00:03:06,062
an image and a description.

76
00:03:06,130 --> 00:03:08,794
"openGraph" also works for Twitter,

77
00:03:08,794 --> 00:03:11,649
although Twitter also has its own slightly

78
00:03:11,649 --> 00:03:14,233
different way of doing the same thing,

79
00:03:14,301 --> 00:03:16,307
which is why there's a separate

80
00:03:16,307 --> 00:03:18,119
property for "twitter" here.

81
00:03:18,183 --> 00:03:21,157
Anyway, I won't go through all the possible

82
00:03:21,157 --> 00:03:23,300
metadata configuration options,

83
00:03:23,370 --> 00:03:25,973
because there are just too many of them.

84
00:03:25,973 --> 00:03:28,732
But you can check this page if you're interested.

85
00:03:28,732 --> 00:03:32,440
Some of the properties are standard meta tags,

86
00:03:32,440 --> 00:03:35,423
defined by the HTML specification,

87
00:03:35,423 --> 00:03:38,314
like "keywords", that I mentioned earlier.

88
00:03:38,314 --> 00:03:41,770
And many of these are used by search engines.

89
00:03:41,770 --> 00:03:43,901
So, if you want to improve the

90
00:03:43,901 --> 00:03:45,534
chances of your website

91
00:03:45,605 --> 00:03:49,206
showing up in Google's search results for example,

92
00:03:49,206 --> 00:03:51,940
you can read this page where it explains

93
00:03:51,940 --> 00:03:55,121
which meta tags are supported by Google.

94
00:03:55,121 --> 00:03:58,658
You'll find the link in this lecture's Resources.

95
00:03:58,658 --> 00:04:00,751
But, at a minimum, we should

96
00:04:00,751 --> 00:04:02,771
set a "title" on each page,

97
00:04:02,845 --> 00:04:05,294
and we can do that by exporting

98
00:04:05,294 --> 00:04:07,112
this "metadata" object.

99
00:04:07,191 --> 00:04:09,436
The way I think of it is that

100
00:04:09,436 --> 00:04:12,696
"metadata" here really means "meta tags",

101
00:04:12,696 --> 00:04:15,696
and other tags that go in the document "head",

102
00:04:15,696 --> 00:04:17,091
like the "title".