I know there are similar questions about this here and here.
I have done the mandatory steps of 2020 standard from those links but description and thumbnail are still not being displayed on WhatsApp.
The link that I have been testing is: https://research.verdhana.id/TEST
My website is already secured by SSL with valid SSL certificate (not self-signed).
The thumbnail is a JPEG image with size of 18KB and 400x400 dimension.
I use Vue.js and I do not use server side rendering, so I put all the mandatory meta tags inside index.html so they can be read by crawler even javascript is not executed.
The og:image tag already uses full path and same domain.
The og:url meta tag will always be the same for any URL path because it is written in the index.html, but I think it should not be a problem.
Here are the tags inside head tag:
<head>
<meta property="fb:app_id" content="my_fb_id" />
<meta property="og:image" content="https://research.verdhana.id/logo.jpg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
<meta property="og:title" content="Verdhana | Research" />
<meta property="og:description" content="Verdhana research website" />
<meta property="og:url" content="https://research.verdhana.id" />
<meta property="og:site_name" content="Verdhana | Research" />
<meta property="og:type" content="website" />
<link rel="shortcut icon" href="<%= BASE_URL %>logo.ico" />
<link rel="icon" href="<%= BASE_URL %>logo.ico" />
<title>Verdhana | Research</title>
<meta name="description" content="Verdhana research website" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css" />
</head>
My website description and thumbnail are still not shown by WhatsApp like you can see below.
I tried to get preview on Facebook Debugger and iframely and both of them show the description and thumbnail.
EDIT:
I have added fb:app_id tag but still not showing.
Are there any missing steps I need to do?
Just tried it with my WhatsApp and it's working fine for me:
Probably does not apply in case of the OP, but dumping this answer here for others with a similar issue.
In our case, the issue was that the og:image URL did not include a file extension (.jpg). We are using Cloudinary, and in their case file extensions in the image URLs are not required.
Once we added the .jpg to the image URL, the image started showing up in the Whatsapp previews.
Make sure the value for og:url matches the full URL https://research.verdhana.id/TEST
<meta property="og:url" content="https://research.verdhana.id/TEST" />
Related
Facebook fetches all pictures from my site.
I want to share only one picture which is on that page.
I heard about the og meta tag, but I don't know how to put it.
Use:
<!-- For Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />
<!-- For Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />
<!-- For Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />
Fill the content =" ... " according to the content of your page.
For more information, visit 18 Meta Tags Every Webpage Should Have in 2013.
Facebook uses what's called the Open Graph Protocol to decide what things to display when you share a link. The OGP looks at your page and tries to decide what content to show. We can lend a hand and actually tell Facebook what to take from our page.
The way we do that is with og:meta tags.
The tags look something like this -
<meta property="og:title" content="Stuffed Cookies" />
<meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">
You'll need to place these or similar meta tags in the <head> of your HTML file. Don't forget to substitute the values for your own!
For more information you can read all about how Facebook uses these meta tags in their documentation. Here is one of the tutorials from there - https://developers.facebook.com/docs/opengraph/tutorial/
Facebook gives us a great little tool to help us when dealing with these meta tags - you can use the Debugger to see how Facebook sees your URL, and it'll even tell you if there are problems with it.
One thing to note here is that every time you make a change to the meta tags, you'll need to feed the URL through the Debugger again so that Facebook will clear all the data that is cached on their servers about your URL.
I built a tool for meta generation. It pre-configures entries for Facebook, Google+ and Twitter, and you can use it free here: http://www.groovymeta.com
To answer the question a bit more, OG tags (Open Graph) tags work similarly to meta tags, and should be placed in the HEAD section of your HTML file. See Facebook's best practises for more information on how to use OG tags effectively.
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).
I want to share this link (https://s3.eu-central-1.amazonaws.com/lavorotrentino/index.html) through a Facebook status.
The problem I'm facing is the missing facebook preview that should be based on the meta tag info in index.html:
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<link rel="canonical" href="https://s3.eu-central-1.amazonaws.com/lavorotrentino/index.html" />
<link rel="image_src" href="https://s3.eu-central-1.amazonaws.com/lavorotrentino/abc.jpg"/>
<title>Lavoro in Trentino</title>
<meta property="og:title" content="Lavoro in Trentino" />
<meta property='og:site_name' content='LIT' />
<meta property="og:description" content="Nuove opportunità pubblicate oggi sul portale dell'Agenzia del Lavoro trentina."/>
<meta property="og:type" content="article" />
<meta property="og:url" content="https://s3.eu-central-1.amazonaws.com/lavorotrentino/index.html" />
<meta property="og:image" content="http://s3.eu-central-1.amazonaws.com/lavorotrentino/abc.jpg" />
<meta property="og:image:secure_url" content="https://s3.eu-central-1.amazonaws.com/lavorotrentino/abc.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
</head>
I tried to find the problem with the Open Graph Object Debugger but it seems like the tags are ok:
Facebook Object Debugger result:
.
The message warning:
"fb:app_id hasn't been included in the meta tags. Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog. Otherwise, the default app id( 966242223397117 ) will be assigned."
should not be a problem for simply sharing a link.
Are there issues with the amazon s3 free 1 year trial?
Turns out to post using open-graph you do need an appID. It was easy to make.
https://developers.facebook.com/docs/opengraph/getting-started#create-app
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.