1 00:00:02,000 --> 00:00:04,000 So this blog is finished. 2 00:00:04,000 --> 00:00:07,000 We have the starting page with the featured posts, 3 00:00:07,000 --> 00:00:08,000 which we can visit. 4 00:00:08,000 --> 00:00:10,000 We have thar all posts page. 5 00:00:10,000 --> 00:00:15,000 We also saw that we can have posts with code snippets 6 00:00:15,000 --> 00:00:18,000 or with images as we saw it here. 7 00:00:18,000 --> 00:00:21,000 And we have this contact page, 8 00:00:21,000 --> 00:00:23,000 where I can enter some data. 9 00:00:26,000 --> 00:00:29,000 Hi, I like your content. 10 00:00:29,000 --> 00:00:32,000 Send a message, get those notifications at the bottom 11 00:00:32,000 --> 00:00:35,000 and have all that user experience. 12 00:00:35,000 --> 00:00:37,000 So that is working. 13 00:00:37,000 --> 00:00:38,000 Now, one thing is missing here. 14 00:00:38,000 --> 00:00:43,000 If we think about deploying this page, this website, 15 00:00:43,000 --> 00:00:46,000 we are going to deploy it in the next course section 16 00:00:46,000 --> 00:00:48,000 and there I'll explain 17 00:00:48,000 --> 00:00:51,000 how deploying next applications works. 18 00:00:51,000 --> 00:00:53,000 But before we even go there, 19 00:00:53,000 --> 00:00:55,000 there's already something which we learned, 20 00:00:55,000 --> 00:00:58,000 which we should not forget here. 21 00:00:58,000 --> 00:01:02,000 And that is metadata, which we can add to our pages. 22 00:01:02,000 --> 00:01:05,000 You might remember this extra head component 23 00:01:05,000 --> 00:01:08,000 which we can use to set metadata. 24 00:01:08,000 --> 00:01:10,000 We definitely wanna do that here. 25 00:01:11,000 --> 00:01:13,000 For example, on our homepage, 26 00:01:13,000 --> 00:01:17,000 we want to give this page a title and a description 27 00:01:17,000 --> 00:01:20,000 and we wanna do that for all our pages. 28 00:01:20,000 --> 00:01:24,000 And hence that is what we're going to do in this lecture. 29 00:01:24,000 --> 00:01:27,000 And I will actually start with the _app.js file. 30 00:01:27,000 --> 00:01:31,000 Because there is some metadata which should be added 31 00:01:31,000 --> 00:01:34,000 to all pages. 32 00:01:34,000 --> 00:01:38,000 Things like setting the viewport, hence here, 33 00:01:38,000 --> 00:01:43,000 in _app.js, I will use the special head component, 34 00:01:44,000 --> 00:01:48,000 which we import, import head from next head, 35 00:01:49,000 --> 00:01:54,000 and I'll add it here, to then set the title if we want to, 36 00:01:56,000 --> 00:02:00,000 but I don't want to do that here in this generic file 37 00:02:00,000 --> 00:02:05,000 but I do want to add the viewport meta element. 38 00:02:05,000 --> 00:02:09,000 So this meta element with a name of viewport 39 00:02:09,000 --> 00:02:14,000 and then a content value of typically 40 00:02:14,000 --> 00:02:16,000 with equals 41 00:02:17,000 --> 00:02:19,000 the y stash width 42 00:02:20,000 --> 00:02:24,000 comma initial scale equals one. 43 00:02:24,000 --> 00:02:27,000 That could be metadata which we wanna set in general. 44 00:02:27,000 --> 00:02:31,000 Another general piece of metadata could be the favicon, 45 00:02:31,000 --> 00:02:32,000 which we wanna add here. 46 00:02:32,000 --> 00:02:34,000 That's up to you, you can of course, 47 00:02:34,000 --> 00:02:37,000 style and configure this however you want, 48 00:02:37,000 --> 00:02:40,000 but these are just some of the ideas that could come up. 49 00:02:41,000 --> 00:02:43,000 Now for page specific metadata, 50 00:02:43,000 --> 00:02:46,000 we can go to the starting page, to the homepage, 51 00:02:46,000 --> 00:02:49,000 and also add a head section there. 52 00:02:49,000 --> 00:02:53,000 So import head from next head here, 53 00:02:53,000 --> 00:02:55,000 and adds data in this fragment. 54 00:02:55,000 --> 00:02:58,000 Add the head section and set a title here, 55 00:02:58,000 --> 00:03:03,000 like, welcome to my blog or just Max' blog, 56 00:03:04,000 --> 00:03:06,000 something like this. 57 00:03:06,000 --> 00:03:10,000 And then here a meta element with a name of description 58 00:03:10,000 --> 00:03:13,000 which will matter to search engine crawlers, 59 00:03:13,000 --> 00:03:18,000 where we then define the description of this specific page. 60 00:03:18,000 --> 00:03:19,000 Something like, 61 00:03:19,000 --> 00:03:24,000 I post about programming and web development. 62 00:03:25,000 --> 00:03:28,000 And of course you might want to add a more meaningful 63 00:03:28,000 --> 00:03:30,000 yet concise description here. 64 00:03:31,000 --> 00:03:34,000 Now for contact.js, we also want that. 65 00:03:34,000 --> 00:03:38,000 Here I'll add a fragment to wrap contactfore with it. 66 00:03:38,000 --> 00:03:42,000 And then again, I wanna import head, 67 00:03:42,000 --> 00:03:47,000 so import head from next head like this, 68 00:03:47,000 --> 00:03:51,000 and here in the fragment then add the head block, 69 00:03:51,000 --> 00:03:54,000 and set the title to something like, contact me, 70 00:03:54,000 --> 00:03:59,000 and also add a meta description element here. 71 00:04:00,000 --> 00:04:03,000 This page might not be as important for search engines 72 00:04:03,000 --> 00:04:05,000 but we should still add a description. 73 00:04:07,000 --> 00:04:11,000 Like, send me your messages. 74 00:04:11,000 --> 00:04:15,000 And we can move on to the all posts page now. 75 00:04:15,000 --> 00:04:20,000 Here, let's also import head from next head, 76 00:04:21,000 --> 00:04:26,000 and then wrap all posts here with a fragment, 77 00:04:27,000 --> 00:04:31,000 so that we can have multiple adjacent JSX elements 78 00:04:31,000 --> 00:04:35,000 and add the head element here as well to set a title, 79 00:04:35,000 --> 00:04:40,000 like, all my posts or all posts in general. 80 00:04:40,000 --> 00:04:43,000 And then also this description tag. 81 00:04:43,000 --> 00:04:45,000 So the description here could be, 82 00:04:45,000 --> 00:04:50,000 a list of all programming related tutorials and posts. 83 00:04:54,000 --> 00:04:55,000 Something like this. 84 00:04:55,000 --> 00:04:59,000 And last but not least, let's work on the single post page. 85 00:04:59,000 --> 00:05:02,000 Here, we also, of course, wanna add metadata. 86 00:05:02,000 --> 00:05:04,000 This might be the most important page 87 00:05:04,000 --> 00:05:07,000 for search engines actually, since it contains 88 00:05:07,000 --> 00:05:10,000 all the content we have on the page in the end. 89 00:05:10,000 --> 00:05:12,000 It's the individual blog posts 90 00:05:12,000 --> 00:05:14,000 and their content that makes up our page. 91 00:05:14,000 --> 00:05:17,000 So this is a super important page. 92 00:05:17,000 --> 00:05:21,000 And therefore here, we of course also wanna render, 93 00:05:21,000 --> 00:05:26,000 a head section to add some head metadata to that page, 94 00:05:26,000 --> 00:05:30,000 like this, and set the title and the description. 95 00:05:30,000 --> 00:05:33,000 And here, the special thing of course is, 96 00:05:33,000 --> 00:05:36,000 that that should actually be dynamic. 97 00:05:36,000 --> 00:05:38,000 It's not hard-coded. 98 00:05:38,000 --> 00:05:41,000 Instead we wanna get that from our props. 99 00:05:41,000 --> 00:05:44,000 So from the post we fetched here. 100 00:05:44,000 --> 00:05:45,000 And hence the title is actually 101 00:05:45,000 --> 00:05:49,000 props.posts.title, for example. 102 00:05:49,000 --> 00:05:52,000 And for the content of the description, 103 00:05:52,000 --> 00:05:54,000 we could use the excerpt. 104 00:05:54,000 --> 00:05:56,000 We could use props.posts.excerpt. 105 00:05:58,000 --> 00:05:59,000 Like that. 106 00:06:00,000 --> 00:06:03,000 And if we do all of that, then if we save this 107 00:06:03,000 --> 00:06:05,000 and go to an individual blog post again, 108 00:06:06,000 --> 00:06:11,000 if we reload and view the page source, 109 00:06:11,000 --> 00:06:14,000 then here we see all the content because it's pre-rendered, 110 00:06:14,000 --> 00:06:16,000 but we also see things like the title 111 00:06:16,000 --> 00:06:21,000 and the meta description with our excerpt here at the top. 112 00:06:22,000 --> 00:06:25,000 And this is super important for search engines. 113 00:06:26,000 --> 00:06:29,000 Now, of course you can add more metadata. 114 00:06:29,000 --> 00:06:32,000 You can add images which Facebook will use, 115 00:06:32,000 --> 00:06:33,000 if you share your posts, 116 00:06:33,000 --> 00:06:36,000 and you can look up the different kinds 117 00:06:36,000 --> 00:06:37,000 of metadata you can add. 118 00:06:37,000 --> 00:06:41,000 Whatever it is, whatever should go in your page head section 119 00:06:41,000 --> 00:06:45,000 you can add it with this special head tag. 120 00:06:45,000 --> 00:06:49,000 And here we added the most important pieces to our pages.