使用Facebook sharer分享产品链接时无法加载指定产品图且内容带HTML标签

核心逻辑说明 #

你当前使用的sharer.php接口本身不支持手动传入自定义分享的标题、描述、图片参数，所有分享展示的内容完全由Facebook爬虫抓取你传入u参数的目标产品页的Open Graph（OG）标签生成，两类异常全部围绕OG标签的生成、抓取、缓存三个环节排查即可。

分享不加载指定产品图、随机抓取其他图的处理 #

• 先修正OG标签的生成规则
  • 你当前写死的og:image指向IMDb的公共测试图不符合业务需求，需改为动态输出当前产品对应的主图绝对URL，每个产品页要绑定自身专属的og:image地址
  • og:image必须符合Facebook的抓取要求：
    • 使用完整可公开访问的绝对URL，禁止用相对路径，优先使用HTTPS协议的图片地址
    • 图片尺寸不小于600×315像素，大小不超过8MB，无重定向跳转
    • 建议补充og:image:width、og:image:height、og:image:type三个配套标签，明确告知图片属性，提升识别成功率
  • 所有OG标签必须放在页面的<head></head>区域，禁止放在body内，也不要依赖前端JavaScript动态渲染OG标签——Facebook爬虫不会执行JS逻辑，动态生成的OG标签完全无法读取
• 排查爬虫拦截问题
  • 检查服务器访问日志，确认是否有UA为facebookexternalhit/1.1的访问记录，如果无相关记录，说明爬虫被服务器防火墙、WAF或CDN规则拦截，需将该UA加入白名单
  • 爬虫被拦截时无法读取你的OG标签，会自动随机抓取页面的普通img元素，这是当前随机取图的最常见原因
• 刷新Facebook缓存
  • Facebook会长期缓存页面的OG标签信息，修改配置后旧缓存不会自动更新，需使用Facebook官方提供的分享调试工具，强制触发爬虫重新抓取目标产品页，刷新缓存后再测试
  • 如果调试工具显示爬虫读取到的OG标签和你编写的不一致，回到前两步排查标签生成规则和拦截问题

分享内容携带HTML标签的处理 #

• 该问题核心原因是你输出的og:title、og:description标签本身携带了未过滤的HTML标签
• 解决方式：在后端渲染og:title、og:description时，先对内容做HTML标签过滤，仅输出纯文本内容后再写入meta标签，禁止直接将带HTML格式的产品标题、描述内容直接输出到OG标签中

内容的提问来源于stack exchange，提问作者Bhawesh