Menu
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?
848
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.
112
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!
12
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.
5
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.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
