技术 SEO：Open Graph 与结构化数据

用 Open Graph 掌控你的页面在社交网络上的预览效果，并借助 JSON-LD 中的 schema.org 争取富媒体搜索结果。

8 分钟 · 3 题

当一个 URL 被分享到社交网络或即时通讯应用时，一个抓取器会读取 HTML 来构建预览卡片。Open Graph 协议驱动这张卡片：og:title、og:description、og:type、og:url，尤其是 og:image，它必须是一个绝对 URL（大多数平台会忽略相对路径）。一个现实中的陷阱：这些抓取器不执行 JavaScript。如果你的标签是由框架在客户端注入的，预览将会是空的；它们必须存在于最初提供的 HTML 中（SSR 或静态生成）。

HTML

<meta property="og:title"
      content="The filter coffee guide">
<meta property="og:type" content="article">
<meta property="og:url"
      content="https://example.com/cafe-filtre">
<meta property="og:image"
      content="https://example.com/cover-1200.jpg">
<meta property="og:description"
      content="Ratios and techniques for a clean cup.">

Open Graph 基础配置，带一个绝对的 og:image

两项补充完善了这套基础配置。当一个页面可通过多个地址访问时（跟踪参数、分页），<link rel="canonical"> 指定参考 URL：它是你对抗重复内容的防线。还有 Twitter Cards 标签：该平台的内容会回退到 Open Graph，但仍然需要 twitter:card 来选择显示格式，尤其是 summary_large_image。

HTML

<link rel="canonical"
      href="https://example.com/cafe-filtre">
<meta name="twitter:card"
      content="summary_large_image">

Canonical 与卡片格式：两行有回报的代码

schema.org 结构化数据向搜索引擎描述你内容的含义：文章、产品、食谱、面包屑、FAQ。存在三种语法（microdata、RDFa、JSON-LD），但 Google 推荐 JSON-LD：一个位于 <script type="application/ld+json"> 内部的自包含块，与视觉标记解耦，因此易于生成和维护。正是这套标记让你的页面有资格获得富媒体结果：评价星级、价格和活动日期直接出现在结果页上。

HTML

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "The filter coffee guide",
  "datePublished": "2026-05-12",
  "author": {
    "@type": "Person",
    "name": "Ana Costa"
  }
}
</script>

JSON-LD 中的一篇 Article：被引擎读取，但从不渲染

知识检测

确认你已牢记本课的重点内容。

og:image 的值受到什么约束？
- 它必须是一个绝对 URL，包含域名
- 它必须指向一个 WebP 格式的文件
- 它必须在标签内以 base64 编码
为什么 Google 推荐 JSON-LD 而非 microdata？
- JSON-LD 作为 JavaScript 执行，所以更快
- JSON-LD 是一个自包含块，与可见标记解耦且易于生成
- microdata 已不再被搜索引擎读取
有效且完整的 schema.org 标记保证了什么？
- 每次都展示富媒体结果
- 对页面排名的直接提升
- 有资格获得富媒体结果，但不保证展示