【发布时间】:2016-01-22 07:31:48
【问题描述】:
当我通过 Viber 向某人发送一些 URL 时,Viber 会加载 URL 并显示代表 HTML 页面的图像。
如何告诉 HTML 页面应该是什么图像?
【问题讨论】:
当我通过 Viber 向某人发送一些 URL 时,Viber 会加载 URL 并显示代表 HTML 页面的图像。
如何告诉 HTML 页面应该是什么图像?
【问题讨论】:
您应该使用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 会拍摄它从您的网站找到的第一张照片(不包括背景!)。我进行了一些测试,发现如果您将图像放在 HTML 顶部的注释部分 - <!-- <img src='myImg.jpg'/>--> - 它也会接受它作为源代码中的第一个图像文件。因此,您可以放置任何您喜欢的图像。
【讨论】:
根据我的测试,Viber 在页面上成功获得了第一个 jpg/png 图像,尺寸小于 40Kb。
如果浏览器中没有真正显示图像,您也可以使用display: none 将其隐藏,仅用于 Viber 预览。
【讨论】:
对于 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 标签中插入指向图像的直接链接。
【讨论】: