SEO 与元数据

varsha 内置了 SEO 最佳实践。本指南介绍如何确保你的站点针对搜索引擎和社交平台进行了适当优化。

基本配置

站点 URL

设置 astro.config.mjs 中的 site 属性，确保 OG 标签和站点地图使用正确的绝对 URL：

astro.config.mjs

export default defineConfig({
  site: 'https://your-domain.com',
});

页面元数据

所有营销页面应使用 MarketingLayout 设置元标签：

<MarketingLayout
  title="Page Title"
  description="A compelling description of 150-160 characters for search results."
  canonicalPath="/page-path/"
>

Open Graph 和社交元标签

varsha 自动生成：

• <meta property="og:title"> — 页面标题
• <meta property="og:description"> — 页面描述
• <meta property="og:image"> — 社交分享图片
• <meta property="og:url"> — 规范 URL
• <meta property="og:type"> — website
• <meta name="twitter:card"> — summary_large_image

默认 OG 图片

将 public/og-image.png 替换为你的品牌图片。推荐尺寸为 1200x630px。

设置页面特定的 OG 图片，向 MarketingLayout 传递 image 属性。

站点地图

varsha 预装 @astrojs/sitemap，构建时自动生成 sitemap.xml。

从站点地图排除页面：

sitemap({
  filter: (page) => !page.includes('/internal/'),
})

robots.txt

在 public/robots.txt 中配置搜索引擎爬虫：

public/robots.txt

User-agent: *
Allow: /
Disallow: /admin/

Sitemap: https://your-domain.com/sitemap.xml

结构化数据（JSON-LD）

添加结构化数据以支持富媒体搜索结果：

<MarketingLayout title="Home" description="..." canonicalPath="/">
  <script type="application/ld+json" set:html={JSON.stringify({
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "Your Company",
    "url": "https://your-domain.com",
    "logo": "https://your-domain.com/logo.png"
  })} />
</MarketingLayout>

博客文章使用 BlogPosting schema。

Core Web Vitals

varsha 默认提供优秀的性能：

• 默认零 JS： Astro 仅在需要时发送 JavaScript
• 图片优化： 使用 Astro 内置图片优化
• CSS 最小化： 构建时自动最小化

图片最佳实践

• 设置适当的 width 和 height 属性防止 CLS
• 照片使用 WebP/AVIF 格式
• 装饰图片使用 loading="lazy"
• Hero 图片使用 fetchpriority="high"

多语言 SEO

varsha 支持 i18n。Starlight 自动处理文档页面的 lang 属性和 hreflang 标签。

SEO 检查清单

部署前确认：

• astro.config.mjs 中 site 设置正确
• 所有页面有唯一的 title 和 description
• og-image.png 已自定义
• robots.txt 配置正确
• 页面标题使用正确的层级（h1→h2→h3）
• 所有图片有 alt 文本
• 站点地图可通过 /sitemap.xml 访问
• 配置了 Google Search Console