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?
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!
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.
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.
Related
This is the very first time I try to deploy something. Though the webpage is for testing purposes and not finished yet but I want to share it for my friend to see.
When I share my web with some of my friends, I can't see the open graph image
It just displays like this
I'm just trying to implement a very simple static open graph image, not the dynamic one.
Here's how I set up my head in the public/index.html of my React-app
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Mirai</title>
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Watch anime"
/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="application-name" content="Mirai"/>
<meta name="apple-mobile-web-app-title" content="Mirai"/>
<meta property="og:title" content="Mirai"/>
<meta property="og:description" content="Watch free anime"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://mirai-huy8856.vercel.app/">
<meta property="og:image" content="https://s4.anilist.co/file/anilistcdn/media/anime/banner/101922-YfZhKBUDDS6L.jpg"/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
</head>
Here's my VERCEL App, I've View Source and saw that it has og meta tag in there, but Facebook refuses to read the image, what have I done wrong?
Here's the Image I tried to implement.
This is my folder structure in the ReactJS application.
You can test your OpenGraph settings on the Facebook Debugger here:
https://developers.facebook.com/tools/debug/
It is worth noting with OpenGraph Image data you should supply additional data; namely:
<meta property="og:image" content="https://s4.anilist.co/file/anilistcdn/media/anime/banner/101922-YfZhKBUDDS6L.jpg"/>
<meta property="og:image:type" content="image/jpeg" >
<meta property="og:image:width" content="1800" >
<meta property="og:image:height" content="550" >
Further; looking at the page you give on your metadata OpenGraph URL tag
https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fmirai-huy8856.vercel.app%2F
The de-bugger states:
Missing Properties
The following required properties are missing: fb:app_id
I have seen that when we put a url of a website, an image appears for that URL. Examples include social media sites Like Google+, Facebook, Instagram. I need to know how to add such an image to my website. Is there a certain tag Or script that should be applied to show that image?
When I share my website link I don't get such a one. I need to know why and how to do it.
OG tags are used by these social sites as below:
Site info OG tags Start
<meta property="og:site_name" content="$site_name" />
<meta property="og:url" content="$site_url" />
<meta property="og:type" content="website" />
<meta name="title" property="og:title" content="$the_title" />
<meta name="image" property="og:image" content="$site_logo"/>
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">
<meta name="description" property="og:description" content="$site_description" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" description="#username" />
<meta name="twitter:title" content="$the_title" />
<meta name="twitter:description" content="$site_description" />
<meta name="twitter:image:src" content="$site_logo">
<meta name="twitter:domain" content="$site_url">
Site info OG tags End
Add the following tags to the <head> section of the HTML code of the page you need to share:
<link rel="image_src" href="{image}" />
<meta name="twitter:image" property="og:image" content="{image}" />
And replace {image} with the URL of the page image.
When you add the tags, Social Media sites can still share the page without an image. It happens because sites cache pages data. You need to wait the cache to be cleaned or clean it manually (some sites, e.g. Facebook, provide this possibility; it is a topic for another question).
Open Grapgh code in head.
<head>
<title>Sale Scrap</title>
<meta charset="utf-8">
<meta property="og:title" content="salescrap.online" />
<meta property="og:image" content="www.salescrap.online/Image-Building/5a66f4a440a12building.gif">
<meta property="og:description" content="Ads post by Name:Awais Phone Number:03016660717">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Facebook sharing Button
<a href="http://www.facebook.com/share.php?u=www.salescrap.online/detail.php?Id=4&Type=Image-Building"
target="_blank"><strong style="color:#007bff;">Share On:</strong><img src="Image/Facebook.png" width="150px" height="50px">
this code not work proper and not get info. when i click on share button open in new tap and on facebook site not get picture and skip the last part like this -> Type=Image-Building from this link http://www.facebook.com/share.php?u=www.salescrap.online/detail.php?Id=4&Type=Image-Building and also not get info through <og> meta tag in WhatsApp.
https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Fwww.salescrap.online%2Fdetail.php%3FId%3D4%26Type%3DImage-Building
Provided og:image URL, www.salescrap.online/Image-Building/5a66f4a440a12building.gif was not a valid URL
Add the protocol to your og:image:
<meta property="og:image" content="http://www.salescrap.online/Image-Building/5a66f4a440a12building.gif">
Example , facebook depend on meta info:
<meta property="og:title" content="{{$heading}}"/>
<meta property="og:type" content="article"/>
<meta property="og:description" content="{{$tip_info}}"/>
<meta property="fb:app_id" content="{{Config::get('facebook.app_id')}}" />
<meta property="og:url" content="{{$url}}"/>
<meta property="og:image" content="{{$photoLink}}"/>
<meta property="og:site_name" content="vivo"/>
But in line app (http://line.me/en/), when i share link website, it only parse text and not receive any thumbnail image althougt website have many image.
They use Facebook Open Graph
<meta property=”og:image” content=”http://static.naver.jp/line_lp/img/ogp.png”>
<meta property=”og:title” content=”LINE : Free Calls & Messages”>
<meta property=”og:description” content=”LINE is a new communication app”>
Search for How are the URL previews in chats and on Timeline generated?
on the Line Faq link: https://developers.line.me/en/faq/
and refer to this blog article
I send the structure of the meta tag:
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
</head>
just want to make people who see here note:
the content of og:image, which is the url, must need to be static, that means
start with
https://.......
not
/......
since the crawler of the SNS will not know where you save the thumbnail
this is really doing my head in. I have a site that is not allowing facebook to scrape data and show og:image parameters.
I have tried the following:
remove any disallows in robots text (just in case)
Make images smaller (they were huge)
check and double check markup of og tags
tried also adding the images to the page in case they also needed to be
there rather than displayed in a js slider
Checked blacklist of URL
cleared browsing history (as described by another user in my searches)
uploaded a resized thumbnail rather than using php to create the dynamic thumb (images are dynamic on this site)
created a blank test static html page with pretty much nothing on it to really
trouble shoot the issue.
it still doesn't work.
Here is my test page code. i removed urls for now. but if you want to check the page just ask me.
<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.mysite.co/test/" />
<meta property="og:title" content="my site Test Page" />
<meta property='og:site_name' content='my site' />
<title>Homepage</title>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta property="og:image" content="http://www.mysite.co/test/43FINFAdeleThiel1.jpg" />
</head>
<body>
<img src="http://www.mysite.co/test/43FINFAdeleThiel1.jpg">
</body>
</html>
Thanks in advance everyone, this is really eating up my time :(