Note: All content on this website is derived directly from my own expertise and experiences. No AI-generated text or automated content creation tools are used.
Hi guys 👋, I'm a developer specializing in Elastic Stack and Next.js. My blog shares practical tutorials and insights based on 3+ years of hands-on experience. Open to freelance opportunities — let's get in touch!
Comments
Minh Vu
Feb 22, 2024
I just added the robots.txt section for Next.js App Router. Cheers!
kiwi
Feb 25, 2024
Thanks for the in-depth tutorial, can you elaborate more about JSON LD?
jayden
Feb 28, 2024
thorough and detailed explanation
Rowland Ricketts
Mar 05, 2024
Thanks for sharing this,
kunkka
May 27, 2024
Thanks for sharing, good article
David
Jul 14, 2024
Indeed, this tutorial will really save me a lot of time and effort. Cheers, man!
David
Jul 14, 2024
Indeed, this tutorial will really save me a lot of time and effort. Cheers, man!
Enes
Aug 20, 2024
This is very concise, thank you very much!
Enes
Aug 20, 2024
This is very concise, thank you very much!
Salman
Dec 06, 2024
why you can't do your own website SEO. This website has zero traffic.
Salman
Dec 06, 2024
why you can't do your own website SEO. This website has zero traffic.
Salman
Dec 06, 2024
why you can't do your own website SEO. This website has zero traffic.
test
Mar 01, 2025
great article
test
Mar 01, 2025
great article
Franklin Dambra
Mar 27, 2025
I really love this article and return to it frequently. Please keep it updated as it is a valuable comprehensive resource for us.. Thank you and best wishes
Franklin Dambra
Mar 27, 2025
I really love this article and return to it frequently. Please keep it updated as it is a valuable comprehensive resource for us.. Thank you and best wishes
Franklin Dambra
Mar 27, 2025
I really love this article and return to it frequently. Please keep it updated as it is a valuable comprehensive resource for us.. Thank you and best wishes
Eric
May 02, 2025
Do you have an example of your getAllPostSlugsWithModifyTime() function?
Leave a Comment
Success!
Receive Latest Updates 📬
Get every new post, special offers, and more via email. No fee required.
SEO (Search Engine Optimization) is one of the key factors to rank your website higher on Google and receive more traffic.
In this tutorial, I will show you what I have done to optimize this blog for SEO by providing a checklist that you can follow easily.
I have spent a lot of time researching and learning about SEO, especially for Next.js, and found some optimal ways to do it. So I hope this tutorial will help you save time and effort.
I will put the items covered in this tutorial inside the Table of Contents below. You can click on any item to jump to the section.
Please note that some parts are different for Next.js Pages Router and Next.js App Router, I will mention it in the tutorial. Otherwise, it can be applied to both.
Meta tags provide information about your website to search engines and social media platforms.
Your website should include the following standard meta tags:
title
description
keywords
robots
viewport
charSet
Open Graph meta tags:
og:site_name
og:locale
og:title
og:description
og:type
og:url
og:image
og:image:alt
og:image:type
og:image:width
og:image:height
Article meta tags (actually it's also OpenGraph):
article:published_time
article:modified_time
article:author
Twitter meta tags:
twitter:card
twitter:site
twitter:creator
twitter:title
twitter:description
twitter:image
Please note that for the og:image and twitter:image tags, you should use the PNG or JPG format as some social media platforms will not read the WebP format.
For example, the current page has the following meta tags when I use Next.js Pages Router:
pages/[slug].tsx
import Head from "next/head";export default function Page() { return ( <Head> <title> Next.js SEO: The Complete Checklist to Boost Your Site Ranking </title> <meta name="description" content="Learn how to optimize your Next.js website for SEO by following this complete checklist." /> <meta name="keywords" content="nextjs seo complete checklist, nextjs seo tutorial" /> <meta name="robots" content="index, follow" /> <meta name="googlebot" content="index, follow" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta charSet="utf-8" /> <meta property="og:site_name" content="Blog | Minh Vu" /> <meta property="og:locale" content="en_US" /> <meta property="og:title" content="Next.js SEO: The Complete Checklist to Boost Your Site Ranking" /> <meta property="og:description" content="Learn how to optimize your Next.js website for SEO by following this complete checklist." /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://dminhvu.com/nextjs-seo" /> <meta property="og:image" content="https://ik.imagekit.io/dminhvu/assets/nextjs-seo/thumbnail.png?tr=f-png" /> <meta property="og:image:alt" content="Next.js SEO" /> <meta property="og:image:type" content="image/png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="article:published_time" content="2024-01-11T11:35:00+07:00" /> <meta property="article:modified_time" content="2024-01-11T11:35:00+07:00" /> <meta property="article:author" content="https://www.linkedin.com/in/dminhvu02" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@dminhvu02" /> <meta name="twitter:creator" content="@dminhvu02" /> <meta name="twitter:title" content="Next.js SEO: The Complete Checklist to Boost Your Site Ranking" /> <meta name="twitter:description" content="Learn how to optimize your Next.js website for SEO by following this complete checklist." /> <meta name="twitter:image" content="https://ik.imagekit.io/dminhvu/assets/nextjs-seo/thumbnail.png?tr=f-png" /> </Head> );}
For Next.js App Router, it's even easier to define those tags by using the built-in export const metadata argument for static metadata, and the generateMetadata function for pages that have dynamic data (blog posts, products, etc.).
Let's find out how to do it. You can visit the metadata docs to learn more.
Dynamic metadata can be defined by using the generateMetadata function, this is useful when you have dynamic pages like [slug]/page.tsx, or [id]/page.tsx:
JSON-LD is a lightweight Linked Data format. It is easy for machines to parse and generate. It is currently one of the most widely used formats for Linked Data.
For example, the current page has the following JSON-LD Schema:
constjsonLd = { "@context": "https://schema.org", "@type": "BlogPosting", mainEntityOfPage: { "@type": "WebPage", "@id": "https://dminhvu.com/nextjs-seo" }, headline: "Next.js SEO: The Complete Checklist to Boost Your Site Ranking", description: "Learn how to optimize your Next.js website for SEO by following this complete checklist.", image: "https://ik.imagekit.io/dminhvu/assets/nextjs-seo/thumbnail.png?tr=f-png", dateCreated: "2024-01-11T11:35:00+07:00", datePublished: "2024-01-11T11:35:00+07:00", dateModified: "2024-01-11T11:35:00+07:00", author: { "@type": "Person", name: "Minh Vu", url: "https://www.linkedin.com/in/dminhvu02" }, publisher: { "@type": "Person", name: "Minh Vu", logo: { "@type": "ImageObject", url: "https://dminhvu.com/avatar_zoom.jpg" } }, inLanguage: "en-US", isFamilyFriendly: "true"};
And I can put it anywhere, whether inside the head tag or the body tag is fine:
import Head from "next/head";export default function Page() { return ( <div> {/* other parts */} <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} /> </div> );}
import Head from "next/head";export default function Page() { return ( <Head> {/* other parts */} <link rel="canonical" href="https://dminhvu.com/nextjs-seo" /> </Head> );}
This part can be applied to both Pages Router and App Router.
Image optimization is also an important part of SEO as it helps your website load faster.
Faster image rendering speed will contribute to the Google PageSpeed score, which can improve user experience and SEO.
You can use next/image to optimize images in your Next.js website.
For example, the following code will optimize this post thumbnail:
import Image from "next/image";export default function Page() { return ( <Image src="https://ik.imagekit.io/dminhvu/assets/nextjs-seo/thumbnail.png?tr=f-webp" alt="Next.js SEO" width={1200} height={630} /> );}
Remember to use a CDN to serve your media (images, videos, etc.) to improve the loading speed. Here I used ImageKit to serve my images. Some people prefer Cloudinary or Vercel built-in image optimization.
You can also use DigitalOcean Spaces to store your media files. Use this link to get $200 free credit for 60 days to try it out.
For the image format, I prefer to use WebP because it has a smaller size than PNG and JPEG.
Comments
Minh Vu
Feb 22, 2024
I just added the robots.txt section for Next.js App Router. Cheers!
kiwi
Feb 25, 2024
Thanks for the in-depth tutorial, can you elaborate more about JSON LD?
jayden
Feb 28, 2024
thorough and detailed explanation
Rowland Ricketts
Mar 05, 2024
Thanks for sharing this,
kunkka
May 27, 2024
Thanks for sharing, good article
David
Jul 14, 2024
Indeed, this tutorial will really save me a lot of time and effort. Cheers, man!
David
Jul 14, 2024
Indeed, this tutorial will really save me a lot of time and effort. Cheers, man!
Enes
Aug 20, 2024
This is very concise, thank you very much!
Enes
Aug 20, 2024
This is very concise, thank you very much!
Salman
Dec 06, 2024
why you can't do your own website SEO. This website has zero traffic.
Salman
Dec 06, 2024
why you can't do your own website SEO. This website has zero traffic.
Salman
Dec 06, 2024
why you can't do your own website SEO. This website has zero traffic.
test
Mar 01, 2025
great article
test
Mar 01, 2025
great article
Franklin Dambra
Mar 27, 2025
I really love this article and return to it frequently. Please keep it updated as it is a valuable comprehensive resource for us.. Thank you and best wishes
Franklin Dambra
Mar 27, 2025
I really love this article and return to it frequently. Please keep it updated as it is a valuable comprehensive resource for us.. Thank you and best wishes
Franklin Dambra
Mar 27, 2025
I really love this article and return to it frequently. Please keep it updated as it is a valuable comprehensive resource for us.. Thank you and best wishes
Eric
May 02, 2025
Do you have an example of your getAllPostSlugsWithModifyTime() function?