Next.js SEO Checklist
SEO checklist for Next.js applications. Covers SSR/SSG configuration, meta tag management, structured data, and performance optimization in the Next.js ecosystem.
What is the SEO checklist for Next.js?
The Next.js SEO checklist covers 18 essential tasks across Technical SEO, On-Page SEO, Content, and Performance categories. Key items include configuring XML sitemaps, optimizing meta tags, improving page speed, and setting up structured data. SEO checklist for Next.js applications. Covers SSR/SSG configuration, meta tag management, structured data, and performance optimization in the Next.js ecosystem.
Technical SEO
Use Server-Side Rendering or Static Generation
Ensure pages are rendered as HTML (SSR or SSG) for search engines. Avoid client-only rendering for SEO-critical pages.
Generate and submit XML sitemaps
Use next-sitemap or the App Router sitemap.ts convention. Include all important pages and submit to Search Console.
Configure robots.txt properly
Create a robots.txt via next-sitemap or App Router robots.ts. Block API routes and internal pages.
Set canonical URLs
Use the metadata API or next/head to set canonical URLs. Handle trailing slashes consistently.
Implement proper redirects in next.config
Use redirects() in next.config.js for 301/308 redirects. Avoid client-side redirects for SEO pages.
On-Page SEO
Use the Metadata API for titles and descriptions
Use generateMetadata() or static metadata exports in App Router. Set unique title and description per page.
Implement Open Graph and Twitter meta tags
Use the openGraph and twitter fields in metadata. Set site-wide defaults in layout.tsx, override per page.
Use semantic HTML and heading hierarchy
Use proper h1-h6 tags, semantic elements (main, article, nav, section), and ARIA landmarks.
Optimize images with next/image
Always use next/image for automatic optimization, WebP serving, lazy loading, and responsive sizing.
Add alt text to all images
Provide descriptive alt text to every next/image component. Never leave alt empty for meaningful images.
Content
Add JSON-LD structured data
Create a reusable JsonLd component. Add schema markup to pages using script tags with type='application/ld+json'.
Implement dynamic OG images with next/og
Use the @vercel/og or ImageResponse API to generate dynamic Open Graph images for pages.
Create a blog with MDX or CMS integration
Use MDX, Contentlayer, or a headless CMS for content. Generate static paths with generateStaticParams.
Build internal linking within page content
Use next/link for internal links. Create related content sections. Use meaningful anchor text.
Performance
Optimize Core Web Vitals with Next.js features
Use the Next.js Script component for third-party scripts, next/font for font optimization, and next/image for images.
Implement route-based code splitting
Next.js code-splits by route automatically. Use dynamic() imports for heavy components below the fold.
Configure caching headers
Set appropriate Cache-Control headers for static assets. Use ISR (Incremental Static Regeneration) for dynamic content.
Monitor with Next.js Analytics and Web Vitals
Enable Vercel Analytics or use the reportWebVitals function to track LCP, FID, CLS, and other Core Web Vitals.
Optimize Your Next.js Site
Use our free SEO tools to generate meta tags, schema markup, and robots.txt for your Next.js site.