Facebook sharer.php分享弹窗403 Forbidden 桌面端默认移动视图

现有实现代码 #

<meta property="og:image" content="https://url.com/{{ article.img_path }}">
<meta property="og:type" content="website"/>
<meta property="og:title" content="{{ article.title }}"/>
<meta property="og:description" content="{{ article.title }}"/>
<meta property="og:url" content="https://url.com/{{ article.path }}"/>
.
.
<a href="https://www.facebook.com/sharer/sharer.php?u=https://url.com/{{ article.path | urlencode }}">
<i class="fa fa-facebook-square fa-2x"></i>
</a>

异常表现 #

• 分享弹窗加载内容时返回403 Forbidden错误
• 桌面端设备访问时，分享界面默认展示移动端视图样式

修复方案 #

403错误修复 #

• 放行Facebook爬虫UA：Facebook抓取页面元信息、封面图资源时，请求UA包含facebookexternalhit字段，检查站点的防火墙、WAF、防盗链规则，将该UA加入白名单，不要拦截对应请求。
• 确认资源公开属性：待分享的页面地址、OG配置的封面图地址不能有登录校验、IP/地区访问限制，在浏览器无痕模式下直接访问对应地址可正常打开，才符合Facebook爬取要求。
• 校验OG标签规范：所有OG标签必须直接写在页面<head>标签内，不能通过JavaScript动态延迟加载（Facebook爬虫不会执行页面JS），标签内的地址必须是带http/https协议的绝对路径，不能使用相对路径。

移动端样式问题修复 #

直接通过a标签href跳转分享地址时，Facebook默认返回适配移动端的全屏页面。给分享按钮添加点击弹窗逻辑，指定固定弹窗宽高，Facebook会自动返回桌面端样式的分享界面，替换原有a标签代码即可：

<a href="https://www.facebook.com/sharer/sharer.php?u=https://url.com/{{ article.path | urlencode }}" target="_blank" onclick="window.open(this.href,'fb-share','width=580,height=520');return false;">
<i class="fa fa-facebook-square fa-2x"></i>
</a>

配置完成后，使用Facebook官方分享调试工具重新爬取页面，清除历史缓存即可生效。

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