HTML怎么做分享图片_html og:image分享图片设置方法【含示例】

时间：2026-06-29 09:58:58 编辑：袖梨来源：一聚教程网

og:image必须是HTTPS绝对URL，置于<head>中<title>之后、<link rel="canonical">之前；需服务端硬编码输出，尺寸≥1200×630px，格式为.jpg或.png，且返回200状态码及正确Content-Type。

og:image 必须是绝对 URL，且图片资源必须可公开访问、返回 200 状态码、响应头含正确的 Content-Type（如 image/jpeg），否则微信、Facebook 等平台直接留白或报错。

必须放在 <head> 内，且严格位于 <title> 之后、<link rel="canonical"> 之前。任何塞进 <body>、用 JS 动态插入、或靠 React/Vue 客户端 patch 的方式，社交爬虫都看不到。

常见错误现象：og:image 在源码里搜得到，但分享预览没图——先右键「查看页面源代码」，确认标签是否真在 <head> 里；再用 curl -s yourdomain.com | grep 'og:image' 验证服务端吐出的内容是否正确。

写成 /images/share.jpg 或 ./assets/preview.png 都不行。必须带协议和域名，例如：

<meta property="og:image" content="https://example.com/images/cert-2026.jpg">

原因：社交平台的爬虫不走浏览器上下文，没有 base URL 概念，无法解析相对路径。

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

不是“能打开就行”，而是必须同时满足：

尺寸建议 ≥ 1200×630 像素（宽高比 1.91:1），太小会被拉伸模糊，太大加载超时（平台通常设 3 秒超时）
格式优先用 .jpg 或 .png；.webp 在 LinkedIn、旧版 Facebook 抓取器中可能不识别
用 curl -I https://example.com/images/cert-2026.jpg 检查返回状态码是否为 200 OK，且 Content-Type 是 image/jpeg（不能是 text/plain 或空）

特别注意：微信不 fallback 到第二张图，只认第一个 og:image；LinkedIn 要求 og:image:secure_url 和 og:image 同时存在且值一致，否则丢图。

用户分享的是文章页、证书页、商品页等不同 URL，每页 og:image 应该不同。但所有平台爬虫都不执行 JS，所以：

纯前端 SPA（如 Vue/React）必须走 SSR（Next.js、Nuxt）或静态预渲染，让服务端直接输出对应页面的 og:image
PHP/Node.js 等服务端模板，直接把变量插进 content 属性里，例如：<meta property="og:image" content="= $certImageUrl ?>">
千万别在 useEffect 或 mounted 里用 document.head.appendChild(...) —— 爬虫收不到

最容易被忽略的一点：同一套 HTML 模板被多个路由复用时，og:image 的值没随路由变化而更新，结果所有页面分享出来都是首页图。