About Next.js SEO
This project is designed to showcase how to improve your Next.js app so that it get indexed faster on search engines and optimize for Core Web Vitals.
Rendering Strategies and Caching
The most important thing for SEO is that page data and metadata is available on page load without JavaScript. Next.js allows you to choose different rendering methods on a per-page basis.
Static Generation (SSG)
Pre-renders pages at build time, resulting in fast load times and improved SEO. Ideal for pages with static content that does not change often (e.g., static marketing pages and blog posts).
Incremental Static Regeneration (ISR)
Allows you to update static pages after the site has been built by specifying a revalidation time. This ensures that your content remains fresh without sacrificing performance (e.g., product listings with frequent price updates).
Server Rendering (SSR)
Renders pages on each request, ensuring that users and search engine bots always receive the most up-to-date content. Suitable for dynamic content that changes frequently (e.g., news feed).
Client Side Rendering (CSR)
It allows websites to be entirely rendered in the browser with JavaScript. On initial page load a single HTML file is generally served with little to no content until you fetch the JavaScript and the browser compiles everything (e.g., account dashboard). Not recommended for optimal SEO.
Server Components
Use server components whenever possible to ensure that search engine bots can easily access and index your content.
Individual client components
Do not turn the entire page into a client component. When you need to add some interactivity (buttons, hooks), use separate client components.
"use client"
The `Navigation` component is a client component because it uses the `usePathname` hook.
Client side rendering
When a search engine bot visits your page, it wants to see the static HTML with all the tags, headers, metadata, links, etc. If your page is client side rendered, the info needed by the bot is not there yet. It will be added later by making a JavaScript call.
Static Metadata
Metadata is info about your website that you provide in the `head` section of your page. It includes title, description, keywords, Open Graph tags, Twitter cards, robots instructions, and more. Static metadata ensures that search engine bots can easily access and index your content.
Metadata object
In Next.js, you can define metadata statically by exporting a `metadata` object from your page or layout file.
`head` section
This `metadata` object is then automatically added to the `head` section of your page during server-side rendering.
Generate Open Graph Meta Tags
Preview and Generate Open Graph Meta Tags in OpenGraph.xyz
Dynamic Metadata
While static metadata is great for most use cases, sometimes you need dynamic metadata that changes based on the content of the page.
`generateMetadata` function
In Next.js, you can create a `generateMetadata` function that generates metadata dynamically based on the page `props`.
Dynamic routes
This is especially useful for pages with dynamic routes, such as product pages or blog posts.
Unique titles and descriptions
Dynamic metadata allows you to provide unique titles, descriptions, and Open Graph tags for each page, improving SEO and social media sharing.
Robots
The `robots` field in the metadata object allows you to control how search engine bots interact with your page.
Custom robots rules
You can specify whether you want the page to be indexed, whether links should be followed, and provide specific instructions for each bot (e.g., Googlebot).
Dynamic robots rules
This helps you manage your site presence in search engine results and optimize crawling behavior.
Global robots rules
In the `app/robots.ts` file, you can define global robots rules for your entire site.
Sitemap
A sitemap is an XML file that lists all the important pages on your site.
Importance of sitemap
This ensures that search engines can easily find all the important pages on your site.
Dynamic sitemap
In Next.js, you can create a dynamic sitemap by generating the XML file based on your site routes and content.
`app/sitemap.ts` file
The `app/sitemap.ts` file demonstrates how to create a sitemap that updates automatically as you add or remove pages.
Canonical URLs
Canonical URLs help prevent duplicate content issues by specifying the preferred version of a page.
`alternates` section
In Next.js, you can define canonical URLs in the `alternates` section of the `metadata` object.
Prevent duplicate content
This ensures that search engines understand which version of a page to index and display in search results.
Best practices
Always point the canonical URL to the main version of the page, without any query parameters or session IDs.
Example canonical URLs for a product page with different query parameters:
- https://yoursite.com/products/laptop-pro
- https://yoursite.com/products/laptop-pro?color=black
- https://yoursite.com/products/laptop-pro?size=13
- https://yoursite.com/products/laptop-pro?color=black&size=13
The canonical URL should always point to the main product page without any query parameters:
- https://yoursite.com/products/laptop-pro
JSON-LD
JSON-LD (JavaScript Object Notation for Linked Data) is a format for structuring data on the web.
Importance of JSON-LD
It helps search engines and LLMs understand the content and context of your pages better. It provides additional information about your content, such as products, reviews, events, blog posts, and more.
Adding JSON-LD
In Next.js, the best practice is to render structured data as a `script` tag in `layout.js` or `page.js` components.
Static and Dynamic Schema
You can use the JSON-LD Generator Tool to generate the static schema for your website. For dynamic schema, use the next-seo library.
Web Performance & Core Web Vitals
Core Web Vitals are a set of performance metrics that measure user experience on your website. They measure loading, interactivity, and visual stability.
`next/image`
Automatically serves correctly sized images for each device, prevents layout shift and only loads images when they enter the viewport using native browser lazy loading.
`next/font`
Automatically optimizes your fonts and removes external network requests for improved privacy and performance.
`next/link`
Automatically prefetches routes linked with the `Link` component when they enter the user viewport.
Monitoring Tools
Automate testing to catch problems before they reach production and monitor the performance of your site over time.
Lighthouse CI on every pull request
It automatically audits your pages in headless Chrome and fails builds when performance or SEO scores drop below your threshold.
ESLint rules to prevent SEO mistakes
The `next/core-web-vitals` preset blocks unoptimized images and synchronous script tags before they reach production.
Continuous SEO Health Monitoring
Google Search Console provides real-time reports on crawl errors, Core Web Vitals trends, sitemap issues, and more. PageSpeed Insights for suggestions on how to make your web site faster. Catch regressions faster by connecting the `next/web-vitals` hook to your analytics.