I already posted the original article on Reddit, but to make sure everyone can find this helpful piece of content, I also want to post here, so you can skip if already read this before.
SEO (Search Engine Optimization) is the key point to rank your website higher on Google and receive more traffic.
In this tutorial, I will show you what I have done to optimize my site for SEO by providing a checklist that you can follow easily.
I spent a lot of time researching and learning about SEO, especially for Next.js. So I hope this tutorial will help you save time and effort.
In general, there are several important points that you should pay attention to:
- Meta tags
- JSON-LD Schema
- Sitemap
robots.txt- Link tags
- Script optimization
- Image optimization
Meta Tags
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:
- article:published_time
- article:modified_time
- article:author
Twitter meta tags:
- twitter:card
- twitter:site
- twitter:creator
- twitter:title
- twitter:description
- twitter:image
For example, the original post has the following meta tags:
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="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>
);
}
JSON-LD Schema
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.
You can use Schema.org to generate JSON-LD Schema for your website.
For example, the original post has the following JSON-LD Schema:
const jsonLd = {
"@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.jpeg"
}
},
inLanguage: "en-US",
isFamilyFriendly: "true"
};
And I put it inside the component:
import Head from "next/head";
export default function Page() {
return (
<Head>
{/* other parts */}
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd, null, 2) }}
/>
Head>
);
}
Sitemap
Your website should provide a sitemap so that search engines can easily crawl and index your pages.
You can use next-sitemap to generate a sitemap for your Next.js website after building.
For example, running the following command will install next-sitemap and generate a sitemap for this blog:
npm install next-sitemap
npx next-sitemap
A sitemap will be generated at public/sitemap.xml:
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
Please visit the next-sitemap page for more information.
robots.txt
A robots.txt file should be added to tell search engines which pages to crawl and which pages to ignore.
You can create a robots.txt file at public/robots.txt:
User-agent: *
Disallow:
Sitemap: https://dminhvu.com/sitemap.xml
Sitemap: https://dminhvu.com/sitemap-0.xml
You can prevent the search engine from crawling a page (usually search result pages, noindex pages, etc.) by adding the following line:
User-agent: *
Disallow: /some-page
Link Tags
There are some important link tags like the meta tags that you should include in your website:
- canonical
- alternate
- icon
- apple-touch-icon
- manifest
For example, the current page has the following link tags:
import Head from "next/head";
export default function Page() {
return (
<Head>
{/* other parts */}
<link rel="canonical" href="https://dminhvu.com/nextjs-seo" />
<link rel="icon" href="https://dev.to/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="https://dev.to/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="https://dev.to/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="https://dev.to/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="https://dev.to/apple-icon-76x76.png" />
<link
rel="apple-touch-icon"
sizes="114x114"
href="https://dev.to/apple-icon-114x114.png"
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href="https://dev.to/apple-icon-120x120.png"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="https://dev.to/apple-icon-144x144.png"
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href="https://dev.to/apple-icon-152x152.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="https://dev.to/apple-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
href="https://dev.to/favicon-32x32.png"
sizes="32x32"
/>
<link
rel="icon"
type="image/png"
href="https://dev.to/android-chrome-192x192.png"
sizes="192x192"
/>
<link
rel="icon"
type="image/png"
href="https://dev.to/favicon-96x96.png"
sizes="96x96"
/>
<link
rel="icon"
type="image/png"
href="https://dev.to/favicon-16x16.png"
sizes="16x16"
/>
Head>
);
}
Script Optimization
Next.js provides a built-in component called