Next.js SEO Meta Tags
Meta tags are the foundation of on-page SEO. Next.js App Router replaces the old Head component with a typed metadata API that merges across layouts and pages. Here is how to use it correctly.
The Metadata API
Export a metadata object from any page.tsx or layout.tsx to set meta tags for that route. The metadata object supports title, description, keywords, authors, robots, openGraph, twitter, alternates, and more.
Metadata merges from layout to page. A root layout sets defaults (site name, default OG image), and individual pages override specific fields. The title field supports a template pattern so your brand name appends automatically without repetition.
For dynamic metadata, export an async generateMetadata() function instead. It receives the route params and can fetch data before returning metadata. This is how you set unique titles and descriptions for dynamic routes like blog posts or product pages.
Title Tags That Rank
The title tag is the most important on-page ranking signal. Keep it under 60 characters to avoid truncation in search results. Place your primary keyword near the beginning — Google gives more weight to early words.
Use the title template pattern in your root layout: { default: 'Site Name', template: '%s | Site Name' }. This ensures consistent branding while letting pages set unique titles. Every page must have a unique title that accurately describes its content.
Avoid generic titles like 'Home' or 'Dashboard'. Avoid keyword stuffing. Write titles for humans — they need to be compelling enough to earn clicks from the SERP. Indxel validates title length, uniqueness, and format across your entire site.
Meta Descriptions That Convert
Meta descriptions do not directly affect rankings, but they heavily influence click-through rate. Google shows your description as the snippet in search results — it is your sales pitch to searchers.
Keep descriptions between 120 and 160 characters. Include your primary keyword naturally — Google bolds matching terms in the snippet. Write a clear value proposition: what will the user get from clicking? End with a call to action when appropriate.
Every page needs a unique description. Duplicate or missing descriptions force Google to auto-generate snippets, which are often suboptimal. Indxel flags pages with missing, duplicate, or incorrectly-sized descriptions.
Open Graph and Twitter Cards
Open Graph tags control how your pages appear when shared on social media. The key fields are og:title, og:description, og:image, og:url, and og:type. Twitter uses its own twitter:card, twitter:title, and twitter:image tags.
Set og:image to a 1200x630 pixel image for maximum compatibility. Use opengraph-image.tsx to generate dynamic images per route. Set twitter:card to summary_large_image for the most visual impact on Twitter.
In the metadata API, use the openGraph and twitter properties. These can differ from your HTML title and description — optimize them for social engagement rather than search. Indxel validates that OG tags are present, images are the correct size, and URLs resolve.
Canonical URLs and Alternates
Canonical URLs tell search engines which version of a page is the authoritative one. Set them via alternates.canonical in the metadata API. Self-referencing canonicals (pointing to the current page URL) are a best practice.
Canonicals prevent duplicate content issues from URL parameters, trailing slashes, and HTTP vs HTTPS variations. Without them, Google may index the wrong URL variant or split ranking signals between duplicates.
For multi-language sites, use alternates.languages to specify hreflang tags. Each language version must reference all other versions including itself. Missing or non-reciprocal hreflang annotations cause Google to ignore them entirely.
Frequently asked questions
What is the difference between metadata and generateMetadata?
metadata is a static export for pages with fixed meta tags. generateMetadata is an async function for dynamic pages — it receives route params and can fetch data before returning metadata. Both merge with parent layout metadata.
How long should a meta description be?
Between 120 and 160 characters. Google truncates longer descriptions. Shorter ones may not provide enough context. Include your primary keyword and a clear value proposition.
Do I need both Open Graph and Twitter meta tags?
Yes. While Twitter falls back to Open Graph tags, having dedicated twitter:card, twitter:title, and twitter:image tags gives you more control. The twitter:card type (summary_large_image) is not available through OG alone.
Related guides
The Complete Next.js SEO Guide
Next.js App Router changed how metadata works. Static exports, generateMetadata, and file-based conventions replaced the old Head component. This guide covers everything you need to ship SEO-correct Next.js apps.
Next.js SEO Checklist 2026
A checklist you can run through before every deploy. Covers the metadata, structured data, performance, and indexation checks that matter for Next.js App Router projects. No fluff — just the items that affect rankings.
Next.js SEO Optimization
Performance is SEO. Google uses Core Web Vitals as ranking signals, and Next.js gives you the primitives to hit every target. This guide covers the optimization techniques that directly impact search rankings.