Use Head tag in Next.js to add metatags to a site

Tomasz Łakomy: [0:00] There is one more issue with our blog. As of right now, we don't have a title apart from this one, because if we take a look over here, here the title of our page is localhost:3000/posts/1, and the same occurs for the version that we have deployed to Netlify.

[0:16] As you can imagine, having a title like this is not exactly the best SEO possible. The problem becomes how do I add a title tag to a head tag in our BlogPost in Next.js?

[0:28] In order to do that, first go back to our BlogPost. I am going to import Head from 'next/head'. Now inside of our BlogPost, I am going to use this head to put a title tag. Inside of this title, I'm going to render the post.title.

[0:45] If I go back to our blog, we can see the tile tag over here, which is exactly the same content as the title of this page.

[0:51] Next.js supports basically every tag that you can put inside of a head tag in HTML. For instance, tags for Open Graph protocol are also supported. This is useful when you want to share your blog post on Twitter, Facebook, and other social media.

[1:06] For instance, I am going to grab this og:title tag and change the content to, again, post.title. I am also going to do a small refactoring. I am going to extract title and body from post, and I'm going to delete all of those posts to make this code a little bit cleaner.

[1:23] If I save that, go back to our blog. Right now, we have both the title tag and also the Open Graph title.