I'm using Facebooks' Open Graph protocol :
http://developers.facebook.com/docs/reference/plugins/like/
Here's code for a test page. My understanding is that when someone "likes" this, the image icon that placed in the post on their
page should be the one specified in og:image, and the linkable url in the post should be the one specified in og:url.
In reality, it seems to truncate the URL to the domain, and instead of using the image provided it picks one seemingly at random (my guess is it's just taking the first image it sees from a scan or specified elsewhere in the code).
Am I doing anything obviously wrong here?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Site</title>
<meta property="og:title" content="My Site Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.mysite.org/videos/index/16922653" />
<meta property="og:image" content="http://b.vimeocdn.com/ts/104/367/104367616_200.jpg" />
<meta property="og:site_name" content="My Site" />
<meta property="og:app_id" content="5555555555" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="image_src" href="http://b.vimeocdn.com/ts/104/367/104367616_200.jpg" />
</head>
<body>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://www.mysite.org/videos/index/16922653" show_faces="false" width="450" />
</body>
</html>
Update: #echese
Good suggestion. Ran it, got this feedback from the "debug" section:
Data Source "website" extracted from <meta property="og:type" />
Data Source "My Site Title" extracted from <meta property="og:title" />
Data Source "http://www.mysite.org/videos/index/16922653" extracted from <meta property="og:url" />
Data Source Extracted 1 values from <meta property="og:image" />: http://b.vimeocdn.com/ts/104/367/104367616_200.jpg
Data Source "My Site" extracted from <meta property="og:site_name" />
Looks like it understands the image url. It suggested some iframe code which I tried but still no dice, I don't get the image I specify.
Try running the URL Linter to see if you can find any errors on your pages.
hmm maybe (maaaaaaybe) it's because you dont have the og namespace on the html tag..
or.. maybe because the image's url is on a different domain than your page?
good luck
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.
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" />
I recently added a share button on all of the artwork on my site, so that people viewing the artwork can easily share it on Facebook. The share button works in that the FB link does take the user to the correct artwork (url is correct). However, the image in the link is always an ugly clip out of the center of my logo banner (same image on every page on the site) and the og:xxx meta tags on my page seem to have absolutely no effect in customizing the link as Facebook claims they should. Here's the head section of one of my pages:
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:og="https://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<link rel="stylesheet" type="text/css" href="stitzart.css" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="art, acrylic, flip, pour, artwork, colorful, dirty cup" />
<meta name="description" content="Hilda Stitz Art Gallery featuring dirty cup pours in acrylic." />
<meta property="og:url" content="http://www.stitzweb.com/art/art.php?id=18" />
<meta property="og:type" content="article" />
<meta property="og:title" content="StitzArt - #033" />
<meta property="og:description" content="Little Planet" />
<meta property="og:image" content="http://www.stitzweb.com/art/images/share018.png" />
<title>StitzArt - Hilda Stitz Artwork</title>
</head>
and the share button on that page pulls up this dialog:
Facebook Share Dialog (with incorrect information)
How can I make the pic, title and description in the share dialog match what's in the meta data? I've searched all day and I've almost given up. The feature works for sharing, but it would be so much better if people could see a preview of the artwork before clicking on the link. Thanks in advance for any help you might offer.
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
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 :(