I use the usual Facebook tags on my blog to make sure that a title, image and description are displayed when sharing pages. I've been using this for a long time without paying much attention to it but I recently discovered that images and sometimes descriptions were not displayed anymore.
Here is a code example:
<meta property="og:url" content="https://www.laurentwillen.be/gadgets/test-avis-projecteurs/xiaomi-wanbo-x1-test-avis/" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Xiaomi Wanbo X1 : test / avis (avec code promo -30%)" />
<meta property="og:description" content="J'ai testé le Xiaomi Wanbo X1 sur de nombreux critères objectifs (qualité image, son, compatibilité netflix, ...) et je l'ai comparé aux autres projecteurs." />
<meta property="og:image" content="https://images.laurentwillen.be/sites/21/2021/07/wanbo-x1-test-avis-review-opiniones-recensione-erfahrung-bewertung-top.jpg" />
<meta property="og:image:width" content="1500"/>
<meta property="og:image:height" content="468"/>
When I test this page in the Facebook debugger, outside the fb:app_id I don't get any error message but I can't see the image:
[![enter image description here][1]][1]
For this second example, the image is not working but the description also never shows up (while tags are the same)
<meta property="og:title" content="Aidez-moi (klintistwood) à gagner le Robot Aspirateur Lefant M210s" />
<meta property="og:description" content="J'aimerais gagner le robot aspirateur Lefant M210s et vous pouvez m'aider sans devoir faire un don d'organe." />
<meta property="og:url" content="https://contest.laurentwillen.be/?c=3&p=8145ed4714f0159fc801d41037d53903" />
<meta property="og:type" content="article" />
<meta property="og:image:width" content="1500"/>
<meta property="og:image:height" content="468"/>
<meta property="og:image" content="https://10jtal.be/cms/wp-content/uploads/sites/21/2021/07/lefant-m210s-test-review-avis-recensione-prueba-opinion-beoordeling-28-scaled.jpg" />
I've read multiple posts about this, in some cases it was just a caching issue but it doesn't seem to be my case because images never show up and sometimes descriptions don't show up.
I have also tried to use og:image:secure but it didn't help.
Copy/pasting the image link directly to Facebook also doesn't work but there are no restrictions on my server that could explain this.
Any idea?
Thanks
[1]: https://i.stack.imgur.com/LzRe2.png
Related
I have read quite a number of SO post on the topic however my problem still persists : Facebook sees my meta tags as raw tag found but does not display or include image during the open graph display. This is the Url i am trying to post on facebook :
https://holyunions.com/govt-releases-gh-cent-465-million-for-start-of-one-district-one-factory-project-general-language-en-article-118
And This is my output of my code
<meta property="og:title" content="Govt releases GH¢465 million for start of one-district-one factory project - General :. Twum Barimah" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://holyunions.com/govt-releases-gh-cent-465-million-for-start-of-one-district-one-factory-project-general-language-en-article-118" />
<meta property="og:description" content=""/>
<meta property="fb:app_id" content="532235306919626"/>
<meta property="og:image" content="http://holyunions.com/js/max_john_richeditor/lib/tiny_mce/plugins/openmanager/uploads/images/image_11_04_2017_12_24_02_1491913442-42.png" />
<meta property="og:image:secure_url" content="https://holyunions.com/js/max_john_richeditor/lib/tiny_mce/plugins/openmanager/uploads/images/image_11_04_2017_12_24_02_1491913442-42.png" />
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="285" />
<meta property="og:site_name" content="Holy Unions : Home of Marriages" />
<meta property="fb:admins" content="100004005747278"/>
The og image properties are well defined however Facebook after displaying them as tags, still does not fetch the image neither does it display the image nor the description in the open graph properties.
How do I display the image that facebook sees as url ?
This page: http://viralsport.se/4-Crazy-mal-av-Svenska-landslaget-mot-Island.html for example.
In header i have this code:
<meta property="og:site_name" content="Viralsport" />
<meta property="og:title" content="Crazy mål av Svenska landslaget mot Island" />
<meta property="og:description" content="Ett av de märkligaste målen Svenska landslaget har gjort" />
<meta property="og:url" content="http://www.viralsport.se/4-Crazy-mal-av-Svenska-landslaget-mot-Island.html" />
<meta property="og:image" content="http://gfx2.aftonbladet-cdn.se/image/10714609/485/normal/483e194e3fdfc/Ska+inte+till+aik" />
<link rel="image_src" href="http://gfx2.aftonbladet-cdn.se/image/10714609/485/normal/483e194e3fdfc/Ska+inte+till+aik" />
When I share on Facebook as it selects a completely different picture and no text at all.
What have I done wrong?
Thanks in advance
I refreshed the info in the debugger, now the correct image shows up. Just enter the URL in the debugger and you will see a button called "Fetch new scrape information" next time it does not use the correct data: https://developers.facebook.com/tools/debug/og/object/
Also, make sure the og-image follows the specification about size and aspect ratio: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#images
Despite seemingly following all the guidelines for including Open Graph objects in my code, I cannot get Facebook to display my images correctly in the share dialog. These are the meta tags that my website currently provides:
<meta property="og:url"content="http://tombakas.com/delfinariumas/5" />
<meta property="og:type" content="website">
<meta property="og:title" content="Delfinariumas"/>
<meta property="og:description" content="Moderni išmintis per patikrintas lūpas"/>
<link rel="image_src" type="image/png href="http://tombakas.com/static/delfinariumas/thumbnails/5.png" />
<meta property="og:image" content="http://tombakas.com/static/delfinariumas/thumbnails/5.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />
<meta property="og:image:type" content="image/png" />
The image is of the 600x315 dimensions, the minimum accepted according to the specification. Regardless, it is still being previewed as a cropped square, instead of showing it at full size. I've scanned the forums and SO to no avail, so I'm really flabbergasted.
Any help would be very appreciated. Thank you!
When I embed video to facebook using the following metadata I am able to embed video succesfully but I don't want facebook to add the text on top of image after embed. How can I do it?
<meta property="og:type" content="movie"/>
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video" content="http://player.theplatform.com/p/yHjoOC/onsite_dev/swf/select/nEdMK4_islkz&autoPlay=true" />
<meta property="og:video:height" content="265" />
<meta property="og:video:width" content="470" />
<meta property="og:video:secure_url" content="https://player.theplatform.com/p/yHjoOC/onsite_dev/swf/select/nEdMK4_islkz&autoPlay=true" />
<meta property="og:title" content="Christina Aguilera On The Voice"/>
<meta property="og:description" content="Christina Aguilera gives insight on her team and competition." />
<meta property="og:image" content="https://mpxstatic-nbcmpx.nbcuni.com/NBCdotCOM/mezzthumb/9d883881039c20870dfeaf068a5be0e7_1c966ee53db728d715881e1cf193ebc2.jpg"/>
Please help me how to achieve this.
Its facebook default behavior so we cannot change it
http://www.malayalam-dictionary.com/ has been developed Facebook open graph tag with the instruction of https://developers.facebook.com/docs/reference/plugins/like/
when share link through facebook, it doesn't working
At the same time google+ shows exactly how expected :)
Here is code
<meta property="og:title" content="A complete Malayalam English Dictionary" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.malayalam-dictionary.com/" />
<meta property="og:image" content="http://www.malayalam-dictionary.com/images/logo.jpeg" />
<meta property="og:site_name" content="malayalam-dictionary.com" />
<meta property="og:description" content="A complete Malayalam dictionary." />
<meta property="fb:admins" content="100001641332681" />
DEMO
It shows up perfectly fine when i put it in facebook.
If the OG Tags don´t work, always check the link in the debugger:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.malayalam-dictionary.com%2F
It also refreshes the OG data.