最新H5网页分享到Twitter、Facebook带缩略图

请注意
　　1.网页的meta标签一定要是后端生成的页面，也就是说server-side rendering，简称SSR
　　2.如果是页面中通过JS获取到数据后，动态修改meta标签内容，在分享时是无效的；因为facebook和twitter在页面刚打开时JS还没有加载时就读取了meta标签，如果这时你从服务器获取到了数据，动态修改了meta标签内容，会无效的
Facebook是og:开头的，动态调试你的页面是否配置正确，测试地址：https://developers.facebook.com/tools/debug/
Twitter是twitter:开头的

Twitter的meta tags

        <meta property="twitter:url" content="https://yooul.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&amp;locale=zh-CN&amp;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&amp;locale=zh-CN&amp;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&amp;locale=zh-CN&amp;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在午夜&lt;br&gt;有一些电影推荐吗？</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&amp;locale=zh-CN&amp;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&amp;locale=zh-CN&amp;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&amp;locale=zh-CN&amp;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&amp;locale=zh-CN&amp;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>

使用第三方的服务，生成meta组

果你不知道应该有一个什么样的meta标签组，可以使用该网站HEY META，你只需要输入如description，keywords等信息，它会生成专门针对Google，Facebook，Twitter的meta组，喜欢的可以访问尝试下。如使用一个之前博客的，生成的meta组如下

<!-- HTML Meta Tags -->
<title>Vue组件三-Slot分发内容</title>
<meta name="description" content="Vue组件三-Slot分发内容开始Vue组件是学习Vue框架最比较难的部分，而这部分难点我认为可以分为三个部分学习，即  组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息，父组件监听消息 分发内容  整片博客使用的源代码-请点击 所以将用三篇博客分别进行介绍以上三种情况和使用 木头楔子/插槽在学习内容分发之前，我们先了解一个木工会经常使用的一种拼接两个家具的接口——木头楔">
 
<!-- Google / Search Engine Tags -->
<meta itemprop="name" content="Vue组件三-Slot分发内容">
<meta itemprop="description" content="Vue组件三-Slot分发内容开始Vue组件是学习Vue框架最比较难的部分，而这部分难点我认为可以分为三个部分学习，即  组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息，父组件监听消息 分发内容  整片博客使用的源代码-请点击 所以将用三篇博客分别进行介绍以上三种情况和使用 木头楔子/插槽在学习内容分发之前，我们先了解一个木工会经常使用的一种拼接两个家具的接口——木头楔">
<meta itemprop="image" content="http://raw.githubusercontent.com/beyondverage0908/Blog/master/resoure/componet_slot_qizi.jpeg">
 
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://beyondverage0908.github.io/2018/05/13/blog-2018-05-13">
<meta property="og:type" content="website">
<meta property="og:title" content="Vue组件三-Slot分发内容">
<meta property="og:description" content="Vue组件三-Slot分发内容开始Vue组件是学习Vue框架最比较难的部分，而这部分难点我认为可以分为三个部分学习，即  组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息，父组件监听消息 分发内容  整片博客使用的源代码-请点击 所以将用三篇博客分别进行介绍以上三种情况和使用 木头楔子/插槽在学习内容分发之前，我们先了解一个木工会经常使用的一种拼接两个家具的接口——木头楔">
<meta property="og:image" content="http://raw.githubusercontent.com/beyondverage0908/Blog/master/resoure/componet_slot_qizi.jpeg">
 
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Vue组件三-Slot分发内容">
<meta name="twitter:description" content="Vue组件三-Slot分发内容开始Vue组件是学习Vue框架最比较难的部分，而这部分难点我认为可以分为三个部分学习，即  组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息，父组件监听消息 分发内容  整片博客使用的源代码-请点击 所以将用三篇博客分别进行介绍以上三种情况和使用 木头楔子/插槽在学习内容分发之前，我们先了解一个木工会经常使用的一种拼接两个家具的接口——木头楔">
<meta name="twitter:image" content="http://raw.githubusercontent.com/beyondverage0908/Blog/master/resoure/componet_slot_qizi.jpeg">

相关阅读:
团队冲刺第一阶段第三天
 团队冲刺第一阶段第二天
 团队冲刺第一阶段第一天
 学习进度07
学习进度06
结对编程之子数组最大的和（由于一直登不上我的账号，在规定日期内只在我搭档的博客上交了）
小学四则运算网页版
 团队介绍
 学习进度条05
111
原文地址：https://www.cnblogs.com/shenjingwa/p/14073283.html