HTML怎么做分享图片_html og:image分享图片设置方法【含示例】
作者：袖梨
2026-06-29
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 等平台直接留白或报错。og:image 标签写在哪？位置错了等于没写
必须放在 <head> 内，且严格位于 <title> 之后、<link rel="canonical"> 之前。任何塞进 <body>、用 JS 动态插入、或靠 React/Vue 客户端 patch 的方式，社交爬虫都看不到。
常见错误现象：og:image 在源码里搜得到，但分享预览没图——先右键「查看页面源代码」，确认标签是否真在 <head> 里；再用 curl -s yourdomain.com | grep 'og:image' 验证服务端吐出的内容是否正确。
og:image 的 URL 必须是绝对路径，相对路径全失效
写成 /images/share.jpg 或 ./assets/preview.png 都不行。必须带协议和域名，例如：
<meta property="og:image" content="https://example.com/images/cert-2026.jpg">
原因：社交平台的爬虫不走浏览器上下文，没有 base URL 概念，无法解析相对路径。
立即学习“前端免费学习笔记（深入）”；
- 如果用 CDN，确保 CDN 域名已配置 CORS，且图片未被
robots.txt屏蔽 - 避免使用带查询参数的 URL（如
?v=1.2.3），部分平台会缓存旧版本或拒绝抓取 - 微信对 HTTP 图片直接拦截，务必用 HTTPS
图片本身要过三关：尺寸、格式、可访问性
不是“能打开就行”，而是必须同时满足：
- 尺寸建议 ≥
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 同时存在且值一致，否则丢图。
动态页面怎么配 og:image？别用 JS 注入
用户分享的是文章页、证书页、商品页等不同 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 的值没随路由变化而更新，结果所有页面分享出来都是首页图。
