OG标签不生效主因是og:url与分享链接不一致或og:image不可访问，而非字段遗漏；需确保og:url为HTTPS绝对路径且完全匹配、og:image返回200且允许爬虫访问，并通过平台调试工具验证原始HTML。

加了 OG 标签不生效，大概率不是漏写了字段，而是 og:url 不一致、og:image 返回 404 或被防盗链拦住——这些错误不会报错，但卡片会静默降级为纯链接。

og:url 必须和用户实际分享的 URL 完全一致

这是最容易被忽略却最致命的一环。微信、Facebook、LinkedIn 等平台会用你声明的 og:url 去重新抓取页面，如果它和用户粘贴的链接不完全匹配（协议、大小写、尾部斜杠、UTM 参数等任一不同），就可能：抓到首页、抓到 404、或缓存旧版本卡片。

• og:url 必须是 HTTPS 绝对路径，不能是 /article/123 或 //example.com/article/123
• 动态页（如带 ?utm_source=weibo）需服务端去参后输出 canonical 地址，否则同一内容多个 URL 会被当不同页面处理
• 测试时直接用分享平台的调试工具（如 Facebook Sharing Debugger）输入真实分享链接，别只看本地 HTML 源码

og:image 不是“放上去就行”，关键在可访问性

图片挂掉是卡片失效的第一大原因。平台不会提示“图加载失败”，只会默默 fallback 到网页首图、logo，甚至留白。

• og:image 必须是 HTTPS 开头的绝对 URL，file://、相对路径、data: 协议全部无效
• 服务器响应必须返回 200 OK，禁止 302 跳转、403 防盗链拦截、或 chunked 编码（部分 Express 默认启用流式响应，需手动设 res.setHeader('Transfer-Encoding', 'identity')）
• 推荐尺寸 ≥ 1200×630 px，格式仅用 .jpg 或 .png；WebP 在 LinkedIn 和老版 Facebook 上兼容性差
• CDN 或图片服务需允许 facebook.com、twitter.com 等域名的 HEAD 和 GET 请求，CORS 头不能限制

客户端渲染（React/Vue）页面必须服务端注入 OG 标签

微信、QQ、Facebook 爬虫不执行 JS，document.head.appendChild() 动态插入的 meta 标签完全无效——哪怕你在 useEffect 或 mounted 里加了，也白加。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

• SPA 页面必须走 SSR（如 Next.js 的 getServerSideProps）或静态预渲染（如 SSG + getStaticProps）生成真实 HTML
• 若用 Nginx/Apache 做反向代理，确保未把 og:* 标签过滤掉（某些安全配置会 strip unknown property 属性）
• 调试时用 curl 或浏览器“查看网页源代码”（不是开发者工具 Elements 面板），确认标签真正在原始 HTML 中

别硬塞 twitter:* 或 article:* 标签，先保底再增强

很多团队一上来就堆 twitter:card、article:published_time，结果因字段值格式不对或平台不支持，反而干扰基础解析。

• 起步只需 4 个字段：og:title、og:description、og:url、og:image，所有主流平台（微信/QQ/微博/Facebook/Discord）都认
• og:type 设为 website 或 article 即可，不要自定义类型（如 blog_post），Facebook 会 fallback 到 website
• twitter:* 标签只对 Twitter/X 生效；Facebook 不读它，但若没写 og:*，会 fallback 读 twitter:* —— 所以优先写 og:*，有余力再补 twitter:card=summary_large_image 等

真正卡住人的是细节：比如 og:image 的响应头缺 Content-Length，或 og:url 少了个结尾斜杠，或服务端用了 gzip 流式压缩但没设 Content-Encoding。这些问题不会报错，只能靠平台调试工具抓原始响应看 headers 和 status code。