Astro SEO Example

About

This project shows how to implement SEO (Search Engine Optimization) features in Astro projects.

Features:

Meta tag management
Open Graph integration
Automated sitemap generation
RSS feed generation
Robots.txt configuration
SEO-friendly routing

Project Structure

1
src/
2
├── layouts/
3
│   └── BaseLayout.astro        # Base layout with SEO components
4
├── pages/
5
│    ├── blog/
6
│    │   └── [id].astro         # Dynamic blog post routes
7
│    ├── robots.txt.ts          # Dynamic robots.txt generation
8
│    └── rss.xml.ts             # RSS feed generation
9
├── consts.ts                   # Constants including SEO configuration
10
└── types.ts                    # TypeScript type definitions

Configuration

Base SEO Configuration

The base SEO settings can be customized in src/consts.ts:

1
export const SITE: Site = {
2
  TITLE: 'My Amazing Blog',
3
  DESCRIPTION: 'Welcome to my amazing blog.',
4
  AUTHOR: 'John Doe',
5
  CANONICAL_URL: import.meta.env.DEV
6
    ? 'http://localhost:4321'
7
    : 'https://johnsblog.com',
8
  LOCALE: 'en',
9
  OG_IMAGE: '/og-image.webp',
10

11
  TWITTER: {
12
    CREATOR: '@john_doe',
13
    CARD: 'summary_large_image',
14
  },
15
};

Meta Tags Implementation

The BaseLayout.astro handles all SEO-related meta tags and structured data:

1
---
2
import { SITE } from '@consts';
3

4
// Google site verification code from environment variables
5
const googleSiteVerification = import.meta.env.PUBLIC_GOOGLE_SITE_VERIFICATION;
6

7
const {
8
  canonicalURL = new URL(Astro.url.pathname, Astro.site).href,
9
  title = SITE.TITLE,
10
  description = SITE.DESCRIPTION,
11
  ogImage = SITE.OG_IMAGE,
12
  author = SITE.AUTHOR,
13
  pubDatetime,
14
  modDatetime,
15
} = Astro.props;
16

17
// Construct the full URL for social media images
18
// Falls back to og-image.webp if no custom image is provided
19
const socialImageURL = new URL(
20
  ogImage ?? SITE.OG_IMAGE ?? 'og-image.webp',
21
  Astro.url.origin
22
).href;
23

24
// Schema.org structured data for blog posts
25
// This helps search engines better understand the content
26
// If you need another type of schema, you can read https://schema.org/docs/documents.html.
27
const schemaData = {
28
  '@context': 'https://schema.org',
29
  '@type': 'BlogPosting',
30
  headline: `${title}`,
31
  image: `${socialImageURL}`,
32
  ...(pubDatetime && {
33
    datePublished: new Date(pubDatetime).toISOString(),
34
  }),
35
  ...(modDatetime && { dateModified: modDatetime.toISOString() }),
36
  author: [
37
    {
38
      '@type': 'Person',
39
      name: `${author}`,
40
      url: `${canonicalURL}`,
41
    },
42
  ],
43
};
44
---
45

46
<!doctype html>
47
<html lang=`${SITE.LOCALE ?? "en"}`>
48
  <head>
49
    <meta charset="UTF-8" />
50
    <meta name="viewport" content="width=device-width" />
51
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
52
    <link rel="canonical" href={canonicalURL} />
53
    <meta name="generator" content={Astro.generator} />
54

55
    <!-- General Meta Tags -->
56
    <title>{title}</title>
57
    <meta name="title" content={title} />
58
    <meta name="description" content={description} />
59
    <meta name="author" content={author} />
60
    <link rel="sitemap" href="/sitemap-index.xml" />
61

62
    <!-- Open Graph / Facebook -->
63
    <meta property="og:url" content={canonicalURL} />
64
    <meta property="og:title" content={title} />
65
    <meta property="og:description" content={description} />
66
    <meta property="og:image" content={socialImageURL} />
67

68
    <!-- Twitter -->
69
    <meta property="twitter:card" content={SITE.TWITTER?.CARD} />
70
    <meta property="twitter:url" content={canonicalURL} />
71
    <meta property="twitter:title" content={title} />
72
    <meta property="twitter:description" content={description} />
73
    <meta property="twitter:image" content={socialImageURL} />
74

75
    <!-- Google JSON-LD Structured data -->
76
    <script type="application/ld+json" set:html={JSON.stringify(schemaData)} />
77

78
    {
79
      // If PUBLIC_GOOGLE_SITE_VERIFICATION is set in the environment variable,
80
      // include google-site-verification tag in the heading
81
      // Learn more: https://support.google.com/webmasters/answer/9008080#meta_tag_verification&zippy=%2Chtml-tag
82
      googleSiteVerification && (
83
        <meta
84
          name="google-site-verification"
85
          content={googleSiteVerification}
86
        />
87
      )
88
    }
89
  </head>
90
  <body>
91
    <slot />
92
  </body>
93
</html>

Dynamic Routes SEO

For dynamic routes like blog posts, implement SEO data in src/pages/blog/[id].astro:

1
---
2
import BaseLayout from '@layouts/BaseLayout.astro';
3
import { posts } from '@utils/getSortedPosts';
4

5
export async function getStaticPaths() {
6
  return posts.map(post => ({
7
    params: { id: post.id },
8
    props: { post },
9
  }));
10
}
11

12
const { post } = Astro.props;
13

14
const ogUrl = `/${post.collection}/${post.id}.webp`;
15

16
const Props = {
17
  canonicalURL: post.data.canonicalURL,
18
  title: post.data.title,
19
  ogImage: ogUrl,
20
  author: post.data.author,
21
  pubDatetime: post.data.pubDatetime,
22
  modDatetime: post.data.modDatetime,
23
};
24
---
25

26
<BaseLayout {...Props} />

Robots and Sitemap Generation

Automatically generate a robots.txt file with sitemap.xml.
(You can check the sitemap only after running pnpm build, then preview it with pnpm preview.)

For more info, see Astro Sitemap:

1
import type { APIRoute } from 'astro';
2

3
const getRobotsTxt = (sitemapURL: URL) => `
4
User-agent: *
5
Allow: /
6

7
Sitemap: ${sitemapURL.href}
8
`;
9

10
export const GET: APIRoute = ({ site }) => {
11
  const sitemapURL = new URL('sitemap-index.xml', site);
12
  return new Response(getRobotsTxt(sitemapURL));
13
};

RSS

Generate rss.xml.ts for search engines.
For more info, see Astro RSS:

1
import rss from '@astrojs/rss';
2
import { SITE } from '@consts';
3
import { posts } from '@utils/getSortedPosts';
4

5
type Context = {
6
  site: string;
7
};
8

9
export async function GET(context: Context) {
10
  return rss({
11
    title: SITE.TITLE,
12
    description: SITE.DESCRIPTION,
13
    site: context.site,
14
    items: posts.map(({ data, id, collection }) => ({
15
      link: `/${collection}/${id}`,
16
      title: data.title,
17
      description: data.description,
18
      pubDate: new Date(data.modDatetime ?? data.pubDatetime),
19
      author: data.author || SITE.AUTHOR,
20
      enclosure: {
21
        url: new URL(`/${collection}/${id}.webp`, context.site).href,
22
        type: 'image/webp',
23
        length: 0,
24
      },
25
    })),
26
  });
27
}

Usage

Clone this repository
Install dependencies: pnpm install
Update SEO configuration in src/consts.ts
Customize meta components as needed
Run pnpm dev to start development server
Run pnpm build to generate your SEO-optimized site