So this blog is finished.
We have the starting page with the featured posts,
which we can visit.
We have thar all posts page.
We also saw that we can have posts with code snippets
or with images as we saw it here.
And we have this contact page,
where I can enter some data.
Hi, I like your content.
Send a message, get those notifications at the bottom
and have all that user experience.
So that is working.
Now, one thing is missing here.
If we think about deploying this page, this website,
we are going to deploy it in the next course section
and there I'll explain
how deploying next applications works.
But before we even go there,
there's already something which we learned,
which we should not forget here.
And that is metadata, which we can add to our pages.
You might remember this extra head component
which we can use to set metadata.
We definitely wanna do that here.
For example, on our homepage,
we want to give this page a title and a description
and we wanna do that for all our pages.
And hence that is what we're going to do in this lecture.
And I will actually start with the _app.js file.
Because there is some metadata which should be added
to all pages.
Things like setting the viewport, hence here,
in _app.js, I will use the special head component,
which we import, import head from next head,
and I'll add it here, to then set the title if we want to,
but I don't want to do that here in this generic file
but I do want to add the viewport meta element.
So this meta element with a name of viewport
and then a content value of typically
with equals
the y stash width
comma initial scale equals one.
That could be metadata which we wanna set in general.
Another general piece of metadata could be the favicon,
which we wanna add here.
That's up to you, you can of course,
style and configure this however you want,
but these are just some of the ideas that could come up.
Now for page specific metadata,
we can go to the starting page, to the homepage,
and also add a head section there.
So import head from next head here,
and adds data in this fragment.
Add the head section and set a title here,
like, welcome to my blog or just Max' blog,
something like this.
And then here a meta element with a name of description
which will matter to search engine crawlers,
where we then define the description of this specific page.
Something like,
I post about programming and web development.
And of course you might want to add a more meaningful
yet concise description here.
Now for contact.js, we also want that.
Here I'll add a fragment to wrap contactfore with it.
And then again, I wanna import head,
so import head from next head like this,
and here in the fragment then add the head block,
and set the title to something like, contact me,
and also add a meta description element here.
This page might not be as important for search engines
but we should still add a description.
Like, send me your messages.
And we can move on to the all posts page now.
Here, let's also import head from next head,
and then wrap all posts here with a fragment,
so that we can have multiple adjacent JSX elements
and add the head element here as well to set a title,
like, all my posts or all posts in general.
And then also this description tag.
So the description here could be,
a list of all programming related tutorials and posts.
Something like this.
And last but not least, let's work on the single post page.
Here, we also, of course, wanna add metadata.
This might be the most important page
for search engines actually, since it contains
all the content we have on the page in the end.
It's the individual blog posts
and their content that makes up our page.
So this is a super important page.
And therefore here, we of course also wanna render,
a head section to add some head metadata to that page,
like this, and set the title and the description.
And here, the special thing of course is,
that that should actually be dynamic.
It's not hard-coded.
Instead we wanna get that from our props.
So from the post we fetched here.
And hence the title is actually
props.posts.title, for example.
And for the content of the description,
we could use the excerpt.
We could use props.posts.excerpt.
Like that.
And if we do all of that, then if we save this
and go to an individual blog post again,
if we reload and view the page source,
then here we see all the content because it's pre-rendered,
but we also see things like the title
and the meta description with our excerpt here at the top.
And this is super important for search engines.
Now, of course you can add more metadata.
You can add images which Facebook will use,
if you share your posts,
and you can look up the different kinds
of metadata you can add.
Whatever it is, whatever should go in your page head section
you can add it with this special head tag.
And here we added the most important pieces to our pages.