00:00:00 search engine optimization, specifically how we use metadata in Next.js to improve our SEO.
00:00:07 And when I mention metadata, I'm referring to the look and feel of our website when we share it with others on messaging platforms or posted on social
00:00:17 media platforms or on internet in general, like for example, in search engines.
00:00:22 In today's world, we need to ensure that our content is shareable.
00:00:26 So, there are two ways in which we can manage metadata in our Next.js application.
00:00:30 The first one is config-based.
00:00:33 All we have to do is create a JavaScript object in the layout or any kind of page file and export it.
00:00:40 Next.js will automatically detect it and turn it into relevant meta tags for those routes.
00:00:46 Something like export const metadata is equal to, and then in there you can provide all sorts of different SEO properties,
00:00:54 such as title, description, thumbnail, and more.
00:00:58 We already have a config file in our app layout.dsx.
00:01:02 However, if you navigate over to the homepage, and add an additional metadata, something like home next.js, then that one will be taken into account.
00:01:12 Because it's higher on the priority list and it'll override the default specified in the global layout.
00:01:18 This allows you to either define unique metadata for each route or rely on the metadata from the root layout.
00:01:26 It's entirely up to you.
00:01:27 But everything we discussed so far is just static metadata.
00:01:31 means that it's not going to change.
00:01:33 Home is always going to be home.
00:01:35 But there are also going to be cases in which you want to create dynamic metadata based on some kind of content on the page,
00:01:42 such as a blog title.
00:01:43 For example, let me show you how I implemented this strategy on jsmastery.pro for the resources page.
00:01:51 On the main resource page, you'll see different titles and descriptions.
00:01:55 And if you click on one of the resources, you'll see a change in the title and description as well.
00:02:01 Same thing happens for the other resources.
00:02:03 Each has its own title, description, and image, which helps web crawlers index these pages, and makes them much more shareable on social media.
00:02:12 But how can we achieve this in Next.js?
00:02:15 It's super simple.
00:02:16 The only thing you have to do is export a new async function called generateMetadata, which gets access to params.
00:02:25 Params being the same params that we had before from dynamic routes.
00:02:29 You can extract the ID or the name or anything else.
00:02:33 Based on that ID, you can get full resource details or user profile details, whatever it is.
00:02:40 Then you can use those details to formulate SEO title, descriptions, thumbnails, and more, and you can simply return a dynamic object of all of these properties.
00:02:51 That's it.
00:02:52 As simple as that.
00:02:54 Are you with me so far?
00:02:55 Good.
00:02:56 And the other way in which we can set metadata in Next.js is file-based metadata.
00:03:03 As the name suggests, you can put files like a robot, sitemap, favicon, OpenGraph images, or other site icons directly inside the app folder,
00:03:13 and Next.js will automatically detect and generate corresponding meta tags.
00:03:18 For example, you can have an app, and then a favicon, and then an icon, and then an OpenGraph image, Twitter image, all of these properties will get added
00:03:27 to your meta tags.
00:03:28 It's just about adding the files with the right names.
00:03:32 They have to be proper names, directly inside the app folder.
00:03:36 It'll work out the same as the config-based approach.
00:03:40 You can find the full list of all files that can be created to define metadata here.
00:03:46 But for the time being, I still prefer creating it by exporting the config file from layouts or individual pages.
00:03:52 And it's worth noting that file-based metadata has a higher priority and will override any config-based metadata.
00:04:00 So if you set it in a file, it'll be used instead of the ones that you set in the configuration.
00:04:05 So now you know how to make your apps shareable, SEO optimized, and search engine crawlable.
00:04:12 With that in mind, I think you're ready.
00:04:15 First, there was a lot of theory, and then there was more theory disguised in this practical part, but now you're ready to dive into code.
00:04:25 You're ready to dive right in and build and deploy your Next.js app with all of these optimizations, performance updates,
00:04:33 and new features baked right into it.
