Facebook分享图片点击跳转问题：需跳转至网站主页而非图片地址

嘿，我懂你遇到的这个问题！现在你用Sharer工具分享图片后，点击Facebook上的图片会直接跳转到图片的URL，但你希望它跳转到网站主页对吧？这其实是因为你传给Sharer的u参数是图片的地址——Facebook默认会把这个参数对应的URL作为分享内容的跳转目标。

咱们可以用Open Graph（OG）标签来完美解决这个问题，步骤很简单：

第一步：修改分享代码 #

把原来的u参数换成你的网站主页URL，记得用encodeURIComponent编码一下，避免特殊字符搞出问题：

window.open("https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent("https://mydomain.com"), "pop", "width=600, height=400, scrollbars=no"); 
return false;

第二步：给主页添加OG标签 #

在你的网站主页（mydomain.com）的<head>部分，添加下面这些Open Graph元标签，告诉Facebook要展示哪张图片，以及分享内容的其他信息：

<!-- 指定分享时显示的图片 -->
<meta property="og:image" content="https://mydomain.com/image.png">
<!-- 建议添加图片尺寸，符合Facebook的最佳显示要求 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- 指定分享内容跳转的URL（就是你的主页） -->
<meta property="og:url" content="https://mydomain.com">
<!-- 可选：添加分享的标题和描述，让内容更吸引人 -->
<meta property="og:title" content="你的网站名称或标题">
<meta property="og:description" content="一段简短的网站描述">

这样设置之后，当用户通过你的按钮分享时，Facebook会自动抓取主页的OG标签，展示你指定的图片，而点击分享内容时就会跳转到你的网站主页啦！

如果因为特殊情况没法修改主页的OG标签（比如需要分享多张不同图片，每张都要跳转到主页），那可以考虑给每张图片做一个单独的中转页面——页面里设置对应的OG标签，然后加上一段自动跳转到主页的JS代码。不过这种方式比较麻烦，还是推荐上面的OG标签方案，更简洁也符合Facebook的分享规范。

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