Astro 5 博客站 SEO/GEO 完全优化指南 (2026)

为什么用 Astro

VitePress 是 Vite 静态站, Astro 是 内容优先的现代 SSR/SSG 框架:

• 默认 100 Lighthouse 性能分: Core Web Vitals 是 Google 排名关键
• Islands 架构: 只有交互组件发 JS, 比 Next.js 快 5-10x
• Content Collections: 类型安全的内容管理 (基于 Zod)
• MDX 原生支持: 博客/教程带 React/Vue 组件
• 生态完善: @astrojs/sitemap / rss / mdx / check
• AI 友好: 容易输出 llms.txt / JSON-LD, 让 ChatGPT/Perplexity/Claude 抓取

项目结构

ai-blog/
├── astro.config.mjs        # 配置
├── src/
│   ├── content.config.ts   # Content Collections schema (Zod)
│   ├── content/
│   │   ├── projects/       # 38 个项目
│   │   ├── posts/          # 博客
│   │   └── authors/        # 作者
│   ├── pages/              # 文件路由
│   │   ├── index.astro     # /
│   │   ├── projects/       # /projects/*
│   │   ├── blog/           # /blog/*
│   │   ├── tags/           # /tags/*
│   │   ├── rss.xml.ts      # /rss.xml
│   │   ├── llms.txt.ts     # /llms.txt (AI 爬虫)
│   │   └── robots.txt.ts   # /robots.txt
│   ├── components/         # 组件
│   ├── layouts/            # 布局
│   ├── styles/             # CSS
│   └── utils/              # 工具函数
└── public/
    ├── favicon.svg
    └── og-default.png

1. Content Collections (类型安全)

// src/content.config.ts
import { defineCollection, reference, z } from "astro:content";
import { glob } from "astro/loaders";

const projects = defineCollection({
  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/projects" }),
  schema: z.object({
    title: z.string(),
    description: z.string().max(200),
    category: z.enum(["ai-llm", "ai-rag", "ai-finetune", "ai-agent", ...]),
    tech_stack: z.array(z.string()).default([]),
    featured: z.boolean().default(false),
    keywords: z.array(z.string()).default([]),  // GEO 关键
    // ...
  }),
});

写文章时, Zod 自动校验, 写错字段直接报错。

2. SEO 组件 (Meta + OG + Twitter)

---
// src/components/SEO.astro
import { SITE, absoluteUrl, articleJsonLd } from "~/utils";
interface Props {
  title: string;
  description: string;
  image?: string;
  type?: "website" | "article";
  publishedTime?: Date;
  jsonLd?: object | object[];
}
const { title, description, type = "website", jsonLd } = Astro.props;
const fullTitle = title === SITE.name ? title : `${title} | ${SITE.name}`;
const allJsonLd = jsonLd ? (Array.isArray(jsonLd) ? jsonLd : [jsonLd]) : [];
---
<title>{fullTitle}</title>
<meta name="description" content={description} />

<!-- Open Graph (微信公众号 / 知乎 / LinkedIn 抓取) -->
<meta property="og:type" content={type} />
<meta property="og:title" content={title} />
<meta property="og:image" content={absoluteUrl(SITE.seo.ogImage)} />

<!-- Twitter Card (X) -->
<meta name="twitter:card" content="summary_large_image" />

<!-- AI 爬虫允许 -->
<meta name="GPTBot" content="index, follow" />
<meta name="CCBot" content="index, follow" />
<meta name="anthropic-ai" content="index, follow" />
<meta name="PerplexityBot" content="index, follow" />

<!-- JSON-LD (Google Rich Results) -->
{allJsonLd.map((data) => (
  <script type="application/ld+json" set:html={JSON.stringify(data)} />
))}

3. JSON-LD 结构化数据 (GEO 关键)

// src/utils/index.ts
export const articleJsonLd = (opts) => ({
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": opts.title,
  "author": { "@type": "Person", "name": opts.authorName },
  "datePublished": opts.datePublished.toISOString(),
  "publisher": { "@type": "Organization", "name": SITE.name },
  // ...
});

export const faqJsonLd = (faqs) => ({
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": faqs.map(f => ({
    "@type": "Question",
    "name": f.q,
    "acceptedAnswer": { "@type": "Answer", "text": f.a },
  })),
});

关键: 写完文章, 加 1 个 FAQ JSON-LD, AI 提取 Q&A 概率 +200%。

4. llms.txt (AI 时代必备)

llms.txt 是 Answer.AI 提出的标准, 让 AI 爬虫快速了解你的网站。

// src/pages/llms.txt.ts
export async function GET() {
  return new Response(`# ${SITE.name}

> ${SITE.description}

## 主要内容

${allProjects.map(p => `- [${p.title}](${p.url}): ${p.description}`).join('\n')}

## 博客

${allPosts.map(p => `- [${p.title}](${p.url}): ${p.description}`).join('\n')}

## 技术栈

${SITE.seo.keywords.join(', ')}
`, {
    headers: { "Content-Type": "text/plain; charset=utf-8" },
  });
}

引用方式: <link rel="llms-txt" href="/llms.txt" />

5. RSS / Atom / JSON Feed

// src/pages/rss.xml.ts
import rss from "@astrojs/rss";
export async function GET(context) {
  const posts = await getCollection("posts");
  return rss({
    title: SITE.name,
    description: SITE.description,
    site: context.site,
    items: posts.map(p => ({
      title: p.data.title,
      description: p.data.description,
      pubDate: p.data.published_at,
      link: `/blog/${p.id}/`,
    })),
    customData: `<language>zh-CN</language>`,
  });
}

6. Sitemap + robots.txt

// astro.config.mjs
import sitemap from "@astrojs/sitemap";
export default defineConfig({
  integrations: [sitemap({ changefreq: "weekly", priority: 0.7 })],
});

// src/pages/robots.txt.ts
export async function GET() {
  return new Response(`User-agent: *
Allow: /

# AI 爬虫
User-agent: GPTBot
Allow: /

User-agent: CCBot
Allow: /

User-agent: anthropic-ai
Allow: /

Sitemap: ${SITE.url}/sitemap-index.xml
`, { headers: { "Content-Type": "text/plain" } });
}

7. Open Graph 图片自动生成

// src/pages/og/[...slug].ts (用 @vercel/og)
import { ImageResponse } from "@vercel/og";
export async function GET({ params }) {
  const post = await getEntry("posts", params.slug);
  return new ImageResponse(
    <div style={{...}}>{post.data.title}</div>,
    { width: 1200, height: 630 }
  );
}

关键性能指标

部署后看 PageSpeed Insights:

部署

# Vercel
vercel deploy

# Cloudflare Pages
wrangler pages deploy dist/

# Netlify
netlify deploy --prod --dir=dist

# 自建 (Nginx)
docker build -t ai-blog .
docker run -p 80:80 ai-blog

写在最后

SEO 是 内容 + 技术 + 时间 的复利:

1. 内容: 38 个项目 + 4 篇博客 (就是现在)
2. 技术: JSON-LD / OG / sitemap / RSS / llms.txt 都到位
3. 时间: 3-6 个月开始有自然流量

GEO (AI 搜索) 是 2026 新趋势, llms.txt + 结构化数据 让 ChatGPT/Perplexity 优先推荐你。

完整仓库

• ai-blog 仓库
• astro.config.mjs
• SEO 组件