请注意
-
1.网页的meta标签一定要是后端生成的页面，也就是说server-side rendering，简称SSR
-
2.如果是页面中通过JS获取到数据后，动态修改meta标签内容，在分享时是无效的；因为facebook和twitter在页面刚打开时JS还没有加载时就读取了meta标签，如果这时你从服务器获取到了数据，动态修改了meta标签内容，会无效的
- Facebook是
og:开头的，动态调试你的页面是否配置正确，测试地址：https://developers.facebook.com/tools/debug/ - Twitter是
twitter:开头的
- Facebook是
Twitter的meta tags
<meta property="twitter:url" content="https://yooul.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0">
<meta property="twitter:type" content="article">
<meta property="twitter:title" content="Netflix在午夜<br>有一些电影推荐吗？">
<meta property="twitter:description" content="Netflix在午夜<br>有一些电影推荐吗？">
<meta property="twitter:image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim">
<meta name="twitter:image:src" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/1200/interlace/1|imageslim">
Facebook的meta tags
<meta property="fb:app_id" content="748486512258997">
<meta property="og:url" content="https://yooul.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0">
<meta property="og:type" content="article">
<meta property="og:title" content="Netflix在午夜<br>有一些电影推荐吗？">
<meta property="og:description" content="Netflix在午夜<br>有一些电影推荐吗？">
<meta property="og:image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim">
通用的meta tags
<meta property="url" content="https://yooul.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0">
<meta property="type" content="article">
<meta property="title" content="Netflix在午夜<br>有一些电影推荐吗？">
<meta property="description" content="Netflix在午夜<br>有一些电影推荐吗？">
<meta property="image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim">
<meta itemprop="image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim">
完整的网页
<html>
<head>
<title>Netflix在午夜<br>有一些电影推荐吗？</title>
<link rel="shortcut icon" href="https://qneventsource.mmantou.cn/faviconico.png" type="image/x-icon">
<link rel="shortcut icon" href="https://qneventsource.mmantou.cn/faviconico.png?imageView2/2/w/60/h/60/interlace/1|imageslim" type="image/x-icon">
<link rel="shortcut icon" href="https://qneventsource.mmantou.cn/faviconico.png?imageView2/2/w/76/h/76/interlace/1|imageslim" type="image/x-icon">
<link rel="shortcut icon" href="https://qneventsource.mmantou.cn/faviconico.png?imageView2/2/w/120/h/120/interlace/1|imageslim" type="image/x-icon">
<link rel="shortcut icon" href="https://qneventsource.mmantou.cn/faviconico.png?imageView2/2/w/152/h/152/interlace/1|imageslim" type="image/x-icon">
<meta property="url" content="https://yooul.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0">
<meta property="type" content="article">
<meta property="title" content="Netflix在午夜<br>有一些电影推荐吗？">
<meta property="description" content="Netflix在午夜<br>有一些电影推荐吗？">
<meta property="image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim">
<meta itemprop="image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim">
<meta property="fb:app_id" content="748486512258997">
<meta property="og:url" content="https://yooul.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0">
<meta property="og:type" content="article">
<meta property="og:title" content="Netflix在午夜<br>有一些电影推荐吗？">
<meta property="og:description" content="Netflix在午夜<br>有一些电影推荐吗？">
<meta property="og:image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim">
<meta property="twitter:url" content="https://yooul.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0">
<meta property="twitter:type" content="article">
<meta property="twitter:title" content="Netflix在午夜<br>有一些电影推荐吗？">
<meta property="twitter:description" content="Netflix在午夜<br>有一些电影推荐吗？">
<meta property="twitter:image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim">
<meta name="twitter:image:src" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/1200/interlace/1|imageslim">
<meta property="al:url" content="https://yooul.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0">
<meta property="al:type" content="article">
<meta property="al:title" content="Netflix在午夜<br>有一些电影推荐吗？">
<meta property="al:description" content="Netflix在午夜<br>有一些电影推荐吗？">
<meta property="al:image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim">
</head>
<body>
<!-- 网页真实显示的内容 -->
</body>
</html>
效果
