Quick answer: a technical SEO checklist for Astro and Next.js marketing sites comes down to ten checks. Ship real HTML, give every page a unique title, description and canonical, generate a sitemap and robots.txt, add Open Graph images and JSON-LD, pick one trailing slash rule, optimise images, hit Core Web Vitals and return real 404s.
Astro and Next.js are both excellent for marketing websites, and I build on both. But neither one does technical SEO for you. I regularly audit fast, good-looking sites that still ship duplicate titles, a canonical pointing at localhost, or a pricing page Google only sees as an empty div.
This is the checklist I run before any Astro or Next.js marketing site goes live. Each item notes how it works in both frameworks, checked against the current official docs.
Key takeaways
- Prerender marketing pages. Don't make Google wait on client-only JavaScript for your main content.
- Set site in Astro and metadataBase in Next.js, or your canonicals, sitemap and OG URLs will be wrong.
- Every indexable page needs its own title, meta description and self-referencing canonical.
- Pick one trailing slash rule and make links, canonicals and the sitemap match it.
- Custom 404 pages must return a real 404 status, not a 200.
Why does rendering matter for SEO on Astro and Next.js?
Because the HTML your server sends is what every crawler sees first. Astro prerenders pages to static HTML by default, and Next.js App Router pages are Server Components by default, so both start in a good place. The problems start when a team wraps the whole page in a client component or fetches the main copy in the browser.
Google can render JavaScript, but its own JavaScript SEO guide still says server-side or pre-rendering is a great idea because it's faster for users and crawlers, and not all bots can run JavaScript. That includes many social preview and AI crawlers. Keep hero copy, headings, pricing and FAQs in the server-rendered HTML.
How do you run the technical SEO checklist?
Work through these ten steps on a production build, not the dev server. View the page source after each one to confirm what actually shipped.
Step 1: Confirm the main content is in the HTML
Use View Source (not DevTools) on your key templates. If headings and body copy aren't there, move that content out of client-only components. In Astro, only add client: directives to the islands that genuinely need interactivity.
Step 2: Set your production URL once
In Astro, set site in astro.config.mjs to your final deployed URL. Astro uses it for your sitemap and canonical URLs. In Next.js, set metadataBase in the root app/layout so relative canonical and Open Graph URLs resolve to absolute ones. Without it, a relative URL in a metadata field causes a build error.
Step 3: Give every page a unique title, description and canonical
In Next.js, export a metadata object or generateMetadata from each page. Use title.template in the root layout for your brand suffix, and alternates.canonical for the canonical. These exports only work in Server Components, which is one more reason to keep pages server-rendered.
// app/services/page.tsx
export const metadata = {
title: 'Website Redesign Services',
description: 'B2B website redesigns built for leads.',
alternates: { canonical: '/services' },
}Astro has no metadata API, so build a SEO or BaseHead component that takes title, description and an optional image as props, and render it in every layout's head. Build the canonical from the current path and your site value:
---
const canonical = new URL(Astro.url.pathname, Astro.site);
const { title, description } = Astro.props;
---
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonical} />Step 4: Generate a sitemap
In Astro, add the official @astrojs/sitemap integration. It needs site set, and builds sitemap-index.xml plus numbered sitemap files. Note that it can't list dynamic routes rendered on demand (SSR), so add those with customPages. Use filter() to drop thank-you pages and anything noindexed.
In Next.js, add app/sitemap.ts that returns an array of URLs, pulling blog and case study slugs from your CMS. Only include canonical, indexable URLs in both.
Step 5: Add robots.txt and submit the sitemap
In Next.js, use app/robots.ts or a static app/robots.txt. In Astro, put robots.txt in public/ or generate it from an endpoint so it reuses your site value. Reference the sitemap URL, then submit it in Google Search Console. Make sure staging environments are blocked, and that the block never reaches production.
Step 6: Add Open Graph images
Next.js supports an opengraph-image file in any route segment, or code-generated images, and adds the og:image tags for you. In Astro, add og:image and twitter:card tags in your SEO component, using an absolute URL. Test a few pages by sharing them in LinkedIn or Slack before launch.
Step 7: Add structured data (JSON-LD)
Next.js recommends rendering JSON-LD as a script tag in your layout or page, and escaping the < character in the JSON to avoid XSS. In Astro, use a script tag with type application/ld+json and set:html. On marketing sites I usually start with Organization and WebSite on the home page, BreadcrumbList on inner pages and Article on blog posts. Only mark up what's visible on the page.
Step 8: Pick one trailing slash rule
Next.js redirects /about/ to /about by default, and trailingSlash: true flips that. Astro's trailingSlash option defaults to 'ignore' and only redirects on-demand rendered pages. For prerendered pages, your host decides. So set the rule in your hosting config too, and keep internal links, canonicals and the sitemap consistent. Use permanent 301 or 308 redirects for any moved URLs.
Step 9: Optimise images
Use Astro's Image component from astro:assets or next/image. Both set width and height so the browser reserves space, which protects your CLS score. Load the hero image eagerly with a high fetch priority, lazy-load the rest, and write real alt text.
Step 10: Hit Core Web Vitals and return real 404s
The Core Web Vitals targets are LCP within 2.5 seconds, INP of 200 milliseconds or less and CLS of 0.1 or less, measured at the 75th percentile. On marketing sites, the usual culprits are tag managers, chat widgets and heavy hero videos, not the framework.
For 404s, add src/pages/404.astro in Astro or app/not-found.tsx in Next.js, and call notFound() when a CMS slug doesn't exist. Then check that a made-up URL returns a 404 status code, not a 200 with an error message.
Which is better for SEO, Astro or Next.js?
Neither, if both are set up properly. Astro ships less JavaScript by default, which makes good Core Web Vitals easier on content-heavy marketing sites. Next.js suits sites that sit next to a product app or need lots of dynamic, personalised pages. The checklist above matters more than the framework choice.
Frequently asked questions
Does Astro add canonical tags automatically?
No. Astro uses your site value to build canonical URLs, but you still render the link rel="canonical" tag yourself, usually in a shared head component.
Do I need a sitemap for a small marketing site?
It isn't required, but it's cheap to add and helps Google find new pages and blog posts faster. It also gives you useful indexing reports in Search Console.
Will client-side rendering stop Google indexing my pages?
Not always, but it adds delay and risk, and many non-Google crawlers don't run JavaScript. Prerender or server-render anything you want to rank.
Should I use changefreq and priority in my sitemap?
You can skip them. Astro's sitemap docs note that Google ignores changefreq and priority. An accurate lastmod is more useful.
How do I check what Google actually sees?
Use the URL Inspection tool in Google Search Console and view the tested page's rendered HTML. It's the fastest way to catch missing content or a wrong canonical.
If your Astro or Next.js site looks great but isn't getting found, I can run this checklist on it with you. Book a call and we'll find what's holding it back.
Written by
Garry Pannu
I design, build and manage marketing websites for SaaS, fintech, healthcare and IT companies, keeping them error-free, search-ready and properly tracked.
