Before you launch a Next.js landing page, set your own metadataBase, title and description, add a canonical URL per page, replace the Open Graph image, generate a sitemap and robots file, load fonts with next/font, clear hydration warnings, add structured data, and sweep out placeholder content. Templates ship with demo values for most of these.
This Next.js SEO checklist has 21 checks in three parts. The first ten apply to any Next.js page, including one you wrote yourself by following our guide to building a landing page with Next.js and shadcn/ui. The next five are specific to starting from a template, which is where most launch mistakes come from: you inherit someone else's demo domain, demo image and placeholder copy, and nothing warns you.
The last six cover getting cited in AI answers, often called AEO and GEO. They separate what vendors document from what is only practice.
Tested on Next.js 16.4 with the App Router. The AI-bot details in Part 3 were checked against Google's, OpenAI's, Anthropic's and Perplexity's documentation on 11 October 2026.
Jump to: Standard checks · Template checks · AI search · Lighthouse · Audit prompt · FAQ
Prerequisites
- A Next.js project using the App Router
- Node.js and a package manager (the commands below use
pnpm) - A deployed preview or production URL, so you can check the real output
Run a production build before you check anything. Dev mode doesn't match what Google sees.
Part 1: The standard checks
These ten apply to every Next.js page, template or not. Most of them are a few lines in one file, and you only write them once.
1. Set a title template and a description
Set these once in app/layout.tsx. Pages override the title, and the template adds your brand.
Write the description as a sentence of about 140 to 155 characters. It should say what the product does and one concrete detail.
2. Set metadataBase
The metadataBase line above is the one people skip. Next.js uses it to turn relative URLs, such as canonical links and Open Graph images, into absolute ones. Without it, those URLs fall back to a default that is rarely your production domain.
3. Add a canonical URL on every page
A canonical tells search engines which URL is the main one. Set it per page, not in the root layout. A canonical in the layout is inherited by every child page that doesn't override it, which can point your whole site at the home page.
Check the rendered page. This builds to <link rel="canonical" href="https://yourdomain.com/pricing"/> and the title becomes Pricing | Acme.
4. Add Open Graph and Twitter card metadata
The openGraph and twitter fields in the layout cover the basics. Next.js fills in the title and description from your page metadata, so you rarely need to repeat them.
5. Generate a real Open Graph image
A share card is the first thing people see on X, Slack and LinkedIn. Add app/opengraph-image.tsx and Next.js wires up the tags for you.
If you'd rather use a designed image, drop an opengraph-image.png (1200 by 630) into the app folder instead. Then paste your URL into a link preview tool to confirm it renders.
6. Add a sitemap
Use real dates. Setting lastModified to new Date() stamps every page as changed on every build, and search engines learn to ignore it. Submit /sitemap.xml in Google Search Console after launch.
7. Add a robots file
This is the simple version. Check 17 shows how to set rules for AI bots.
8. Add structured data
JSON-LD helps search engines understand who is behind the site. Keep it to what is true. Don't add ratings or reviews you don't have. Google says no special schema is needed to appear in its AI features, and that structured data should match the visible text on the page.
The .replace escapes < so that a stray string in your data can't break out of the script tag.
9. Load fonts with next/font
next/font self-hosts the font file and avoids the layout jump that happens when a web font swaps in late.
10. Give every image a size
Images without dimensions push content down as they load, which hurts Cumulative Layout Shift (CLS). Use next/image with width and height, or fill inside a parent that has a fixed size. Load the hero image first, since it is usually the largest element on screen.
Part 2: What a template ships that you need to change
A landing page template arrives working, which is the problem. Everything renders, so nothing tells you that the canonical still points at the author's demo. These five checks apply whether you started from one of the free shadcn templates or a paid one from the wider set of shadcn landing page templates.
Haven't picked one yet? Our roundup of 12 open-source shadcn landing page starters lists the trade-offs of each.
11. Replace the demo metadata
This is the most common launch mistake. A template's title, description, canonical and Open Graph tags describe the demo. Search your project for them and replace every one. Then view source on your deployed page and confirm that the canonical and og:url point to your domain, not the template's demo domain.
On a site builder these fields are settings in a panel. In Next.js they're code you own, a trade-off our Framer vs Next.js comparison covers in more depth.
12. Clear hydration warnings
Templates with a dark mode toggle or animated sections often log "hydration mismatch" errors, because the server renders one theme and the browser picks another. If you use next-themes, the fix is two lines.
suppressHydrationWarning on the <html> tag only silences the theme class difference. Fix other mismatches at the source: don't render Date.now(), Math.random() or window values on the server.
🎨 Replacing the template's colors while you're in the theme files? The shadcn theme generator previews a light and dark palette together and exports the CSS variables, so the demo's brand color doesn't ship with your product either.
13. Sweep for placeholder content
Search the whole project for text that should not reach production.
Review each hit. Also look for fake testimonials, sample customer logos and demo pricing. Shipping invented social proof is a trust problem, not only an SEO one.
14. Replace the favicon, manifest and analytics IDs
Check app/favicon.ico, any manifest file, and every analytics or tracking ID. A template can send your traffic data to its author's account if you forget to change the ID.
15. Confirm the page is indexable
View source on your live production URL and search for noindex. Preview deployments on many hosts are marked noindex on purpose, so a site that was only ever checked on a preview URL can ship with indexing off.
The tag isn't always in the HTML. Some hosts send it as an X-Robots-Tag response header instead, so check the headers too:
No output means no header. Then use the URL Inspection tool in Google Search Console on your home page to see what Google itself reports.
Part 3: Getting cited in AI answers (AEO and GEO)
AEO (answer engine optimization) and GEO (generative engine optimization) are new names for being cited in AI answers from ChatGPT, Claude, Perplexity and Google's AI Overviews. Be skeptical of the jargon. Google's own documentation says there are "no additional requirements to appear in AI Overviews or AI Mode, nor other special optimizations necessary", and that you don't need new machine-readable files, AI text files or special markup. A page only has to be indexed and eligible to show a snippet.
So most of this part is about letting the bots reach and read your page, and writing so that one passage makes sense on its own. Each check below is labeled Documented (a vendor says so) or Practice (sensible, but with no published proof).
16. Serve your content in the initial HTML
Documented by study, now dated. A December 2024 Vercel and MERJ study found that OpenAI's, Anthropic's and Perplexity's crawlers did not render JavaScript, while Gemini, which uses Google's infrastructure, did.
One honest caveat for 2026: that study is nearly two years old, and no vendor has published an update. Test your own page instead of trusting it.
If the headline, pricing and key claims appear in that output, a crawler that doesn't run JavaScript can read them. In Next.js, client components are still rendered to HTML on the server. The problem is content that only appears after a useEffect or a client-side fetch, which templates sometimes use for testimonials, pricing and animated counters.
Move that content into server components. Keep 'use client' for the interactive leaves, the tabs, selects and dialogs covered in our shadcn/ui component guides, and keep client-side loading for extras like widgets.
Charts are the fair exception. Shadcn charts usually draw in the browser, so put the number that matters in a server-rendered heading or caption next to the chart, where a crawler can read it.
17. Set rules for each AI bot
Documented. Each company runs separate bots for training, search and user-initiated fetches, and robots.txt treats them differently:
| Company | Search bot (to be cited and linked) | Training bot | User-initiated fetch |
|---|---|---|---|
| OpenAI | OAI-SearchBot | GPTBot | ChatGPT-User (robots.txt rules may not apply) |
| Anthropic | Claude-SearchBot | ClaudeBot | Claude-User |
| Perplexity | PerplexityBot (not used for training) | None stated | Perplexity-User (generally ignores robots.txt) |
| Googlebot (controls Search, including AI Overviews) | Google-Extended, for some other AI systems | None stated |
OpenAI recommends allowing OAI-SearchBot if you want to appear in ChatGPT search, and each setting works independently, so you can allow search and disallow training. Changes can take about 24 hours to apply. If you want to be cited but not used for training, this robots.ts does it:
Whether to block training is a business decision. If you don't have a reason to block, the allow-everything version from check 7 is fine.
18. Check that your host or CDN isn't blocking the bots
Practice. Some CDNs and hosts offer one-click AI-bot blocking or challenge pages for bots. A correct robots.txt doesn't help if the request never reaches your page. Do a quick check:
A 200 is a good sign and a 403 is a problem. This test is only indicative, because real bots are verified by IP address and your CDN may treat a spoofed user agent differently. Also look in your hosting dashboard for any "block AI bots" setting.
19. Write answer blocks, one idea per section
Practice. No vendor publishes a formula for being quoted, but AI answers lift passages. Write each section so it works alone:
- Put the direct answer in the first 40 to 60 words under each heading, then add detail.
- Use question-style headings where they're natural, such as "Do I need a sitemap?"
- Keep one idea per section, and repeat the subject by name instead of writing "it" across paragraphs.
- Use a table for comparisons, and include something a quote can't carry, like a demo, repo or measured result, so there's a reason to click.
💬 Putting those question-and-answer pairs in a FAQ section? The shadcn accordion patterns guide covers the FAQ layout most landing pages use. Run the curl check from 16 on one collapsed answer afterward, so you know the text is in the HTML and not only on screen.
20. Show a real "last updated" date
Practice. Readers and answer engines both prefer fresh pages. Show a visible "last updated" date on blog posts and update it only when you actually change something. If you add dateModified to your Article JSON-LD, it must match the visible date.
21. Measure whether you're being cited
Practice. Don't guess. Do three things weekly:
- Check your analytics for referral traffic from AI products. The referrer domains vary, so look at your own report rather than a list.
- Check your host's logs for hits from the bots above.
- Ask 5 to 8 real questions in ChatGPT, Claude, Perplexity and Gemini, and record whether your page is cited and which URL.
What to skip: llms.txt
An llms.txt file is a proposed Markdown file that summarizes your site for AI. Google says you don't need AI text files, and no major AI company has publicly confirmed it uses third-party llms.txt files. An SE Ranking analysis of about 300,000 domains found no citation benefit. If your CMS generates one for free, fine.
Don't spend launch week on it.
Test it: Lighthouse
Run Lighthouse in Chrome DevTools on the production build, in mobile mode. Look at three things: the SEO category, Largest Contentful Paint, and Cumulative Layout Shift. Fix what it flags rather than chasing a score.
Audit your repo with an AI assistant
Paste this into Claude Code, Cursor or any coding assistant that can read your repo.
Save the 21 checks above as SEO-CHECKLIST.md in your repo and run the audit before each release. The assistant can only read your code, so it can't run the curl checks in 15, 16 and 18. Run those yourself.
Skip the build
We make FoxCopy, a shadcn/ui marketing-site template with a home page and a working blog. Whichever template you start from, FoxCopy included, run this checklist against it. If you'd rather start from a full site than one page, see the FoxCopy SaaS landing page template. For a free single page, there's also ChatDeck, or you can browse all our shadcn templates.
Still comparing options? Our roundup of premium AI SaaS landing page templates puts ten of them side by side with pricing.
Need something a template doesn't cover, like a custom section, a different layout or a full site built to your brief? Reach out through our contact page and tell us what you have in mind. We take on custom builds and we'll get it done.
Next step
Run the checklist on your build first. Then see what a full marketing site looks like before you decide whether to build yours from scratch: view the FoxCopy demo.
Related Posts
- Build a Next.js landing page section by section - the navbar, hero, features and CTA this checklist assumes you already have
- 12 free shadcn landing page templates - open-source starters to run these checks against
- 10 best AI SaaS landing page templates - premium options compared, with pricing and live demos
- Framer vs Next.js for a portfolio - what owning your SEO code costs next to a site builder's settings panel
- Shadcn accordion component guide - FAQ sections for the answer blocks in check 19
- 5 shadcn login page templates - the auth screen that sits behind the landing page
- Shadcn charts guide - 11 chart variants for the metrics section of a landing page
