查看: 8602|回复: 0

[通用问题] 关于facebook分享链接时显示卡片效果

[复制链接]

Rank: 5Rank: 5

主题:
帖子:
积分:
0

[通用问题] 关于facebook分享链接时显示卡片效果

[复制链接]
8602 0 | 发表于 2019-1-7 12:10:37 |阅读模式 | |
本帖最后由 刘芳丽 于 2019-4-3 15:59 编辑

按照官方规则开放图谱标记、以及分享调试器工具,呈现卡片效果

给分享链接地址的htmlhead标签下添加相关meta标签,下面是一个简单示例例,具体参数配置参考

开放图谱标记

  1. <font face="微软雅黑" size="3"><!-- <meta property="og:url" content="这里填写链接地址,注释掉默认就是当前链接" /> --><meta property="og:type" content="website" />
  2. <meta property="og:title" content="Mob官网 - 全球领先的移动开发者服务平台" />
  3. <meta property="og:description" content="Mob是全球领先的移动开发者服务平台,可满足移动应用开发中SDK需求,涵盖深度链接、第三方登录分享、短信验证、消息推送等功能。已累计帮助近30万个开发者团队降低开发成本,提高集成效率,构建最贴心的一站式服务平台" />
  4.   <meta property="og:image" content="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=16  76807226,2726748277&fm=173&app=25&f=JPEG?w=640&h=412&s=5EDDA944C6F17D9E2B37D19A0300  909B" />  <meta property="og:image:type" content="image/jpeg"></font>
复制代码



上方
"og:image"就是卡片效果中的图片,亦可使用"og:video"显示视频或其他 媒体内容类型


如果已经在分享的链接地址配置上面的meta标签,可以通过 分享调试器 进行测试

对图片要求:

1. 允许的最小图像尺寸是200 x 200像素,且图像文件的大小不能超过8MB

2. 最好是1200 x 630以上像素,能更好的在高清设备上显示

3. 如果你使用图片是600 x 315以上像素,将显示大图样式


67C45882-FC71-4184-86B7-AF2116B815C6.png

4. 如果你使用图片是600 x 315以下像素,将显示小图模式

78A3D9E5-3FCA-4126-A7F1-4D00306A15BD.png


注意事项:

关于<meta property="og:url" content=... />的问题


举个栗子:两个链接 link_1link_2
link_1:

  1. <font face="微软雅黑" size="3"><html>
  2. <head>
  3. <meta property="og:url" content="link_2" />
  4. <meta property="og:type" content="website" />
  5. <meta property="og:title" content="link_1 title" />
  6. <meta property="og:description" content="link_1 description" /> <meta property="og:image" content="link_1 图片地址" />
  7. <meta property="og:image:type" content="image/jpeg">
  8. </head>
  9. <body>
  10. </body>
  11. </html>
  12. link_2:
  13. <html>
  14. <head>
  15. <meta property="og:type" content="website" />
  16. <meta property="og:title" content="link_2 title" />
  17. <meta property="og:description" content="link_2 description" /> <meta property="og:image" content="link_2 图片地址" />
  18. <meta property="og:image:type" content="image/jpeg">
  19. </head>
  20. <body>
  21. </body>
  22. </html></font>
复制代码

上面link_1中配置"og:url"content值为link_2不是自己本身,那么分享链接link_1时显示的效果 将会使用link_2


"og:title""og:description""og:image""og:image:type"等值,这点需要注意



如果分享时要呈现自己当前链接下meta标签,那么配置"og:url"content值为自己当前链接值, 或不配置"og:url",默认就是当前链接值












您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

技术支持
免费咨询 | 24小时在线
快速回复 返回顶部 返回列表