when I send some URL to someone via Viber the Viber load the URL and displays image representing the HTML page.
How to tell the HTML page what image it should be?
How Viber select the image to display from HTML page
You should use Open Graph protocol. You can simply add this snippet to your page <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="@...">
Image size should be 968x504px. Read more here
Cheers!
Viber doesn't always rely on open graph tags. It still produces an image regardless of whether there are open graph or twitter meta tags –
Discommon
adding this snippet did not fix the image in viber for me –
Laney
I believe that Viber takes the first picture it finds from your website (backgrounds not included!). I have made some tests and have found out that if you place an image in a comment section at the top of your HTML - <!-- <img src='myImg.jpg'/>--> - it will also accept it as a first image file in your source code. Thus you can put whatever image you like.
Maybe is every version of Viber different but doesn't work for me. –
Contented
From my test, Viber successfully got first jpg/png image on page with size less than 40Kb.
Even you can hide it with display: none if it is not really shown image in browser, just for Viber preview.
For Viber, Facebook and others, you need to place the following tags on the main page (in the header) of the site:
<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" />
NOTE: I don't think Viber supports the http image protocol for og:image property. Only https.
For those who do not have https protocols on server side, I suggest that the images be hosted on other https sites (such as imgur.com), and only insert a direct link to the image in og:image tag.
In principle, you may be right, but what I discovered and wrote here, I did not find anywhere on stackoverflow.com, but also on other forums. This and several other topics, related to Open Graph images on Viber, are directly related to this problem in which the solution is what I wrote. I write very rarely on this forum, and it seems to me that I should be more active in helping other colleagues. However, consider a specific case and if you think it is not useful, feel free to delete it. This will give me an extra reason to be more passive. –
Decosta
Thanks for turning this into an answer. Now please make more obvious the difference to the older existing and upvoted answer https://mcmap.net/q/805397/-how-viber-select-the-image-to-display-from-html-page I.e. please make the additional insight more obvious which your post provides on top of what was already there before... –
Davena
© 2022 - 2024 — McMap. All rights reserved.