Open Graph 预览器

什么是 Open Graph？

Open Graph 协议（简称 OG）是由 Facebook 在 2010 年推出的一套元数据标准，用于控制网页在社交平台上分享时的展示效果。当你在微信、Twitter、Slack 或 LinkedIn 中粘贴一个链接时，平台会自动读取页面中的 OG 标签，生成包含标题、描述和图片的富媒体卡片。

OG 标签本质上是一组放在 HTML <head> 中的 <meta> 标签，例如：

<meta property="og:title" content="你的页面标题" />
<meta property="og:description" content="页面描述" />
<meta property="og:image" content="https://example.com/image.png" />
<meta property="og:url" content="https://example.com/page" />

为什么 OG 标签如此重要？

1. 社交分享的「第一印象」

在信息流中，用户决定是否点击一个链接通常只需 1-2 秒。一个有吸引力的分享卡片（包含清晰的标题、描述和精美的配图）能显著提升点击率（CTR）。反之，一个没有 OG 标签的链接只会显示为一段灰色的 URL 文字——几乎不会有人点击。

2. 跨平台一致性

不同平台对 OG 标签的解析方式略有差异：

3. SEO 间接影响

虽然 OG 标签不直接影响 Google 排名，但它们通过以下方式间接促进 SEO：

• 更多的社交分享 → 更多的外链和流量
• 更高的 CTR → 向搜索引擎传递积极信号
• Google 有时会使用 og:title 作为搜索结果标题的候选项

Open Graph 与 Twitter Card 的关系

Twitter（现为 X）有自己的一套元数据标准——Twitter Card。Twitter Card 标签以 twitter: 为前缀，当 Twitter 特定标签缺失时，会自动回退到 OG 标签。

最佳实践是同时设置 OG 和 Twitter Card 标签，这也是本工具生成代码的默认行为：

<!-- Open Graph -->
<meta property="og:title" content="页面标题" />
<meta property="og:description" content="页面描述" />
<meta property="og:image" content="https://example.com/image.png" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="页面标题" />
<meta name="twitter:description" content="页面描述" />
<meta name="twitter:image" content="https://example.com/image.png" />

本工具的功能

本 OG 预览器提供以下核心功能：

• 8 大平台实时预览：Facebook、Twitter/X、LinkedIn、Slack、微信、Pinterest、Discord、Google SERP，一次编辑即可查看所有平台的展示效果
• 字符数实时统计：标题（60 字符上限）和描述（160 字符上限）自带字数统计与超限警告
• 图片拖拽上传：支持拖拽或点击上传图片，自动检测图片尺寸并对比推荐尺寸（1200×630）
• 一键生成 Meta 标签代码：自动生成完整的 OG + Twitter Card 代码，一键复制到剪贴板
• 调试工具快捷链接：直达 Facebook Debugger、Twitter Card Validator、LinkedIn Inspector 等官方验证工具
• 纯前端实现：所有操作均在浏览器端完成，你的标题、描述和图片不会上传到任何服务器

使用说明

1. 填写基本信息

在页面顶部的输入区域中，依次填写以下字段：

• URL：你的网页地址，用于在预览中显示域名和面包屑路径
• 站点名称：网站品牌名，Slack 和 Discord 会优先显示此字段
• og:title：页面标题，建议控制在 60 字符以内。右侧实时显示字符数，超限时变为红色
• og:description：页面描述，建议控制在 160 字符以内。同样有字符计数与超限提醒
• og:image：预览图片的 URL 地址，推荐尺寸 1200×630 像素

2. 上传预览图片

你可以通过两种方式设置预览图片：

方式一：直接输入图片 URL

在 og:image 输入框中填写图片的在线地址，例如 https://example.com/og-image.png。

方式二：拖拽或点击上传

将本地图片拖拽到上传区域，或者点击上传区域选择文件。工具会自动：

1. 生成本地预览 URL，立即在 8 个平台预览中显示效果
2. 检测图片的实际尺寸（宽×高）
3. 与推荐尺寸 1200×630 对比：
   • ✅ 绿色提示：尺寸符合要求
   • ⚠️ 橙色警告：尺寸不足，可能在某些平台上显示模糊或被裁切

注意：拖拽上传使用的是浏览器本地 blob URL，生成的代码中图片地址会自动替换为占位符 https://example.com/your-image.png，提醒你在实际使用时替换为线上地址。

3. 查看平台预览

输入区域下方会实时渲染 8 个社交平台和搜索引擎的预览效果：

通过并排查看多个平台的预览效果，你可以在同一个页面内快速发现问题——比如标题在微信中被截断，或者图片在 Pinterest 竖图中裁切不理想。

4. 复制生成的代码

代码输出区域自动生成完整的 OG + Twitter Card 元标签代码。点击右上角的复制按钮，即可将代码一键复制到剪贴板，然后粘贴到你网页的 <head> 标签内。

生成的代码包含：

<!-- OG 标签 -->
<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
<meta property="og:image" content="..." />
<meta property="og:url" content="..." />
<meta property="og:site_name" content="..." />
<meta property="og:type" content="website" />

<!-- Twitter Card 标签 -->
<meta name="twitter:title" content="..." />
<meta name="twitter:description" content="..." />
<meta name="twitter:image" content="..." />
<meta name="twitter:card" content="summary_large_image" />

5. 使用调试工具验证

代码区下方提供了四大平台的官方验证工具快捷链接：

• Facebook Debugger：检查 Facebook 如何解析你的 OG 标签，可强制刷新缓存
• Twitter Card Validator：预览 Twitter 卡片效果
• LinkedIn Inspector：检查 LinkedIn 分享预览
• Google Rich Results：测试结构化数据和搜索结果呈现

此外，还有指向像素检测工具的链接，可进一步检查 Title 和 Description 在 Google SERP 中的像素级显示效果。

完整工作流

推荐按以下流程使用本工具：

1. 编写：在输入区填写标题、描述和图片
2. 预览：检查 8 个平台的显示效果，重点关注文字截断和图片裁切
3. 调整：根据预览结果优化文案和图片
4. 复制：一键复制生成的代码
5. 粘贴：将代码插入到网页的 <head> 中
6. 验证：使用官方调试工具确认各平台的抓取结果

OG 标签完整参考

基础 OG 标签

以下四个是 Open Graph 协议中最核心的标签，也是大多数平台必需的：

扩展 OG 标签

图片相关标签

最佳实践：显式声明 og:image:width 和 og:image:height 可以让平台在抓取页面时直接使用这些尺寸，而无需先下载整张图片来检测尺寸，从而加快分享卡片的渲染速度。

Twitter Card 标签

Twitter Card 是 Twitter/X 平台特有的元数据标准。当 twitter:* 标签缺失时，Twitter 会自动回退到对应的 og:* 标签。

Twitter Card 类型

各平台图片尺寸要求

通用推荐：使用 1200×630 像素的图片可以在绝大多数平台上获得良好的显示效果，这也是本工具推荐的默认尺寸。

og:type 详细值

常用类型

article 类型扩展标签

当 og:type 为 article 时，可以使用以下扩展标签：

完整模板

以下是一个包含所有推荐标签的完整 HTML 模板：

<head>
  <!-- 基础 Meta -->
  <title>页面标题 | 品牌名</title>
  <meta name="description" content="页面描述，130-160 字符" />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:title" content="页面标题" />
  <meta property="og:description" content="页面描述" />
  <meta property="og:image" content="https://example.com/og.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="图片描述" />
  <meta property="og:site_name" content="品牌名" />
  <meta property="og:locale" content="zh_CN" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="页面标题" />
  <meta name="twitter:description" content="页面描述" />
  <meta name="twitter:image" content="https://example.com/og.png" />
  <meta name="twitter:image:alt" content="图片描述" />
  <meta name="twitter:site" content="@youraccount" />
</head>

常见问题

什么是 OG 预览工具？

OG 预览工具是一款免费的在线工具，帮助你在发布网页之前预览 Open Graph（OG）标签在各大社交平台上的展示效果。你可以实时编辑标题、描述和图片，同时查看 Facebook、Twitter/X、LinkedIn、Slack、微信、Pinterest、Discord、Google SERP 共 8 个平台的分享卡片效果，并一键生成 Meta 标签代码。

什么是 Open Graph 标签？

Open Graph（简称 OG）是 Facebook 在 2010 年推出的元数据协议。通过在网页 <head> 中添加 <meta property="og:*"> 标签，你可以控制网页在社交平台分享时的标题、描述和预览图片。几乎所有主流社交平台和即时通讯工具都支持 OG 协议。

我的数据安全吗？

完全安全。本工具是纯前端实现，所有数据处理都在你的浏览器中完成：

• 输入的文字不会发送到任何服务器
• 上传的图片不会离开你的浏览器（使用 blob URL）
• 无需注册、无需登录
• 不使用 Cookie 追踪用户行为

为什么推荐图片尺寸是 1200×630？

1200×630 像素（宽高比 1.91:1）是兼容性最好的 OG 图片尺寸：

• Facebook：推荐 1200×630（1.91:1）
• LinkedIn：推荐 1200×627（≈1.91:1）
• Twitter/X：推荐 1200×600（2:1），1200×630 也可接受
• WhatsApp：推荐 1200×630

使用这个尺寸可以在一张图片上同时兼顾大多数平台。当图片尺寸不足时（如小于 200×200），Facebook 可能会退回到文字模式显示，不展示图片。

标题和描述的字符限制是什么？

本工具设置的参考限制是：

• Title：60 字符
• Description：160 字符

这些数字来源于各平台的最佳实践经验：

超过限制时工具会以红色警告提示，但并不意味着必须缩短——这只是帮助你意识到文字可能被截断。

为什么微信的预览只显示小图片？

这是微信的设计决定。在微信中分享链接时，OG 图片会被裁切为标题右侧的一个小正方形（约 48×48 或 60×60 像素大小的缩略图）。这意味着：

• 图片中的小字基本看不清
• 图片效果远不如 Facebook 或 Twitter 明显
• 标题文案在微信场景中更加重要

如果你的主要分享渠道是微信，建议把精力集中在优化 og:title 上，而不是图片。

Twitter Card 和 OG 标签有什么区别？

Twitter Card 是 Twitter/X 平台自己的元数据标准，使用 twitter: 前缀。它与 OG 标签的关系是回退机制：

• 如果同时设置了 twitter:title 和 og:title，Twitter 使用 twitter:title
• 如果只设置了 og:title，Twitter 会自动使用它
• 如果两者都没设置，Twitter 使用 <title> 标签

最佳实践是同时设置两套标签（本工具的代码生成默认包含两套），确保在所有平台上都有最佳显示效果。

什么是 twitter:card 的类型？

twitter:card 有四种类型：

本工具生成的代码默认使用 summary_large_image，因为它的图片展示面积最大，视觉效果最好。

为什么平台不显示我更新后的 OG 标签？

社交平台会缓存已抓取的 OG 数据。修改 OG 标签后，你需要手动清除缓存：

• Facebook：使用 Sharing Debugger 输入 URL 并点击「Scrape Again」
• Twitter：使用 Card Validator 验证
• LinkedIn：使用 Post Inspector 检查
• Slack：在聊天中发送链接后，Slack 会自动重新抓取
• Discord：删除消息后重新发送链接即可触发重新抓取

本工具在代码输出区下方提供了这些调试工具的快捷链接，方便你直接跳转。

OG 标签会影响 SEO 吗？

OG 标签不直接影响搜索引擎排名。但它们通过以下方式间接帮助 SEO：

1. 提高社交分享的 CTR：好的 OG 标签让链接在社交平台上更吸引人
2. 增加外链机会：更多人分享 → 更多潜在外链
3. 标题候选：Google 可能使用 og:title 作为搜索结果标题的候选来源
4. 品牌搜索：更多社交曝光 → 更多品牌相关搜索

如何在 SPA（单页应用）中设置 OG 标签？

社交平台的爬虫通常不执行 JavaScript，因此在纯客户端渲染的 SPA 中，动态生成的 OG 标签不会被抓取。解决方案：

1. SSR（服务端渲染）：使用 Next.js、Nuxt.js 等框架在服务器端输出 OG 标签
2. SSG（静态生成）：构建时生成包含 OG 标签的静态 HTML
3. 预渲染服务：使用 Prerender.io 等服务为爬虫提供预渲染页面

如何检查我的网站现有的 OG 标签？

有几种方式：

1. 查看源码：在浏览器中右键 → 查看页面源代码 → 搜索 og:
2. 浏览器扩展：安装 OG 标签检查扩展（如 Open Graph Preview）
3. curl 命令：curl -s https://example.com | grep "og:"
4. 平台调试工具：使用 Facebook Debugger 输入 URL，可以看到抓取到的所有 OG 数据

本工具支持输入 URL 抓取现有 OG 标签吗？

目前不支持。这是一个有意为之的设计决策——为了保护你的隐私，本工具不会向任何服务器发送请求。所有操作均在浏览器端完成，你需要手动输入标题、描述等内容进行预览和调试。

如果你需要检查线上页面的现有 OG 标签，可以使用代码区下方的平台调试工具链接。

为什么本工具的预览效果和实际分享有差异？

本工具的预览基于各平台公开的设计规范模拟，但可能与实际分享效果存在细微差异，原因包括：

• 平台可能随时更新界面设计
• 不同设备/屏幕尺寸的显示有差别
• 平台可能对标题/描述进行二次处理（如截断、换行）
• 图片的实际裁切位置可能因算法不同而有偏差

建议将本工具作为快速预览和调试的起点，最终以各平台调试工具的结果为准。

一张图片能同时适配所有平台吗？

基本可以。使用 1200×630 像素的图片可以在大多数平台获得良好效果。但如果你特别关注某个平台，可以考虑：

• Pinterest：使用 2:3 竖图（1000×1500）效果更好
• Twitter/X：2:1（1200×600）是最佳比例
• 微信：由于只显示小方形缩略图，图片细节不太重要

如果资源允许，可以通过服务器端根据不同爬虫的 User-Agent 返回不同尺寸的图片，但这需要额外的技术实现。

Open Graph 协议详解

协议起源与演进

Open Graph 协议由 Facebook 在 2010 年 F8 开发者大会上正式推出，灵感来源于都柏林核心元数据集（Dublin Core）和其他 RDFa 标准。它的核心目标是将任何网页变成社交图谱（Social Graph）中的富对象——当用户分享链接时，平台可以自动提取结构化信息来生成吸引人的预览卡片。

协议规范托管在 ogp.me，由 Facebook 维护。虽然最初是为 Facebook 设计的，但由于其简洁实用，已被几乎所有主流社交平台和即时通讯工具采纳。

技术实现原理

标签放置位置

OG 标签必须放在 HTML 文档的 <head> 部分，使用 <meta> 标签的 property 属性（注意不是 name）：

<!-- ✅ 正确：使用 property 属性 -->
<meta property="og:title" content="页面标题" />

<!-- ❌ 错误：不应使用 name 属性（虽然部分平台也能解析） -->
<meta name="og:title" content="页面标题" />

例外：Twitter Card 标签使用的是 name 属性而非 property，这是 Twitter 的设计选择：

<meta name="twitter:card" content="summary_large_image" />

平台抓取机制

当用户在社交平台分享一个 URL 时，平台的爬虫（Crawler）会请求该 URL 并解析 HTML 中的 OG 标签。不同平台的爬虫有不同的 User-Agent：

理解爬虫行为对于调试 OG 标签非常重要。一些常见问题包括：

• JavaScript 渲染：大多数社交媒体爬虫不执行 JavaScript。如果你的 OG 标签是通过客户端 JavaScript 动态生成的，爬虫可能无法读取。必须确保 OG 标签在 HTML 源码中以静态形式存在（SSR 或 SSG）
• 重定向：爬虫通常会跟随 HTTP 重定向（301/302），但过多的重定向链可能导致超时
• 缓存：平台会缓存 OG 数据（Facebook 缓存约 24 小时），修改后需使用调试工具强制刷新

标签优先级

当同一信息存在多个来源时，平台通常按以下优先级解析：

1. 平台专属标签（如 twitter:title）— 最高优先级
2. OG 标签（如 og:title）— 次优先级
3. HTML 标准标签（如 <title>、<meta name="description">）— 回退方案

这意味着：

<title>HTML 标题</title>
<meta property="og:title" content="OG 标题" />
<meta name="twitter:title" content="Twitter 标题" />

• Facebook 显示：「OG 标题」
• Twitter 显示：「Twitter 标题」
• 如果删除 twitter:title，Twitter 显示：「OG 标题」
• 如果再删除 og:title，Twitter 显示：「HTML 标题」

OG 图片的技术要求

图片 URL 要求

• 必须是绝对 URL（包含 https:// 前缀）
• 相对路径（如 /images/og.png）不被支持
• 部分平台要求 HTTPS，HTTP 图片可能被忽略

图片抓取流程

1. 爬虫读取 og:image 的 URL
2. 发起 HTTP GET 请求下载图片
3. 解析图片尺寸和格式
4. 根据平台模板裁切/缩放图片
5. 缓存处理后的图片

如果你在 og:image 旁提供了 og:image:width 和 og:image:height，爬虫可以跳过步骤 3，从而加快渲染速度：

<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

动态 OG 图片

越来越多的网站开始使用动态生成的 OG 图片，通过 URL 参数实时渲染定制化图片。常见方案包括：

• Vercel OG Image Generation（@vercel/og）：使用 Satori 引擎将 React JSX 转为 SVG 再转为 PNG
• Cloudinary：通过 URL 参数进行图片变换和文字叠加
• 自建渲染服务：使用 Puppeteer/Playwright 截图生成

OG 与 SEO 的关系

Google 对 OG 标签的使用

Google 官方表示会在以下场景中参考 OG 标签：

• og:title：作为搜索结果标题的候选来源之一（与 <title>、<h1> 等并列）
• og:description：作为 Meta Description 的补充来源
• og:image：在 Google 图片搜索和 Google Discover 中可能使用

但 OG 标签不直接影响搜索排名。它们的 SEO 价值主要体现在：

• 提升社交分享的 CTR → 更多流量
• 更多社交分享 → 更多潜在外链
• 品牌曝光 → 品牌搜索量增加

结构化数据 vs OG 标签

OG 标签和 Schema.org 结构化数据（JSON-LD）服务于不同目的：

建议同时使用 OG 标签和结构化数据，它们分别优化不同渠道的展示效果。

常见框架中的 OG 标签实现

Next.js（Pages Router）

import Head from 'next/head'

export default function Page() {
  return (
    <Head>
      <title>页面标题</title>
      <meta property="og:title" content="页面标题" />
      <meta property="og:description" content="页面描述" />
      <meta property="og:image" content="https://example.com/og.png" />
    </Head>
  )
}

Next.js（App Router）

export const metadata = {
  title: '页面标题',
  description: '页面描述',
  openGraph: {
    title: '页面标题',
    description: '页面描述',
    images: [{ url: 'https://example.com/og.png', width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
    title: '页面标题',
    description: '页面描述',
    images: ['https://example.com/og.png'],
  },
}

Nuxt.js

<script setup>
useHead({
  title: '页面标题',
  meta: [
    { property: 'og:title', content: '页面标题' },
    { property: 'og:description', content: '页面描述' },
    { property: 'og:image', content: 'https://example.com/og.png' },
  ],
})
</script>

纯 HTML

<head>
  <meta property="og:title" content="页面标题" />
  <meta property="og:description" content="页面描述" />
  <meta property="og:image" content="https://example.com/og.png" />
  <meta property="og:url" content="https://example.com" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

OG 标签优化技巧

Title 标签写作技巧

控制在 60 字符以内

虽然没有严格的字符限制，但 60 字符是一个经过验证的安全范围。超过此长度的标题在 Facebook、Twitter/X 和 Google SERP 中都可能被截断。

✅ 免费 OG 预览工具 - 支持 8 大社交平台实时预览（42 字符）
❌ 这是一款功能非常强大的免费在线 Open Graph 预览和 Meta 标签生成工具，支持所有主流社交媒体平台的实时预览（65 字符）

将关键信息放在前 40 个字符

不同平台的标题截断位置不同。微信只显示约 30 个字符的标题，Twitter/X 在移动端也会较早截断。确保核心信息出现在标题前半部分。

不要重复站点名称

og:site_name 已经单独提供了网站名称。部分平台（如 Slack、Discord）会自动在标题上方显示站点名称，因此不需要在 og:title 中重复。

✅ og:title="JSON 在线格式化工具"    og:site_name="DevTool"
❌ og:title="DevTool - JSON 在线格式化工具"    og:site_name="DevTool"

Description 写作技巧

130-160 字符的黄金范围

Description 在不同平台的显示长度差异很大：

建议将最核心的价值主张放在前 65 个字符内（覆盖 Facebook），在 130 字符内提供完整的功能概述（覆盖大部分平台）。

包含行动号召

在描述末尾加入明确的行动号召，引导用户点击。

✅ 免费在线 OG 预览工具，一次编辑即可查看 8 大平台的分享效果。支持图片上传、代码生成，立即使用。
❌ 一个可以预览 Open Graph 标签的在线工具。

使用具体数字

数字比模糊描述更有说服力，也更容易在信息流中脱颖而出。

✅ 支持 8 大平台预览、1200×630 图片检测、一键生成 Meta 标签代码
❌ 支持多个平台预览，图片检测和代码生成

图片优化技巧

推荐尺寸：1200×630

这个尺寸（宽高比 1.91:1）兼容 Facebook、LinkedIn、Slack 等主流平台的大图显示。本工具在检测到上传图片尺寸时，会与此推荐尺寸进行对比。

关键内容居中

不同平台的图片裁切方式不同：

• Facebook / LinkedIn：按 1.91:1 从中心裁切
• Twitter/X：按 2:1 从中心裁切
• 微信：裁切为 1:1 小正方形，取中心区域
• Pinterest：按 2:3 竖向裁切

因此，将重要内容（如文字、Logo）放在图片中心区域，避免放在边缘以防被裁切。

图片上的文字

Facebook 曾有"20% 文字规则"（图片中文字面积不超过 20%），虽然现在已取消强制限制，但文字过多的图片仍可能影响广告投放效果。建议：

• OG 图片上的文字保持简短（标题 + 副标题即可）
• 使用足够大的字号，确保在缩略图中也能辨认
• 避免在图片中重复 og:title 的全部内容

图片格式与大小

• 推荐格式：PNG（文字清晰）或 JPEG（照片场景）
• 文件大小：控制在 1 MB 以内，避免抓取超时
• 协议：必须使用 HTTPS，HTTP 的图片在部分平台上不会被加载

各平台特殊优化

Facebook

• 使用 Facebook Sharing Debugger 强制刷新缓存
• Facebook 会缓存 OG 数据长达 24 小时，修改后需手动清除
• 提供 og:image:width 和 og:image:height 可加快首次分享的渲染速度

Twitter/X

• 必须设置 twitter:card 标签，否则不会显示富媒体卡片
• summary_large_image 适合大多数场景，图片显示更大
• 使用 Twitter Card Validator 预览效果

LinkedIn

• LinkedIn 不显示 og:description，仅显示图片和标题
• 使用 LinkedIn Post Inspector 检查和刷新缓存
• 图片建议 1200×627 以获得最佳显示效果

微信

• 微信对 OG 图片的处理比较特殊——显示为标题右侧的小正方形缩略图
• 关键文案需要在标题中表达清楚，因为描述通常不显示
• 分享到微信群和朋友圈的显示格式不同

Pinterest

• Pinterest 以图片为核心，OG 图片质量直接影响 Pin 的表现
• 推荐使用 2:3 竖图（1000×1500），更适合 Pinterest 的信息流布局
• 可通过 Rich Pins 获取更多元数据展示

Discord

• Discord 使用紫色（#5865F2）左边框的嵌入式卡片
• 支持 og:site_name 作为卡片顶部的小字标题
• 图片按 16:9 裁切显示

隐私优势

本工具采用纯前端实现，所有数据处理都在你的浏览器中完成：

• 输入的标题、描述等文本不会发送到任何服务器
• 上传的图片使用浏览器本地 blob URL，不会上传到云端
• 无需注册登录，无 Cookie 追踪
• 你的页面内容完全不会被第三方获取

这对于尚未发布的页面或包含敏感内容的项目尤其重要——你可以在发布前安全地预览和调试 OG 标签。