All language subtitles for 031 Adding _head_ Metadata_en

Now with all our pages finished

and with all that data being fetched and used,

and with us being able to add a new meetup here,

with that we added all the functionality

that I wanted to add to this demo project

and with that, we also used all those core NextJS features:

file-based routing, API routes

and of course, also page pre-rendering

with data fetching, for example, with getStaticProps.

Now that this app is finished, what's missing?

Well, we wanna deploy it.

We don't just wanna have it here locally

on our local machine with that development server

but instead, we wanna deploy it,

put it onto a remote machine

so that users from all over the world

can visit our application.

Now, therefore, we are going to deploy it

but before we do that,

there is one thing we should also do,

one thing you should double check

for any kind of NextJS project you're building

or for any kind of web project in general.

And that's metadata,

which you might wanna add to your pages.

The content is there on our pages.

We do have the content visible on the screen

and that's the most important part, of course.

But at this point, we haven't added any metadata.

If we inspect the rendered HTML code,

the head section is relatively empty.

We do have some meta tags here

but we are missing the description meta tag,

which would be important for search engines.

I'm talking about the description meta tag,

which allows you to set descriptions,

which, for example, show up on a Google search here.

And we're also missing a page title,

which is why here in the tab title,

we only see the address as a title.

And if our pages would show up

as search results later,

we also want the title like in this case here,

Academind, for my own website.

So setting such meta tags,

adding such Head elements,

that is something we definitely also wanna do

when we build a site

and that is something which we wanna do here as well.

And adding such head elements to our pages

is thankfully very simple with NextJS.

Let's start on the index.js page.

So the HomePage.

There we definitely wanna set some title

and we definitely also wanna add a description.

And to do that, we can import a special component offered

by NextJS, the Head component imported from next/head.

This is a component which allows you to add Head elements

to the Head section of your page.

How do you use it?

You simply add it to your returned JSX code.

So here next to the MeetupList,

I wanna add the Head element, the Head component

and since adjacent JSX code is not allowed,

I will use the React Fragment imported

from React, here is the import,

imported from React.

I'll use Fragment to wrap Head and MeetupList.

And now inside of these Head tags here

between the opening and closing Head component tag,

there you can now insert your Head elements.

So all the HTML elements,

which you can add in the Head section,

you can add them here.

Like for example, the title.

And then we could give this page a title

of React Meetups, or whatever title we want to have here.

And actually make sure that this is returned like this.

If we then save this,

and we visit our starting page,

you will notice that now here

in the tab title, we see that title which I set here.

And of course, we also see this in the page source code.

There we'll be able to find the title

in the Head section.

Here it is.

And we also see that if we open the dev tools

and inspect the rendered elements here.

Here's our title as well.

So that's how we can add a title

and that's how we can also add this meta tag,

which holds the description,

which will be picked up by search engines, like Google.

Browse a huge list of highly active React meetups.

That could be our meta description for this page

and that would be the text

which shows up when our page shows up

as a result on a search engine, for example.

So with that added, we now added some meta data,

some Head data to this starting page.

And we can do this on all the pages.

On the NewMeetupPage, for example,

I don't just wanna return the NewMeetupForm,

but also add the Fragment here imported

from React of course,

and then between the Fragment opening and closing tags,

have our adjacent JSX code to have the Head section there

and the NewMeetupForm.

Head is, of course, a component

which we also need to import now.

So import Head from next/head like this.

And now here we can set a title as well,

like Add a New Meetup.

And we can also update the description

and change this to Add your own meetups.

Create amazing networking opportunities.

Like this.

So now this is added here as well

and hence, if we visit the Add New Meetup page,

we see our title here

and of course, in the dev tools,

we also see this description meta tag here

in the Head section.

Now, last but not least,

we also want to set a title

and show a description if we view a single meetup.

And therefore, we should also go

to this single meetupId page

and also wrap this into a Fragment here

and add this Head component

and bring the MeetupDetail into this Fragment as well.

And then, of course, make sure that you import Fragment

from React and import Head from next/head, like this.

And then here between the opening and closing Head tags,

we can also add a title

and of course, here the title

will not be a static hard coded title

as it on the other pages

where it's always the same title

but instead here, for a single loaded meetup item

on that MeetupDetails page,

here I actually want to use the title of that meetup

as a title for this page

so that different meetups

have different titles on their pages.

And hence different meetups showing up on a search engine,

which show up with different titles

and descriptions there as well.

And making this title dynamic instead of static

is super simple.

After all, we are in our regular returned

JSX code snippet block.

So we can use all the standard React features here

and for example, output the result

of a dynamic expression with curly braces.

And then output props.meetupData.title as a title here

and then add this meta tag here

for the description, oops, description.

And a content of some content.

And then here make the content dynamic

and output props.meetupData.description, for example,

or whatever you wanna output as a description.

And therefore, we can set a hard coded description

as we do it on the Add a New Meetup page, for example.

But we can also set a dynamic value

as we're doing it here.

And with that, if we save this and reload this page,

this single meetup page,

we see that title here in the tab

and if we inspect this here,

in the Head section, we also see the title

and we see this description

with the actual meetup description text.

And now with that, we really prepared our page

for deployment, our website for deployment

because with that, we make sure

that search engines get all that extra metadata

and we also show our users some nice titles here as well.

And with that, let's now deploy this site.