最简可用og标签只需4个必填字段：og:title、og:description、og:url、og:image，均需严格符合格式与协议要求，且必须服务端渲染，客户端动态插入无效。
Open Graph 标签不是“加了就一定生效”，关键在 og:url、og:type 和 og:title 三个基础字段是否准确且可被爬虫访问；多数分享失败，其实是因为页面没部署 HTTPS 或 og:image 返回了 404/302/跨域响应。
怎么写最简可用的 OG 标签
只保留 4 个必填字段即可触发基础分享（微信、QQ、微博、Facebook 均兼容）：
-
og:title：必须是纯文本，别塞 HTML 实体或换行符，长度建议 ≤ 32 字符 -
og:description：同上，避免含敏感词或广告语（微信会截断或降权） -
og:url：必须与用户当前访问 URL 完全一致（含协议、大小写、尾部斜杠），不能是相对路径或短链 -
og:image：必须是 HTTPS 协议的绝对 URL，尺寸建议 ≥ 1200×630 px，格式为 JPG/PNG，响应头需含Content-Type且不能返回重定向（302）
示例（放在 内）：
<meta property="og:title" content="前端调试的 3 个冷知识"><meta property="og:description" content="console.table 不止能打数组，还有这些隐藏用法"><meta property="og:url" content="https://example.com/blog/debug-tips"><meta property="og:image" content="https://example.com/img/debug-og.jpg">
为什么微信/QQ 分享不显示图片或描述
常见原因不是标签写错，而是服务端或 CDN 配置问题：
- 微信内置浏览器（X5 内核）只抓取
og:image的原始 URL，不走 referer 或 cookie，若图片加了防盗链（Referer白名单）或需登录态，必然 403 - QQ 分享会预检
og:image的响应头：必须有Content-Length，且不能是 chunked 编码（部分 Node.js/Express 默认启用流式响应，需显式设置res.setHeader('Transfer-Encoding', 'identity')） - 所有平台都不支持
og:image:secure_url替代 HTTP 图片——哪怕页面是 HTTPS，og:image也必须是 HTTPS
动态页面（React/Vue/SSR）怎么安全注入 OG 标签
客户端渲染（CSR）页面无法被微信/QQ 爬虫执行 JS，所以 document.head.appendChild() 动态插入 OG 标签完全无效。必须服务端输出：
- Next.js：用
next/head或generateMetadata（v13.4+）生成静态 meta，避免在useEffect里操作 DOM - Nuxt 3：用
useHead({ meta: [...] })，但仅在 SSR 模式下生效；若启用了ssr: false，OG 标签将丢失 - 纯静态站点（如 Vite + Markdown）：构建时用插件（如
vite-plugin-html）根据路由模板注入，而非运行时 JS
验证方式：直接用 curl 请求页面 HTML，检查返回源码中是否存在对应 <meta property="og:xxx"> —— 爬虫看到的永远是这个。
调试工具和真机验证要点
别信“本地打开 HTML 就能看效果”。必须用真实环境验证：
- 微信：用「微信开发者工具」→「公众号网页调试」，粘贴线上 URL；注意它缓存严重，改完标签后要清缓存或换 URL 参数（如
?t=123） - Facebook：用
https://developers.facebook.com/tools/debug/，输入 URL 后点 “Scrape Again”，重点看 “Response Code” 和 “Image Cache Status” - 微博：用
http://open.weibo.com/tools/debug，它对og:type要求严格——必须是article、blog、website之一，其他值会被忽略
一个容易被忽略的点：og:type 如果设为 article，Facebook 会额外要求 article:published_time，否则降级为 website；而微信根本不读这个字段——不同平台对同一套标签的容忍度差异极大，别默认“写全就稳”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
