1
00:00:00,000 --> 00:00:03,000
All that, we are now finally pretty much done

2
00:00:03,000 --> 00:00:06,000
with this application here.

3
00:00:06,000 --> 00:00:09,000
Now I will quickly fix a styling error,

4
00:00:09,000 --> 00:00:13,000
which I only just detected, which has been fixed

5
00:00:13,000 --> 00:00:15,000
in the attachments I provided to you though,

6
00:00:15,000 --> 00:00:19,000
so you already got the right styles earlier, but here,

7
00:00:19,000 --> 00:00:20,000
I'll fix it

8
00:00:20,000 --> 00:00:24,000
by moving position relative in the meal-item.module CSS file

9
00:00:24,000 --> 00:00:28,000
from this meal header selector to the image selector.

10
00:00:28,000 --> 00:00:31,000
Again, I did already fix that in the attachments

11
00:00:31,000 --> 00:00:34,000
I provided to you, so you don't have to do anything

12
00:00:34,000 --> 00:00:37,000
and you got the right styles all the time already.

13
00:00:37,000 --> 00:00:41,000
But now here for me, those meals also look a bit better,

14
00:00:41,000 --> 00:00:43,000
but that's just one thing.

15
00:00:43,000 --> 00:00:46,000
The more important last step I want to go through

16
00:00:46,000 --> 00:00:49,000
together with you is the page metadata

17
00:00:49,000 --> 00:00:52,000
that you can add to your pages.

18
00:00:52,000 --> 00:00:56,000
And you can see that in the root layout.JS file,

19
00:00:56,000 --> 00:00:58,000
there we have a metadata constant

20
00:00:58,000 --> 00:01:03,000
that's being exported and that's not some random constant,

21
00:01:03,000 --> 00:01:08,000
but instead, NextJS is looking for exported variables

22
00:01:08,000 --> 00:01:10,000
or constants called metadata

23
00:01:10,000 --> 00:01:13,000
in all your page or layout files.

24
00:01:13,000 --> 00:01:15,000
And then in this metadata object,

25
00:01:15,000 --> 00:01:19,000
you can set some metadata fields,

26
00:01:19,000 --> 00:01:22,000
which is also described in the official documentation.

27
00:01:22,000 --> 00:01:26,000
There, you can find details about all the fields

28
00:01:26,000 --> 00:01:28,000
you can set on this metadata object

29
00:01:28,000 --> 00:01:32,000
and attached you find a link to this documentation

30
00:01:32,000 --> 00:01:34,000
so that you can explore in depth

31
00:01:34,000 --> 00:01:36,000
which fields can be set there.

32
00:01:37,000 --> 00:01:40,000
In short, this metadata constant allows you to add

33
00:01:40,000 --> 00:01:43,000
a bunch of metadata, which is then, for example,

34
00:01:43,000 --> 00:01:46,000
exposed to search engine crawlers

35
00:01:46,000 --> 00:01:50,000
or which shows up when you are sharing a link to a page

36
00:01:50,000 --> 00:01:52,000
on X or Facebook.

37
00:01:53,000 --> 00:01:55,000
Now here, I'll keep it fairly simple,

38
00:01:55,000 --> 00:01:59,000
but I wanna add a title and description to every page.

39
00:02:00,000 --> 00:02:02,000
Now, if you add this metadata to a layout,

40
00:02:02,000 --> 00:02:05,000
it will automatically be added to all the pages

41
00:02:05,000 --> 00:02:07,000
that are wrapped by that layout

42
00:02:07,000 --> 00:02:11,000
unless a page specifies its own metadata.

43
00:02:11,000 --> 00:02:13,000
In that case, the page metadata wins.

44
00:02:14,000 --> 00:02:17,000
Any nested layout metadata would also win

45
00:02:17,000 --> 00:02:19,000
over that root layout metadata,

46
00:02:20,000 --> 00:02:22,000
but by setting this metadata here,

47
00:02:22,000 --> 00:02:26,000
every page will at least have this basic metadata.

48
00:02:26,000 --> 00:02:29,000
But now of course, I wanna set more specific metadata

49
00:02:29,000 --> 00:02:31,000
for sum of my pages.

50
00:02:31,000 --> 00:02:34,000
For example, for that all meals page.

51
00:02:35,000 --> 00:02:38,000
There, it would be nice to have some metadata

52
00:02:38,000 --> 00:02:41,000
and we can therefore add it by simply exporting

53
00:02:41,000 --> 00:02:43,000
this metadata constant there as well.

54
00:02:45,000 --> 00:02:49,000
And then here we could set the title to all meals,

55
00:02:49,000 --> 00:02:51,000
and then maybe add a description of

56
00:02:51,000 --> 00:02:55,000
browse the delicious meals shared

57
00:02:55,000 --> 00:03:00,000
by our vibrant community, something like this.

58
00:03:02,000 --> 00:03:06,000
If you do that and you go to that meals page, you'll see

59
00:03:06,000 --> 00:03:11,000
that if you reload, you have this all meals title here.

60
00:03:12,000 --> 00:03:15,000
And if you take a look at the page source,

61
00:03:15,000 --> 00:03:19,000
you will also find this description meta tag in there,

62
00:03:19,000 --> 00:03:22,000
which contains your description text as content.

63
00:03:22,000 --> 00:03:24,000
Here it is.

64
00:03:27,000 --> 00:03:29,000
So that's how you can add metadata,

65
00:03:30,000 --> 00:03:34,000
but how can you add metadata to dynamic pages

66
00:03:34,000 --> 00:03:36,000
where the title and the description

67
00:03:36,000 --> 00:03:40,000
depends on the concrete data that has been loaded?

68
00:03:40,000 --> 00:03:43,000
Adding static metadata like this

69
00:03:43,000 --> 00:03:45,000
typically doesn't do the trick there.