网站分享到 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 之前）：<pre class="brush:php;toolbar:false;"><!-- 必填：当前页面的规范 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="我的网站名称" /></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>
