Facebook图文分享

简介

• 当一个链接被分享的时候, Facebook会先获取到相关的网页，读取它的 tags 来展现指定的信息
• Facebook利用Open Graph协议使用tags。可以在 Open Graph 网站中查看到tags 的一个完整的列表
• 用到的主要有以下几个

<meta property="og:site_name"     content="my site_name" />
<meta property="og:type"          content="website" />
<meta property="og:title"         content="my Website Title" />
<meta property="og:description"   content="my description" />
<meta property="og:image"         content="https://xxx.com/path/image.jpg" />
<meta property="og:image:secure_url"         content="https://xxx.com/path/image.jpg" />
<!-- <meta property="og:url"           content="https://xxx/your-page.html" /> -->

备注：

• site_name：网站名称，可以不配置
• type：类型，网站的话就是website
• title：分享显示的标题。不配置的话显示<title></title>标签内的值。最多70个字符
• description：分享显示的描述。不配置的的话显示<meta name="description" />的值。最多200个字符
• image：分享显示的图片。最小200 * 200；最大纵横比3:1；png、jpeg或者gif格式。如果配置多个，多加几个这个标签即可。图像大小小于1MB
• image:secure_url：https站点上面用的分享显示的备用图片
• url：跳转的意思。用于分享的不是当前页面的情况。一般不配置。网址必须是标注网址。不得包含任何计数器和会话变量

测试网址效果

facebook for developer

可以将要分享的网页地址拿到facebook for developer中测试

facebook 官网

可以将要分享的网页地址拿到facebook 官网中测试

社交媒体分析

• 如果想使用Facebook的分析工具。必须提供唯一的ID号码关联你的账户
• 如果不使用分析工具，就不用配置这个tags。它不会对被分享网页在FaceBook上的展现产生影响

<meta property="fb:app_id" content="your_app_id" />

总结

<!-- 必需的 Meta Tags -->
<meta property="og:title"         content="my Website Title" />
<meta property="og:description"   content="my description" />
<meta property="og:image"         content="https://xxx.com/path/image.jpg" />
<!-- <meta property="og:url"           content="https://xxx/your-page.html" /> -->

<!-- https站点必需的 -->
<meta property="og:image:secure_url"         content="https://xxx.com/path/image.jpg" />

<!-- 非必需，但是推荐的 -->
<meta property="og:site_name"     content="my site_name" />
<meta property="og:type"          content="website" />

<!-- 非必需，但是分析要用的 -->
<meta property="fb:app_id" content="your_app_id" />