HTML中Meta标签Opengraph协议对多平台分享预览的适配-html教程-PHP中文网

微信不识别og:image，优先读取meta name="description"和首张；twitter忽略og:description，只认twitter:description；og:url必须与分享url完全一致；调试时需检查http响应头和状态码。

html中meta标签opengraph协议对多平台分享预览的适配

og:image 为什么在微信里不显示

微信根本不用 og:image，它优先读 meta name="description" 和页面第一个 <img>，除非你额外加 mp:wx:preview_image（仅限公众号）。静态页面想让微信显示指定图，最稳的做法是：确保首张 <img src="https://...?x-oss-process=image/resize,p_40"> 可公开访问、HTTPS、尺寸 ≥ 300×300，且没有 loading="lazy" 或 CSS 隐藏。

别指望 og:image 对微信生效——它只在 Facebook、LinkedIn、Twitter 等平台起作用
微信 iOS 客户端对 HTTP 协议极其敏感，哪怕页面是 HTTPS，<img> 的 src 写成 http:// 也会白屏
如果用了 CDN，确认其响应头含 Access-Control-Allow-Origin: *，否则微信安卓可能拒绝加载

Twitter 为什么不认 og:description

Twitter 完全忽略 og:description，只认 twitter:description。即使你写了 og:description，它也不会 fallback 过去——没写 twitter:description 就等于没描述。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

twitter:description 必须和 twitter:title、twitter:card 一起出现，否则 Twitter 可能降级为纯文本卡片
twitter:card 值必须是 summary 或 summary_large_image；填错（比如大小写或拼写）会导致整张卡片失效
长度建议 ≤ 200 字符，超长会被截断，且不支持换行——所有空格都算字符，别用或 \n

og:url 写错会导致卡片被当成不同页面

og:url 不只是“看起来像链接”，它必须和用户实际分享的 URL 完全一致：协议、大小写、尾部斜杠、查询参数一个都不能多也不能少。Facebook 和 LinkedIn 会严格比对，稍有出入就缓存两份元数据，结果改完标签后新旧卡片混着显示。

动态路由页（如 /post/123）务必服务端渲染出真实 URL，别用 window.location.href 拼接
带 UTM 参数的分享链接（如 ?utm_source=wechat）不能作为 og:url 值——应剥离参数，指向规范地址
推荐同时加 <link rel="canonical" href="...">，且值与 og:url 完全相同，强化归一性

调试时 Scrape Again 不生效的真正原因

点了 Facebook Sharing Debugger 的 Scrape Again 却没更新，大概率不是按钮失灵，而是你的服务器返回了 304、302 或缓存头干扰了重抓。社交平台爬虫不会绕过 HTTP 缓存策略。

检查响应头：Cache-Control: public, max-age=3600 是安全的；no-cache 或 must-revalidate 反而会让部分平台跳过更新
确保 HTML 响应状态码是 200，不是 200 OK (from disk cache) 这类伪 200
用 curl -I https://yourdomain.com/page 直接看原始响应头，比浏览器开发者工具更可信

微信和微博根本不按 Open Graph 标准走，它们各自有一套隐性规则；而 Facebook、Twitter 虽认 OG，但对字段缺失、格式错误、缓存策略极其敏感——这些细节不手动验证，光靠“写了 meta”毫无意义。