分享网页到FaceBook的问题

由于项目中需要分享一个网页到社交App中，供C端用户使用。如分享到微信、Facebook、WhatsApp等。
分享到微信时很简单，只需要按照微信提供的分享SDK要求参数传入就可以了。
这些参数包含标题、描述、图片和点击的网页链接，需要注意的是文字长度和图片尺寸不要超过微信的要求即可。

但是当分享网页到Facebook时，Facebook使用的是Open Graph Protocol（开发图谱协议）从网页链接对应的Html文件中解析特定meta标签，来获取展示在好友动态中的链接信息（图片、标题、描述）。如下图所示：

所以我们必须在分享网页中事先添加好对应的meta标签，具体meta标签含义如下：

如果说，og:title、og:description、og:image对应的内容是固定的值，那么就可以写死在分享的网页中。但是，如果是动态内容，对于是前后端分离的项目，html页面不是由服务端渲染的，那么就需要通过JS脚本额外从服务端请求数据，但是Facebook是无法抓取到的，因为在执行分享操作时不会执行Html页面中JS脚本。

那么该怎么解决呢？

放弃使用网页分享的方式，改为文本或图片的分享
改为SSR（Server Size Render）方式构建网页
将分享的静态网页链接改为一个服务端请求，由服务端完成查询数据的操作后，插入meta到静态html页面中

上面三种方式中：
第一种应该是最简单的，但是会与产品要求不符。
第二种是最合理，但改动成本比较大，与开发模式不符。
第三种是比较鸡贼的做法，涉及到了文件操作。但是要求后端服务与前端项目部署到同一个服务器，否则无法访问到静态html页面。并且静态html页面路径和名称会被限制死。

那么还有没有更好的方案呢？
当然有，我想到的终极方案就是：

由后端渲染一个提供必要meta标签的极简html页面，并在这个极简HTML页面中做一次二次跳转，跳转到真正的分享页面。

举个例子：
假如我实际要分享的链接A为 https://www.xxx.com/details?id=1234。
而提供给Facebook的链接B为 http://www.xxx.com/facebook_test?id=1234

在链接B对应的html中提供了必要的meta标签和二次跳转的操作：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="xxxxx">//以下内容是由服务端查询对应id数据后生成的<meta property="og:title" content="页面标题"><meta property="og:description" content="页面描述"><meta property="og:image" content="https://xxxxx.png"></head><body><script language='javascript'>document.location = '链接A'</script></body>
</html>

这样做的话，就可以再Facebook中正确的显示分享信息，并且点击后可跳转到实际的分享页面中。

分享网页到FaceBook的问题相关推荐

分享网页加载速度优化的一些技巧？
日期:2013-2-17 来源:GBin1.com 不管你是不是相信,在最近的几年里,互联网网页的大小已经显著增大了.由HTTP Archive研究得出的结果表明,目前平均一个页面的大小是1.25M ...
微信分享网页链接缩略图不显示解决方法
微信分享网页链接缩略图不显示解决方法参考文章: (1)微信分享网页链接缩略图不显示解决方法 (2)https://www.cnblogs.com/68xi/p/11596254.html 备忘一下.
微信分享网页链接自定义图片和文字描述
今天开发需要微信分享网页链接自定义图片和文字描述,于是网上各种查找资料和各种看手册,遇到了好多坑,不过啃了半天以后终于把问题解决了,以防以后忘记,今天记录一下; 首先,由于微信已经发布了想要分享链接必 ...
html怎么写分享代码,怎么写一个文件分享网页？百度一键分享按钮HTML代码
怎么写一个文件分享网页?首先一个基本的网页包含主要的哪些就不说了,下面直接上关键的代码即可,把他放到需要的地方即可.下面一起来看看吧. 百度一键分享按钮HTML代码下面是需要加分享按钮的css代码 ...
好程序员web前端教程分享网页设计需要学那些东西？
好程序员web前端教程分享网页设计需要学那些东西:初次接触或者想要进入网页设计行业的朋友会经常分不清楚web前端与网页设计之间的区别,不知道网页设计要学什么,web前端要学什么,因此感到很迷茫,下面老 ...
分享网页文章到微信时如何自定义缩略图、链接、标题和摘要
1.分享网页文章到微信时自定义缩略图.链接.标题和摘要的方法: var imgUrl = http://www.gettool.cn/GetwxLink/xxx.jpg';var lineLink = ...
Android开发丶集成微信原生分享并于分享网页时加载网络缩略图
微信分享也是一项很常用的功能了,以往都是用友盟或者mobShareSDK框架来实现的,这两者在微信官方的sdk基础上封装的很好,并且加入了一些很实用性的功能,不过这次因为只有微信平台的分享,而且微信登 ...
html页面微信分享如何隐藏链接,微信分享网页链接缩略图不显示解决方法
微信分享网页不显示缩略图片的原因为规范自定义分享链接功能在网页上的使用,自2017年4月25日起,JSSDK"分享到朋友圈"及"发送给朋友"接口,自定义的分享 ...
php分享网页到微信,分享网页链接到微信朋友圈或朋友
前提微信自6.5.5版本起对分享网页链接做了限制,如果不接入JSSDK,则分享出去的内容不会显示自定义的图片,而是显示一张默认图片使用JSSDK进行分享时,需要一个经过微信认证的服务号或者订阅号, ...

分享网页到FaceBook的问题

分享网页到FaceBook的问题

分享网页到FaceBook的问题相关推荐

最新文章

热门文章