I'm trying to make sure that when my website is shared the correct meta information is displayed. I thought I had it working but I'm experiencing a few issues on different social websites, as follows:
Twitter pulls in the text but doesn't display the specified image.
LinkedIn displays text but seems to use the wrong image so it's stretched.
Facebook doesn't display anything. If I post the URL, that's all that's displayed as a hyperlink.
Originally I just had the meta name="twitter: stuff but have since added the meta property="og: above it as I was told that was needed for LinkedIn.
This is the meta/OpenGraph data I'm using in my website head:
<!-- OpenGraph -->
<meta property="og:title" content="myurl.com - What this website is" />
<meta property="og:description" content="Specialising in lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod." />
<meta property="og:url" content="http://myurl.com" />
<meta property="og:image" content="/img/site/linkedin-media-image.png" />
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="#twitteruser">
<meta name="twitter:url" content="https://myurl.com">
<meta name="twitter:title" content="I am a lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.">
<meta name="twitter:description" content="Specialising in lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.">
<meta name="twitter:image" content="/img/site/social-logo.png">
Can anyone spot what I'm missing? Twitter seems ok, aside from the image not display and the URL is correct. While LinkedIn doesn't use the og correctly and Facebook is non-existent?
Thanks in advance.
Image requires a full path, I tried relative as well but didn't work.
Your use of "twitter:url", "twitter:title", twitter:description" and "twitter:image" is redundant unless you want different behavior for twitter only. If these tags are not found, twitter will fall back to OGP tags.
For Facebook, you might be missing the following :
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
Tools to debug OG preview :
Facebook
Twitter
LinkedIn
My problem is, LinkedIn seems to stretch the image in spite of their documentation saying that minimum size is 80 x 150px to prevent it from being artificially stretched to fit the layout.
Try to include the full path of the image. Also with facebook you may need to scrape the page again.
If you go to this page https://developers.facebook.com/tools/debug/ enter your site it should show you any errors. You will also need to hit the scrape again button when you make any changes
Related
I tried facebook share. i added everything on my head tag like og:image,og:title,og:description but it is not showing the image when share it on facebook. When i debug it using facebook preview it shows og:image url but not as preview.
<meta property="og:title" content="Lorem Ipsum" />
<meta property="og:description" content="Lorem Ipsum Lorem Ipsum Lorem Ipsum" />
<meta property="og:image" content="images/OG_image.png" />
please read through the whole post before marking this as duplicate of Facebook Share Story Image Does Not Appear For First time or related questions.
I'm creating a dynamic page (with unique url and image) that users can share on facebook with a share dialog.
According to https://developers.facebook.com/docs/sharing/best-practices#precaching Facebook need to scrape the url in og:image before it can show it in the share dialog.
This can be done either by using the sharing debugger OR setting og:image:width and og:image:height metatags on the page that is shared.
Since the site I'm making potentially can get a lot of unique pages and images, I don't want hack together a script to programmatic call the sharer debugger (or sharer.php with the unique urls) to make this work. So I'm trying to use the og:image:width and og:image:height metatags.
Unfortantly I've not been able to make this work.
The first time the page is shared it does not show the image specified in og:image. The second time it does.
I've created two demo-files to back this up:
http://beerco.de/fbgifshare/urls_without_ts.php
This page has the follwing metatags and fb.ui code:
<meta property="og:url" content="http://beerco.de/fbgifshare/test.gif">
<meta property="og:title" content="Lorem Ipsum">
<meta property="og:description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum lacinia nisl ut hendrerit. Sed elementum, urna id accumsan ultrices, lectus felis bibendum lectus, sed ornare velit elit eleifend ipsum.">
<meta property="og:image" content="http://beerco.de/fbgifshare/test.gif"
<meta property="og:image:width" content="500">
<meta property="og:image:height" content="500">
...
FB.ui({
method: 'share',
href: 'http://beerco.de/fbgifshare/urls_without_ts.php'
}, function(response){
console.log(response);
});
This will always work (after the initial share) since the href that is shared and the og:image is static.
http://beerco.de/fbgifshare/urls_with_ts.php This page will always share a unique URL and image:
<meta property="og:url" content="http://beerco.de/fbgifshare/test.gif?ts=1484855521">
<meta property="og:title" content="Lorem Ipsum">
<meta property="og:description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum lacinia nisl ut hendrerit. Sed elementum, urna id accumsan ultrices, lectus felis bibendum lectus, sed ornare velit elit eleifend ipsum.">
<meta property="og:image" content="http://beerco.de/fbgifshare/test.gif?ts=1484855521">
<meta property="og:image:width" content="500">
<meta property="og:image:height" content="500">
...
FB.ui({
method: 'share',
href: 'http://beerco.de/fbgifshare/urls_with_ts.php?ts=1484855521'
}, function(response){
console.log(response);
});
The share dialog will not show the image preview the first time I open the feed dialog but it may show it if I try again (without reloading the page) because facebook then have scraped the image.
If i refresh the page and try to share again the preview is not shown since the urls got a new timestamp.
Am I missing something here or is the facebook documentation wrong?
I need the image preview to be shown the first time the user shares the page.
What is the best way to achieve this?
The reason for having the image-url in both og:image and og:url is because I want the animated gif to be played inline in facebook (like giphy does) when the page is shared.
Please view source on the two demo-files to see all OG tags and FB.ui code.
All help appreciated!
I have been looking for couple day about this error but I could not find any solution.
When I am sharing my website on facebook using this url : https://getcleanio.com , the image thumbnail is not displayed.
I have including everything, about OP, in my header and here is a snippet :
<meta property="og:title" content="Vos vêtements nettoyés et livrés en 24H | Cleanio" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://getcleanio.com/" />
<meta property="og:description" content="Cleanio est la nouvelle façon de faire nettoyer vos vêtements, quand vous le souhaitez et sans vous déplacer. Commandez en quelques clics, on s’occupe du reste !" />
<meta property="og:image" content="https://getcleanio.com/images/logoFB.png" />
<meta property="og:site_name" content="Cleanio" />
<meta property="fb:app_id" content="1397548253843587" />
I also debug my url using : https://developers.facebook.com/tools/debug/ But it did not helped a lot. Instead I can see that the images recognized by the debugger is the Mixpanel logo and my logo on index which is not the one specified in my header.
If someone could help I would really appreciate.
Thanks a lot in advance,
Richard
I fed the URL into Facebook's debugger and FB didn't find your meta tags. At the bottom of the debugger I chose "See exactly what our scraper sees for your URL" and sure enough your og meta tags don't appear. I looked at the source code and the head contents were - interesting, so I then fed the URL into the W3C validator and it turned up nine errors in the HTML including a variety of missing and poorly formed tags (including the head tag). Fix those errors so the page validates then try the FB debugger again.
http://validator.w3.org/check?uri=https%3A%2F%2Fgetcleanio.com&charset=%28detect+automatically%29&doctype=Inline&group=0
I developed a landing in a site with an addthis tool to share a dynamic content to Facebook.
For example, in this page the dynamic og content is as follows:
<meta property="og:title" content="Pequeña gran heroína – Ingresá a dermaglos.com y participá por importantes premios.">
<meta content="Mi pequeña gran heroína es: Prueba Heroina sin img - Lorem ipsum dolor sit amet, consectetur adipiscing elit." property="og:description">
<meta content="http://www.dermaglos.com/DesktopModules/Repository/MakeThumbnail.aspx?tabid=466&mid=1941" property="og:image">
<meta content="http://www.dermaglos.com/Mes-de-la-Mujer-2013/Galeria.aspx?id=17440" property="og:url">
When I use a debugger to test the working of the meta information, it doesn't show me errors:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.dermaglos.com%2Fmes-de-la-mujer-2013%2Fgaleria.aspx%3Fid%3D17440
But when a share the page, the FB posting ignores the og:image and shows all the images of the og:url.
What is happening?
Thanks a lot
Look at this page:
og:image ignored when sharing link, although accepted in linter
and find in the debugger the following text:
Tiny og:image: All the images referenced by og:image should be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that they meet the minimum specification (Read more on https://developers.facebook.com/blog/post/2013/04/03/platform-updates--operation-developer-love/).
While you post image use below property to display image
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />
Note: Width and height can not be more than 200
For this project http://www.cinematheque.fr/expositions-virtuelles/kubrick_web/index.php I'm trying to set up a FB like button (see top right) common to all pages.
The Like button iframe:
<iframe id="fb" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.cinematheque.fr%2Fexpositions-virtuelles%2Fkubrick_web%2Findex.php&layout=button_count&show_faces=false&width=450&action=like&font=lucida+grande&colorscheme=light&height=21" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
I'm trying to set the OpenGraph meta tags' with values that are page-dependent, in particular the og:image (because the website is an artwork gallery, each page showing a different visual work which I want to use as the Like illustration).
Thus, I want to combine the benefits of having one unique Like counter for the site with a wide variety of data and illustrations in the FB wall story depending on the actual page you are when clicking the Like button.
The meta tags:
<meta property="og:title" content="Kubrick et le web" />
<meta property="og:type" content="director" />
<meta property="og:description" content="Graphistes, vidéastes, stylistes, plasticiens : toute une génération de créateurs talentueux s'est penchée depuis 15 ans sur l'œuvre kubrickienne pour lui rendre hommage, la questionner, la remixer. Découvrez notre portfolio, plus de 200 créations découvertes sur le web." />
<meta property="og:url" content="http://www.cinematheque.fr/expositions-virtuelles/kubrick_web/index.php" />
<meta property="og:site_name" content="La Cinémathèque française" />
<meta property="fb:app_id" content="24658885765" />
<meta property="og:image" content="http://www.cinematheque.fr/expositions-virtuelles/kubrick_web/images/600/201-1.jpg" />
To be consistent with the iframe, I use the same value for the og:url tag across the site (= the homepage URL), but that is perhaps wrong.
However, it doesn't work as expected because the FB story doesn't show the correct page-specific illustration but the generic image I've indicated for the homepage.
Could you tell me if what I'm trying to do (one counter / page-wise metadata) is valid and how to do it?
I think what you are trying to do is semantically wrong. Like button is specific for a object, in your case it should be a particular image that the user likes in your website.
In order to show total likes for your website, you might use the graph api and sum all the likes of all the objects(of all your images).
To count the likes of an object, refer this
http://developers.facebook.com/docs/reference/fql/like/