8.2 Meta管理与结构化数据

8.2 Meta 管理与结构化数据

跑得快之外还要被看见。本节讲元信息工程：页面级标题描述（useSeoMeta）、社交分享卡（Open Graph）、机器可理解的内容标注（JSON-LD 结构化数据），以及它们在不同渲染模式下的生效差异——SSR 与 SSG 的标签进首份 HTML，SPA 模式的标签要等 JS，这直接决定 SEO 动作的有效性。

useSeoMeta：类型安全的元信息入口

第 2 章在配置层见过全局 head，页面级的标准工具是 useSeoMeta——按 SEO 语义命名的字段全在类型提示里，拼错立刻红线：

<!-- pages/products/[id].vue -->
<script setup>
const product = await useFetchProduct()   // 数据层（4.3 的封装）

useSeoMeta({
  title: () => `${product.value?.name} - 接力商城`,   // 响应式：数据到位自动更新
  description: () =>
    `${product.value?.name} 现价 ${product.value?.price} 元，参数与评测一目了然。`,
  ogTitle: () => product.value?.name,
  ogDescription: '机械键盘、显示器等数码好物',
  ogImage: () => product.value?.cover,
  ogType: 'website',
  twitterCard: 'summary_large_image',
})
</script>
​

三个使用要点：

• 响应式字段：传函数而非静态值，数据到位后标签自动更新——SSR 时序里数据先于渲染落定，标签带着真实值进 HTML；
• 动态页面必设：详情页共用一个全局标题是 SEO 大忌，每个动态页面基于数据生成独立标题与描述；
• 描述写给点击率：description 是搜索结果里的展示文案，写"用户为什么点我"而不是关键词堆砌。

标题模板处理全局后缀的推荐姿势：

// app.vue 或布局里：全局默认与页面覆盖
useHead({
  titleTemplate: (chunk) => chunk ? `${chunk} · 接力商城` : '接力商城 - 服务端渲染示例站',
})
​

页面只写核心词，模板统一拼后缀，改品牌名一处生效。

Open Graph：分享卡的工程化

链接被分享到社交平台与聊天工具时抓取的卡片，由 OG 标签驱动。四要素齐了卡片才完整：ogTitle、ogDescription、ogImage、ogType。工程上要过三道检查：

1. 图片尺寸与绝对地址：平台抓取器不执行 JS，图片须是可直访的完整 URL（开发环境的相对路径在分享时是坏图）；
2. SSR 模式兜底：SPA 模式（ssr:false）的页面 OG 标签靠 JS 注入，多数分享抓取器看不到——需要社交卡片的页面必须 SSR/SSG（对照 1.2 的选型表，这常是压倒 SPA 的最后一根稻草）；
3. 验证工具：各平台的分享调试器输入 URL 即可预览卡片，上线前跑一遍。

JSON-LD：给搜索引擎的说明书

结构化数据用机器可读的格式描述页面内容——商品页标注价格库存、文章页标注作者发布时间、面包屑标注层级。搜索引擎据此生成富摘要（评分星、价格、日期直接进结果页）。注入用 useHead 的 script 数组：

<script setup>
const product = await useFetchProduct()

useHead({
  script: [
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Product',
        name: product.value?.name,
        image: product.value?.images,
        offers: {
          '@type': 'Offer',
          price: product.value?.priceCents / 100,
          priceCurrency: 'CNY',
          availability: product.value?.stock > 0
            ? 'https://schema.org/InStock'
            : 'https://schema.org/OutOfStock',
        },
      }),
    },
  ],
})
</script>
​

类型选型速记：商品 Product、文章 Article、组织 Organization、面包屑 BreadcrumbList、 FAQ 页 FAQPage。结构化数据的价值链条：SSR 把它写进 HTML → 爬虫读取 → 富摘要展示 → 点击率提升。全链路里它不改变排名算法本身，但改变你在结果页的"卖相"。

图 8-2：从页面到富摘要的链路

sitemap 与 robots：索引的地基

两个常被忽略的文件：sitemap 告诉爬虫"站点有哪些页面值得收录"（动态站从数据源生成，SSG 站从页面清单生成，社区模块可自动化）；robots 声明抓取边界（后台、接口目录禁抓）。它们不影响排名，但决定爬虫的抓取效率——页面再好，进不了索引就一切免谈。第 9 章部署后可用搜索平台的站长工具提交 sitemap 并验证收录状态。

⚠️ 常见坑：SPA 模式的页面配了完整 OG 与 JSON-LD 却始终没有富摘要。抓取器不执行 JS，标签再全也读不到。要被看见的页面回到 SSR/SSG，SPA 留给登录后的区域。

💡 关键直觉：SEO 的工程本质是"把页面信息前置到不执行 JS 也能读到的位置"——SSR 把内容前置进 HTML，useSeoMeta 把摘要前置进 head，JSON-LD 把语义前置成结构。三层前置，机器才能在你的页面上"读懂"你。

本节要点回顾

• useSeoMeta 类型安全：字段语义化命名，响应式函数适应异步数据，动态页逐页生成独立元信息；
• titleTemplate：品牌后缀全局模板化，页面只写核心词；
• OG 四要素：标题描述图片类型齐全，图片绝对地址，需要卡片的页面必须 SSR/SSG；
• JSON-LD 按 schema.org 类型：商品文章组织面包屑各归其型，随 SSR 进 HTML 才被爬虫解析；
• sitemap 与 robots：收录效率的地基，部署后到站长工具提交验证。