网站分享到 discord、facebook、twitter 等平台时无缩略图和描述？根本原因是缺少 open graph（og）元标签——本文手把手教你正确配置 og:title、og:description、og:image 等关键标签，并提供可直接复用的 html 代码与避坑指南。
网站分享到 discord、facebook、twitter 等平台时无缩略图和描述？根本原因是缺少 open graph（og）元标签——本文手把手教你正确配置 og:title、og:description、og:image 等关键标签，并提供可直接复用的 html 代码与避坑指南。
当你将一个 URL 分享到 Discord、Facebook、LinkedIn 或 Slack 等平台时，系统会自动抓取页面中的结构化元数据，生成富文本预览（含标题、摘要、缩略图）。而你当前的 标签（如 description、keywords）仅面向搜索引擎， 对社交平台完全无效 ——它们依赖的是 Open Graph 协议（OG 标签），即以 property=”og:xxx” 声明的 元素。
✅ 正确配置 Open Graph 标签
在
中补充以下基础 OG 标签（务必放在
之后、其他 meta 之前）：</p>
<pre><code class='language-default'><!-- 必填：当前页面的规范 URL --> <meta property="og:url" content="https://yourwebsite.com/page-path/" /> <!-- 必填：页面类型，常见值：website、article、profile --> <meta property="og:type" content="website" /> <!-- 必填：预览标题（建议 ≤ 60 字符，优先于 <title>）--> <meta property="og:title" content=" 我的网站名称 | 当前页面标题 " /> <!-- 推荐：预览描述（建议 ≤ 155 字符，比 name="description" 更受社交平台信任）--> <meta property="og:description" content=" 这里是简洁有力的页面简介，说明核心价值或内容亮点。" /> <!-- 必填（强烈推荐）：预览图片（关键！）--> <meta property="og:image" content="https://yourwebsite.com/images/preview.jpg" /> <!-- 可选但推荐：指定图片宽高，提升加载稳定性 --> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <!-- 可选：站点名（显示在预览底部，增强品牌识别）--> <meta property="og:site_name" content=" 我的网站名称 " /></code></pre>
<blockquote>
<p>? <strong> 重要提示 </strong>：og:image 必须满足平台要求—— </p>
<ul>
<li> 推荐尺寸：<strong>1200×630 像素 </strong>（宽高比 1.91:1）；</li>
<li> 格式：JPG 或 PNG（避免 WebP 在旧平台兼容性问题）；</li>
<li> 路径：<strong> 必须为绝对 URL</strong>（含 https://），相对路径或 /images/xxx.jpg 将失效；</li>
<li> 可访问性：图片需公开可爬取（检查 robots.txt 和服务器权限），且加载时间 </li>
</ul>
</blockquote>
<h3>⚠️ 常见错误与调试建议 </h3>
<ul>
<li>❌ 错误：仅使用 <meta name="description"> 试图替代 og:description → 社交平台忽略；</li>
<li>❌ 错误：og:image 指向本地路径（如 ./img.jpg）或未部署的测试地址 → 预览为空白；</li>
<li>❌ 错误：HTML 中存在多个 og:url 或 og:title → 平台可能解析失败；</li>
<li>✅ 调试工具：<ul>
<li>Facebook：<a href="https://www.php.cn/link/803523d233c42a1fc11cc41033a7b76f" rel="nofollow" target="_blank">Sharing Debugger</a>（强制刷新缓存）；</li>
<li>Twitter（X）：<a href="https://www.php.cn/link/3348eb92c98456b4ef8930705f073148" rel="nofollow" target="_blank">Card Validator</a>；</li>
<li>Discord：无官方工具，但可先在 Discord 测试频道中粘贴链接观察效果（首次分享后缓存约 24 小时，需用新 URL 或加参数如 ?v=2 触发重抓）。</li>
</ul>
</li>
</ul>
<h3>? 进阶优化（可选）</h3>
<ul>
<li> 对文章类页面，增加 <meta property="og:article:published_time" content="2024-05-20T08:00:00+00:00">；</li>
<li> 支持 Twitter Card（兼容性更好）：补充 <meta name="twitter:card" content="summary_large_image"> 等标签；</li>
<li> 使用服务端动态渲染（如 Next.js、Nuxt）时，确保 OG 标签在 SSR 阶段注入，而非仅客户端 JS 生成（否则爬虫无法读取）。</li>
</ul>
<p> 完成配置并部署后，务必使用上述调试工具验证。一旦通过，你的链接分享将立即呈现专业、吸引点击的富媒体预览——这是提升用户点击率与品牌可信度的关键一步。</p>
<p> 
