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
Related
I have been having an ongoing issue with a site I work on. The site in question is:
http://guysboroughjournal.com/
The issue is that the main article image (and sometimes description) does not get automatically picked up by Facebook when sharing the website. I have the following meta OG tags in the site:
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="The Guysborough Journal" />
<meta property="og:image" content="http://www.guysboroughjournal.com/_uploads/image/142957_2017-08-09.jpg" />
<meta property="og:description" content="<p><strong>AHOY:</strong> The Mist of Avalon made a big impression on sailors and landlubbers alike when it tied up at the Guysborough Marina on Wednesday, August 2. The two-masted schooner is part of the Tall Ships RDV 2017 event continuing throughout the Maritimes this summer.</p>
" />
<meta property="og:url" content="http://www.guysboroughjournal.com/" />
But for whatever reason when anyone puts the site URL in to try to share on Facebook, the image from last weeks edition appears. Sometimes the descriptive text from last weeks featured article also appears. You can see that both the image and description tags are pointing to the correct image and showing the correct text.
I should not have to run the site through the Facebook debug tool manually everytime they update that main story.
What am I doing wrong???
Thanks.
I've looked at the other questions posted on this topic as there was one specifically addressing the scraping but I was not able to see a solution there.
I would also like to know if the meta tags have to be on each web page or can they just be on one page?
My main issue is my image is not being scraped. I have used the debugger and searched and read and tried several things to fix this so the image is scraped and will show in any Facebook postings but have not had any success. There is a lot of different info re the actual image size and I've tried various sizes but still no luck. The site is Soup Surreal
Any suggestions or help is much appreciated. Thank you. Following is what was scraped.
Meta Tag <meta property="og:url" content="http://soupsurreal.com/Soup_Surreal/index.html" />
Meta Tag <meta property="og:title" content="Soup Surreal Serving, Stratford and Kitchener Region" />
Meta Tag <meta property="og:description" content="I am delighted to introduce Soup Surreal products to you. With emphasis on quality and local ingredients, Soup Surreal products are made with passion and skill. It is my commitment to you to provide a quality and comforting soup to fill your bowl." />
Meta Tag <meta property="og:site_name" content="Soup Surreal" />
Meta Tag <meta property="og:type" content="website" />
Meta Tag <meta property="og:image" content="http://soupsurreal.com/Soup_Surreal/images/fbimage.jpg" />
Meta Tag <meta property="og:image:type" content="image/jpg" />
Meta Tag <meta property="og:image:width" content="1600" />
Meta Tag <meta property="og:image:height" content="1957" />
I get an error (403 Forbidden) when i try to access the image directly, that may explain why it is not displaying: http://soupsurreal.com/Soup_Surreal/images/fbimage.jpg
You should also check out this page for optimal image sizes: https://developers.facebook.com/docs/sharing/best-practices#images
...and yes, the OG tags should be on every page. At least on every page that should be shareable on Facebook (or elsewhere).
The facebook like plugin (used as iframe) still not working for the website i work.
I'm aware for the problems that ocurred last week but I don't even have the debugger working for the URLs.
Example:
simple article
In the image below you can see where the fb:like button should appear.
The same URL of the article above at the facebook URL debugger (link) show no response about the open graph tags - and all the meta tags are ok in my point of view:
<meta property="og:url" content="http://extra.globo.com/famosos/zilu-assume-pela-primeira-vez-que-esta-separada-de-zeze-di-camargo-vida-continua-5767649.html"/>
<meta property="og:title" content="Zilu assume pela primeira vez que está separada de Zezé Di Camargo: ‘A vida continua’" />
<meta property="og:locale" content="pt_BR">
<meta property="og:type" content="article" />
<meta property="og:image" content="http://extra.globo.com/incoming/5767648-1c6-157/w107h60-PROP/zilu-zeze-dicamargo.jpg"/>
<meta property="og:site_name" content="Extra Online" />
<meta property="fb:app_id" content="205680889447721"/>
<meta property="fb:admins" content="100000043813964" />
Actually, there is one non-closed meta tag og_type but it isn't the real problem (meta at w3schools - section Differences Between HTML and XHTML and the page doctype is HTML).
There is a possibility of a problem not in the website but at facebook?
I would try to put the Like button iFrame outside of the <div
id="fb-root">, it does not belong there. Put it below the <div
id="fb-root"> and use a div with another id if you need to wrap it.
For the debug tool problem I would try to place my og meta data above
anything else right behind <meta http-equiv="content-type"
content="text/html; charset=utf-8"> so that nothing odd happens
before the Facebook bot scrapes the info it needs.
In my website, users can share links of my app "objects" to their Facebook Wall.
This is how I post links to Facebook using the Javascript SDK and their Graph API:
var url = "/me/feed";
var message = "a user generated message"
var link = "link to an internal object of my app"
FB.api(url, "post", { message: message, link: link }, callback);
These are some of the metatags of my internal objects:
<meta property="og:video:type" content="text/html" />
<meta property="og:video" content="link to an internal object of my app"/>
Whereas I don't attach any Flash content, I'm encountering this error:
error: (#100) flash objects must have the 'source' and 'picture' attributes
type: OAuthException
So there is something I don't really understand...
The weirdest thing is that when I post the same link from Facebook Web Interface (and not through my app), everything occurs seamlessly... Indeed: I don't have any warnings or errors from the Facebook Linter tool.
Thanks in advance for your help
If you have videos you should check at what nrj12 did for example (see here http://www.nrj12.fr/nrj12-replay-3276/nrj-12-562/media/video/494835-avec-rod-janois.html)
<meta content="Nrj 12 Avec rod janois - NRJ12.fr" property="og:title">
<meta content="http://www.nrj12.fr/nrj12-replay-3276/nrj-12-562/media/video/494835-avec-rod-janois.html" property="og:url">
<meta content="fr_FR" property="og:locale">
<meta content="video.tv_show" property="og:type">
<meta content="1327098374" property="video:release_date">
<meta content="169879703048651" property="fb:app_id">
<meta content="Sport auto, nouveautés, tests, exclusivités... KILOMETRE 12, c est le nouveau magazine indispensable présenté par Anne Denis pour tout savoir sur le monde de l auto. Mais c est aussi des rubriques déc..." property="og:description">
<meta content="223" property="og:video:height">
<meta content="398" property="og:video:width">
<meta content="application/x-shockwave-flash" property="og:video:type">
<meta content="http://media.nrj.fr/436x327/mogador/00152885-minipicto-12-0_prod_12229.jpg" property="og:image">
You video:type looks weird too me cause HTML is not a video type.
Please provide the URL of the content you wish to publish if you want to get constructive help.
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/