Next.js SEO Checklist

Using Server-Side Rendering (SSR) or Static Site Generation (SSG) allows search engines to index your pages faster and more accurately. By default, Next.js will render using these methods, so you only need to be careful with how you're using use client directives. Learn more.

Even if it's not a content-heavy page, the best practice is to add the use client directive only in the components that will need interactivity. This will make your pages load faster.

Title and description should be added on all relevant pages of your website. Next.js allows for exporting an object in your page or layout files for managing metadata, including title and description. Learn more.

Include Open Graph & Twitter Cards to improve link previews when shared on social media. This can also be done in the metadata object described above.

A canonical URL helps prevent duplicate content issues by telling search engines which page is the main version. This is also done in the metadata object, inside the alternate property. Learn more.

Make sure your media assets are properly optimized. Use modern formats like WebP and WebM. Set the width and height to prevent layout shifts. For images, you can use the next/image component which automatically handles optimization, responsive sizing, and format conversion. Learn about the component.

Optimizing your fonts can improve performance and avoid layout shifts. The best way to do this is to use the next/font component.

Lazy loading images, videos, and iframes can significantly improve page speed. This technique defers loading of resources until they're needed. Implement it by adding the loading="lazy" attribute to images, videos, and iframes. Next.js applies this to images using next/image by default.

Preloading tells the browser to prioritize loading specific resources that are critical for initial page rendering. Use <link rel="preload"> for critical assets. You can also set loading = eager on Next's image component for important above-the-fold images, and use next/link for page preloading.

A sitemap is a file that lists all the pages on your website, allowing search engines to crawl your site more efficiently. You can create a sitemap.xml in your app folder or create a .js/.ts to generate a dynamic sitemap.

Favicon can improve SEO by providing a visual representation of your brand. Add a favicon.ico file to your app folder.

Add a robots.txt file to your app folder informing search engines what pages are allowed to be crawled. You can also use Next's special robots route handler to generate one in an intuitive way.

JSON-LD is a format for providing structured data that can be used by search engines to understand your content. It should be included inside a <script type="application/ld+json"> tag in your Layout or Page component. This is particularly useful for pages that need rich results, like blog posts, product pages, or local business pages. Learn more.

When a user navigates to a page that doesn't exist, they'll see a generic 404 page by default. Create a custom not-found page in the app folder to improve the user experience.

If you're only building for one language, just check this item and move on. But if your website is multilingual, you'll have to optimize your metadata, sitemap, and pages with that in mind. This is a complicated process but Next.js simplifies some parts of it. Learn more.

User experience metrics like Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS) are used as ranking factors for search engines. You can use Lighthouse to check these metrics. You can also use Next's hook available in the next/web-vitals module to monitor these metrics in your analytics service.

This is not directly related to Next.js, but we included this item here so you don't forget one of the most important parts: the content. Helpful content, appropriate HTML structure, the right keywords, internal linking, and an overall good user experience are key to good SEO. Here is a guide to get you started on that part.