【问题标题】:How Viber select the image to display from HTML pageViber 如何从 HTML 页面中选择要显示的图像
【发布时间】:2016-01-22 07:31:48
【问题描述】:

当我通过 Viber 向某人发送一些 URL 时,Viber 会加载 URL 并显示代表 HTML 页面的图像。

如何告诉 HTML 页面应该是什么图像?

【问题讨论】:

    标签: html tags viber


    【解决方案1】:

    您应该使用Open Graph 协议。您可以简单地将这个 sn-p 添加到您的页面<head>

    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Название сайта">
    <meta property="og:title" content="Заголовок">
    <meta property="og:description" content="Описание.">
    <meta property="og:url" content="http://example.com/page.html">
    <meta property="og:locale" content="ru_RU">
    <meta property="og:image" content="http://example.com/img.jpg">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">
    
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Заголовок">
    <meta name="twitter:description" content="Описание.">
    <meta name="twitter:image:src" content="http://example.com/img.jpg">
    <meta name="twitter:url" content="http://example.com/page.html">
    <meta name="twitter:domain" content="example.com">
    <meta name="twitter:site" content="@">
    <meta name="twitter:creator" content="@...">
    

    图片尺寸应为 968x504 像素。阅读更多here

    干杯!

    【讨论】:

    • Viber 并不总是依赖于开放的图形标签。无论是否有打开的图形或 twitter 元标记,它仍然会生成图像
    【解决方案2】:

    我相信 Viber 会拍摄它从您的网站找到的第一张照片(不包括背景!)。我进行了一些测试,发现如果您将图像放在 HTML 顶部的注释部分 - &lt;!-- &lt;img src='myImg.jpg'/&gt;--&gt; - 它也会接受它作为源代码中的第一个图像文件。因此,您可以放置​​任何您喜欢的图像。

    【讨论】:

    • 也许每个版本的 Viber 都不一样,但对我不起作用。
    【解决方案3】:

    根据我的测试,Viber 在页面上成功获得了第一个 jpg/png 图像,尺寸小于 40Kb

    如果浏览器中没有真正显示图像,您也可以使用display: none 将其隐藏,仅用于 Viber 预览。

    【讨论】:

      【解决方案4】:

      对于 Viber、Facebook 等,您需要在网站的主页(页眉中)放置以下标签:

      <meta property = "og:type" content = "website" /> <!-- For website -->
      <meta property = "og:title" content = "Your_title" />
      <meta property = "og:url" content = "https://your_site_url.com/" />
      <meta property = "og:description" content = "Your_short_description" />
      <meta property = "og:image" content = "https://your_site_url.com/your_image.jpg" />
      <meta property = "og:site_name" content = "Your_site_name" />
      

      注意:我认为 Viber 不支持 og:image 属性的 http 图像协议。只有https。 对于那些在服务器端没有https 协议的人,我建议将图像托管在其他https 站点(例如imgur.com)上,并且只在og:image 标签中插入指向图像的直接链接。

      【讨论】:

      • 原则上你可能是对的,但是我在这里发现和写的东西,我在stackoverflow.com上的任何地方都没有找到,在其他论坛上也没有。这个和其他几个与 Viber 上的 Open Graph 图像相关的主题与这个问题直接相关,其中的解决方案就是我所写的。我很少在这个论坛上写东西,在我看来,我应该更积极地帮助其他同事。但是,考虑一个特定的案例,如果您认为它没有用,请随时删除它。这会给我一个额外的理由让我更加被动。
      • 感谢您将其转化为答案。现在请更明显地与旧的现有和赞成的答案stackoverflow.com/a/41953593/7733418 的区别@ 即请让您的帖子在之前已经存在的内容之上提供的额外见解更加明显......
      猜你喜欢
      • 2018-02-19
      • 2017-07-23
      • 2023-01-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-08-05
      • 2014-05-03
      • 2015-10-01
      相关资源
      最近更新 更多