1
00:00:00,000 --> 00:00:02,000
[Maximilian Schwarzmüller] So how can you add metadata

2
00:00:02,000 --> 00:00:04,000
to NextJS pages?

3
00:00:04,000 --> 00:00:08,000
Well, the most straightforward way of adding metadata

4
00:00:08,000 --> 00:00:12,000
is to go to a page where you want to add it

5
00:00:12,000 --> 00:00:16,000
and typically, you should add metadata to all your pages

6
00:00:17,000 --> 00:00:21,000
and then in that page.js file,

7
00:00:21,000 --> 00:00:25,000
you export a constant called metadata

8
00:00:25,000 --> 00:00:27,000
and it must be called metadata

9
00:00:27,000 --> 00:00:32,000
and it must be in a page.js file or a layout.js file,

10
00:00:32,000 --> 00:00:36,000
as you will see soon, and it must be exported.

11
00:00:37,000 --> 00:00:41,000
Now this metadata constant then should hold an object,

12
00:00:41,000 --> 00:00:45,000
and that object can hold a couple of different properties

13
00:00:45,000 --> 00:00:47,000
that you can configure.

14
00:00:47,000 --> 00:00:51,000
Most importantly, you can set a title

15
00:00:51,000 --> 00:00:53,000
and a description property here.

16
00:00:54,000 --> 00:00:58,000
And the title property will determine the page title,

17
00:00:58,000 --> 00:01:03,000
which for example, also will show up here in your tabs,

18
00:01:04,000 --> 00:01:06,000
but which will also show up

19
00:01:06,000 --> 00:01:08,000
when your page is displayed as a search result

20
00:01:08,000 --> 00:01:10,000
on Google, for example.

21
00:01:10,000 --> 00:01:14,000
So here for this page where I display my latest posts,

22
00:01:14,000 --> 00:01:18,000
the title could, for example, be latest posts.

23
00:01:18,000 --> 00:01:21,000
The description then is some metadata text,

24
00:01:21,000 --> 00:01:24,000
which for example, shows up here below the title

25
00:01:24,000 --> 00:01:29,000
when your page is displayed in search results.

26
00:01:29,000 --> 00:01:32,000
So here we could say, browse our latest posts.

27
00:01:33,000 --> 00:01:36,000
With that, if you then save that

28
00:01:36,000 --> 00:01:39,000
and you load the page where you added the metadata,

29
00:01:39,000 --> 00:01:41,000
in my case, the starting page here,

30
00:01:41,000 --> 00:01:44,000
you'll see that the title is indeed reflected

31
00:01:44,000 --> 00:01:48,000
here in the tab and you can also see

32
00:01:48,000 --> 00:01:52,000
that metadata text you added that description text

33
00:01:52,000 --> 00:01:56,000
if you go to the head tag of the loaded page.

34
00:01:56,000 --> 00:02:00,000
And then there you should see that description meta element,

35
00:02:00,000 --> 00:02:03,000
which contains that description text

36
00:02:03,000 --> 00:02:05,000
and that's the text that, for example,

37
00:02:05,000 --> 00:02:07,000
would show up in search results.

38
00:02:07,000 --> 00:02:11,000
Now, you can also add more fields than just title

39
00:02:11,000 --> 00:02:15,000
and description to this exported metadata object

40
00:02:15,000 --> 00:02:19,000
and your official metadata fields reference page

41
00:02:19,000 --> 00:02:20,000
holds all the details about that

42
00:02:20,000 --> 00:02:23,000
and shows you all the different values

43
00:02:23,000 --> 00:02:24,000
and fields you can add here

44
00:02:24,000 --> 00:02:27,000
and attached you find a link to that document.

45
00:02:28,000 --> 00:02:31,000
You can, for example, also add a open graph setting

46
00:02:31,000 --> 00:02:34,000
to this metadata object, which controls the metadata

47
00:02:34,000 --> 00:02:39,000
that will be used when you share a page on X or Facebook.

48
00:02:39,000 --> 00:02:42,000
So for example, you can control which image will be shown

49
00:02:42,000 --> 00:02:47,000
as a preview if you share a link to your page and so on.

50
00:02:47,000 --> 00:02:49,000
So these are all settings you can set up

51
00:02:49,000 --> 00:02:51,000
on that metadata object,

52
00:02:51,000 --> 00:02:55,000
which is exported with that metadata constant.