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

最新推荐文章于 2023-02-15 18:07:27 发布

M.François

最新推荐文章于 2023-02-15 18:07:27 发布

阅读量1w

点赞数 1

分类专栏： Web 浏览器文章标签： html

本文链接：https://blog.csdn.net/u013538542/article/details/104996814

版权

Web 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

浏览器

5 篇文章 0 订阅

订阅专栏

请注意

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://baidu.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://baidu.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://baidu.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://baidu.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://baidu.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://baidu.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://baidu.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>