Create a Next.js app from scratch with create-next-app

Enable TypeScript support in a Next.js app

Add global styles to a Next.js app

Add CSS-in-JS styles with emotion to a Next.js app

Add static routes to a Next.js app

Create dynamic routes with next.js

Adding absolute imports to Next.js app

Use Static Generation with getStaticProps in Next.js with TypeScript

Use static generation for dynamic blog pages with Next.js

Set up Netlify deployments for a Next.js blog

Add client-side transitions to a Next.js app

Serve static files with Next.js

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

Add a Netlify Form to a site to gather user's feedback

Change a site name in Netlify

Build a site from scratch with Next.js, TypeScript, Emotion and Netlify

In this quick lesson we're going to learn how to use `Head` tag in order to add metatags (such as `<title />` and `og:title`) to our Next.js blog

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.

Course

Build a site from scratch with Next.js, TypeScript, Emotion and Netlify

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

Share this video with your friends