如何实现分享链接到Facebook时隐藏标题、描述并修改链接及图片跳转？

1. 制作中间跳转页面 #

先搭建一个独立网页（比如命名为fb-share.html），这个页面是核心：Facebook会抓取它的信息生成分享展示内容，用户打开该页面后点击图片就能跳转到目标地址。

2. 用Open Graph标签控制Facebook显示效果 #

在页面的<head>标签内添加以下代码，直接定义Facebook抓取的内容：

<!-- 清空标题和描述，实现隐藏效果 -->
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<!-- 设置Facebook分享时显示的链接地址 -->
<meta property="og:url" content="你想展示的链接地址" />
<!-- 设置分享时显示的图片 -->
<meta property="og:image" content="你的图片绝对访问地址" />
<meta property="og:type" content="website" />

注意：og:image必须填可公开访问的图片绝对地址，否则Facebook无法抓取到图片；og:url填写你希望在Facebook分享框里展示的链接。

3. 实现图片点击跳转功能 #

在页面的<body>标签内添加以下代码，让图片铺满页面并绑定跳转事件：

<a href="你的目标跳转地址" target="_blank">
  <img src="你的图片绝对访问地址" style="width:100%;height:100vh;object-fit:cover;cursor:pointer;" />
</a>

样式里的height:100vh让图片占满整个屏幕，用户打开页面即可直接点击跳转；cursor:pointer会让鼠标显示为手型，提示可点击。

4. 测试与缓存刷新 #

将中间页面的链接分享到Facebook，就能看到标题、描述被隐藏，仅显示你设置的图片和链接。如果分享后显示的是旧内容，使用Facebook官方调试工具刷新缓存即可生效。

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