Introduction
Even though vercel has good documentation, I felt a bit lost when creating my nextjs application SEO. Therefore I wrote this article to be sure all the necessary steps are followed.
- Basics (Quality content, Keywords, User-Experience, Accessability)
- SSR and SSG
- Meta Tags
- Meta Files
- Performance optimizations
Basics
The basics include all the 101 steps of creating a good SEO which will not be particularly discussed within this post. There are tons of already existing tools such as Semrush which helps you to create an SEO optimized website. In general use high quality content, make sure your ux is on point with mobile friendlyness, the right keywords and accessability.
Server Side Rendering (SSR) and Static Site Generator (SGG)
Whenever possible use SSR and SSG for SEO optimization. It serves the crawler the fully created website without the need of a runtime. This is inherently the paradigm used by Next.js.
Metadata Tags
Metadata tags can be generated within the page.ts or layout.ts file. They also can be set statically or dynamically. They work in a cascading way so the metadata in the last leaf of the tree will be used for the page.
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "...",
description: "...",
};
export default function Page() {}Metadata Files
Metadata files can be used to enhance the link sharing experience in various apps and places.
Check out the next three tables for more information.
They can be served in different variants and different places within a NextJS project.
Make sure you name the files exactelly as pointed out.
| File | Purpose |
|---|---|
| favicon.ico | Small icon in browser tab and bookmarks. |
| apple-icon.jpg | Icon for Apple devices' home screen bookmarks. |
| icon.jpg | General-purpose icon for manifests and previews. |
| opengraph-image.jpg | Image for social media previews (Open Graph). |
| twitter-image.jpg | Image for Twitter Card previews. |
| robots.txt | Directives for search engine crawlers. |
| sitemap.xml | Lists site pages for search engine indexing. |
| manifest.json | Metadata for web app installation and behavior. |
Metadata files folder and static & dynamic generation
As you can see metadata files can be put sometimes in the subfolders or only once in the app folder. However most of them can be dynamically generated. This is really important for big applications such as online shops. They often want to show the dynamically the inserted images and description of the product.
| File | Folder | Type |
|---|---|---|
| favicon.ico | /app | Static |
| apple-icon.jpg | /app/**/* | Static & Dynamic |
| icon.jpg | /app/**/* | Static & Dynamic |
| opengraph-image.jpg | /app/**/* | Static & Dynamic |
| twitter-image.jpg | /app | Static & Dynamic |
| robots.txt | /app | Static & Dynamic |
| sitemap.xml | /app | Static & Dynamic |
| manifest.json | /app | Static & Dynamic |
The following table shows the suggested formats for the metadata files.
| File | File format | Suggested Size |
|---|---|---|
| favicon.ico | .ico | 32x32px |
| apple-icon.jpg | .jpg, .jpeg, .png, .js, .ts, .tsx | 1024x1024px |
| icon.jpg | .ico, .jpg, .jpeg, .png, .svg | 1024x1024px |
| .js, .ts, .tsx | ||
| opengraph-image.jpg | .jpg, .jpeg, .png, .gif | 1200 x 630px |
| twitter-image.jpg | .jpg, .jpeg, .png, .gif | 1200 x 675px (landscape) |
| 900x900px (squared) | ||
| 506x253px (2:1) | ||
| robots.txt | .txt, .js, .ts | - |
| sitemap.xml | .xml, .js, .ts | - |
| manifest.json | .json, .js, .ts | - |
Download an Adobe illustrator example here
Performance optimizations
Last but not least there are performance optimizations. You can use various tools to optimize your SEO. Try to use all given tools from NextJS to optimize Images, Fonts, Videos, etc.
Conlusion
Nextjs and its page router are perfect for SEO. We just need to carefully choose which method we want to use at which place. I hope this guide will help you to make your nextjs application SEO ready.
Enjoy! ❤️