Astro 5 博客站 SEO/GEO 完全优化指南 (2026)
# Astro 5 博客站 SEO/GEO 完全优化指南 (2026)
> 用 Astro 5 + MDX 搭博客, 完整 SEO 优化: JSON-LD 结构化数据, Open Graph, RSS, sitemap, llms.txt 给 AI 爬虫, hreflang 多语言。GEO 优化让 ChatGPT/Perplexity 能直接抓取你的内容。
# Astro 5 博客站 SEO/GEO 完全优化指南 (2026)
## 为什么用 Astro
[VitePress](https://vitepress.dev) 是 Vite 静态站, [Astro](https://astro.build) 是 **内容优先的现代 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 抓取
## 项目结构
> **Astro 5 博客站 SEO/GEO 完全优化指南 (2026)**
> 原文: [https://yunmzc.com/ai-blog/blog/astro-seo-geo-guide/](https://yunmzc.com/ai-blog/blog/astro-seo-geo-guide/)
> 更多 AI 全栈实战项目（38 个开源项目 + 完整技术博客），欢迎访问 [AI Portfolio](https://yunmzc.com/ai-blog)
>
> 点击链接加入群聊【人工智能AI大模型智能体应用交流群】：https://qm.qq.com/q/vAhgiEldoA 群号: 306671879
```
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 (类型安全)
```typescript
// 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)
```astro
---
// 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]) : [];
---
{fullTitle}
{allJsonLd.map((data) => (
<script type="application/ld+json" set:html={JSON.stringify(data)} />
))}
```
## 3. JSON-LD 结构化数据 (GEO 关键)
```typescript
// 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 提出的标准](https://llmstxt.org), 让 AI 爬虫快速了解你的网站。
```typescript
// 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" },
});
}
```
引用方式: ``
## 5. RSS / Atom / JSON Feed
```typescript
// 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: `zh-CN `,
});
}
```
## 6. Sitemap + robots.txt
```typescript
// 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 图片自动生成
```typescript
// 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(
{post.data.title}
,
{ width: 1200, height: 630 }
);
}
```
## 关键性能指标
部署后看 [PageSpeed Insights](https://pagespeed.web.dev/):
| 指标 | 目标 | Astro 实际 |
|---|---|---|
| Performance | 90+ | 99 |
| Accessibility | 90+ | 96 |
| Best Practices | 90+ | 100 |
| SEO | 90+ | 100 |
| LCP | <2.5s | 0.8s |
| FID | <100ms | 0ms |
| CLS | <0.1 | 0.0 |
## 部署
```bash
# 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 仓库](https://github.com/yuanduan/ai-blog)
- [astro.config.mjs](https://github.com/yuanduan/ai-blog/blob/main/astro.config.mjs)
- [SEO 组件](https://github.com/yuanduan/ai-blog/blob/main/src/components/SEO.astro)
---
> 原文链接: [Astro 5 博客站 SEO/GEO 完全优化指南 (2026)](https://yunmzc.com/ai-blog/blog/astro-seo-geo-guide/)
> 更多 AI 全栈实战项目（38 个开源项目 + 完整技术博客），欢迎访问 [AI Portfolio](https://yunmzc.com/ai-blog)
>
> 点击链接加入群聊【人工智能AI大模型智能体应用交流群】：https://qm.qq.com/q/vAhgiEldoA 群号: 306671879
浙公网安备 33010602011771号