分享网页到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中正确的显示分享信息，并且点击后可跳转到实际的分享页面中。
2903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
