SEO and Meta Tags

The base layout is the natural place for SEO meta tags. Generate a sitemap with `@astrojs/sitemap` and you're 90% there.

4 min read Level 1/5 #astro#seo#meta

What you'll learn

Centralize meta tags in the layout
Generate a sitemap
Set OG images per page

Astro’s component model makes SEO straightforward: put the meta tags in the base layout, take them as props per page, generate a sitemap. That’s most of the job.

A Sensible Base Layout `<head>`

---
// src/layouts/Base.astro
interface Props {
  title: string;
  description?: string;
  ogImage?: string;
  canonical?: string;
}
const { title, description, ogImage, canonical } = Astro.props;
const url = canonical ?? Astro.url.toString();
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    {description && <meta name="description" content={description} />}

    <link rel="canonical" href={url} />

    <!-- Open Graph -->
    <meta property="og:title" content={title} />
    <meta property="og:url" content={url} />
    {description && <meta property="og:description" content={description} />}
    {ogImage && <meta property="og:image" content={ogImage} />}

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
  </head>
  <body><slot /></body>
</html>

Sitemap

npx astro add sitemap

Sitemap setup also requires the site config:

// astro.config.mjs
import { defineConfig } from "astro/config";
import sitemap from "@astrojs/sitemap";

export default defineConfig({
  site: "https://example.com",
  integrations: [sitemap()],
});

After npm run build, dist/sitemap-index.xml lists every page. Submit it to Google Search Console once.

Add <link rel="sitemap" href="/sitemap-index.xml" /> to your layout <head> to advertise it.

Robots.txt

Drop a static public/robots.txt:

User-agent: *
Allow: /

Sitemap: https://example.com/sitemap-index.xml

Dynamic OG Images

For per-post social previews, generate images at build time with a library like @vercel/og or satori, write them to dist/og/, and reference them in the meta tag. Or use a third-party service (Open Graph Image, Bannerbear).

A Reusable `<SEO>` Component

If your meta gets complex, extract a <SEO> component to keep layouts clean. It’s just a component — no special framework needed.

Up Next

RSS feeds — easy on Astro.

RSS →