A webpage I am currently working on needs to have preview images when sending a link through WhatsApp. That by itself is not an issue, as I am following the OG Protocol specified here. The issue is that depending on which device the link is sent from, the images are displayed differently. Here are a few examples:
WhatsApp Desktop on MacOS Ventura 13.1
WhatsApp Web (Chrome 108.0.5359.124) and WhatsApp on Android
WhatsApp on IOS
(For some reason, this time it decided to take the Favicon instead of the specified image.)
Here are the relevant Meta-Tags from the Page <head>
<meta name="description" content="Wir treten mit Regierungsrätin Jacqueline Fehr und Nationalrätin Priska Seiler Graf zu den Regierungsratswahlen an – ein hochkarätiges Duo mit langjähriger Erfahrung und ausgewiesener Kompetenz.">
<meta property="og:image" content="https://wahlen-kanton-zuerich.ch/wp-content/uploads/2023/01/SPZH-KR-Wahlen23-RR-Bilder-–-WEB4-Kopie.jpg">
<meta property="og:image:width" content="1720">
<meta property="og:image:height" content="1200">
<meta property="og:locale" content="de_DE">
<meta property="og:type" content="website">
<meta property="og:title" content="Priska Seiler Graf und Jacqueline Fehr in den Regierungsrat!">
<meta property="og:description" content="Wir treten mit Regierungsrätin Jacqueline Fehr und Nationalrätin Priska Seiler Graf zu den Regierungsratswahlen an – ein hochkarätiges Duo mit langjähriger Erfahrung und ausgewiesener Kompetenz.">
<meta property="og:url" content="https://wahlen-kanton-zuerich.ch/regierungsrat/">
<meta property="og:site_name" content="Wir ergreifen Partei.">
It is baffling to me that the same code would result in different preview Images depending on the sender. Am I missing something?
Related
I cannot get the image to show when sharing my site in FB. Below is my open graph code.
I have rescraped using the FB sharing debugging tool (https://developers.facebook.com/tools/debug). soooo many times, and it never displays, in the tool or in a share.
The debugger reports no errors, and lists the correct image.
The image is 1200x630 and exists on the same site.
Using open graph checker displays the expected image.
https://iplocation.io/open-graph-checker.
I have tried everything i can find in posts. but i really need this working for marketing.
Hope someone has the secret sauce.
cheers,
<meta property="fb:app_id" content="123456789"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="http://www.example.com/images/og2.jpg"/>
<meta property="og:image:secure_url" content="https://www.example.com/images/og2.jpg"/>
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:title" content="my title"/>
<meta property="og:description" content="my description."/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
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
I have a website https://www.appmonkey.at/
If I share a link on Facebook it contains no data.
I have also debugged it via the Open Graph Object Debugger (https://developers.facebook.com/tools/debug/og/object/),
but I can´t find out why there is no data.
I have all OG Tags defined in my header.
<!-- OG -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://appmonkey.at/" />
<meta property="og:title" content="App Monkey Dev. Studio | App Entwicklung Graz Austria" />
<meta property="og:description" content="App Monkey™ - Development Studio ist ein Grazer Unternehmen für neue Medien- kommunikation und -produktion. Bitte einfach unser Portfolio besuchen. Wir haben bereits jahrelange Erfahrung bei der Umsetzung verschiedenster Leistungen und verwirklichen immer innovative Ideen. Für mehr Fragen bitte einfach kontaktieren."/>
<meta property="og:locality" content="Graz"/>
<meta property="og:country-name" content="Austria"/>
<meta property="og:site_name" content="App Monkey Dev. Studio"/>
<meta property="fb:app_id" content="719256068141092" />
<meta property="fb:page_id" content="1396318723916361" />
<meta property="fb:admins" content="100003054736728" />
<meta property="og:image" content="https://appmonkey.at/img/logo.png" />
Can anyone help me to find my Problem?
Here is the scenario, I have an embedded youtube video on the page and 2 share buttons below it; the client wants those buttons to share the embedded video. This is a pretty straight forward question... just not sure how to go about it.
I understand that the video has sharing buttons, but they want the two big buttons outside of the iframe to share the video.
Give the same OG Metatags as given by youtube for that page.
For example if you have embedded this video on the page "https://www.youtube.com/watch?v=MkN7P08_oYM", then see the page source and mention the metatags as given on that page like
<meta property="og:site_name" content="YouTube">
<meta property="og:url" content="http://www.youtube.com/watch?v=MkN7P08_oYM">
<meta property="og:title" content="The Mysteries of Laura NBC Official Trailer [HD] | THE MYSTERIES OF LAURA">
<meta property="og:image" content="https://i.ytimg.com/vi/MkN7P08_oYM/maxresdefault.jpg">
<meta property="og:description" content="The Mysteries of Laura NBC Official Trailer: Get a look at the new series The Mysteries of Laura coming to NBC Wednesdays this fall. » Subscribe: http://bit....">
<meta property="al:ios:app_store_id" content="544007664">
<meta property="al:ios:app_name" content="YouTube">
<meta property="al:ios:url" content="vnd.youtube://www.youtube.com/watch?v=MkN7P08_oYM&feature=applinks">
<meta property="al:android:url" content="http://www.youtube.com/watch?v=MkN7P08_oYM&feature=applinks">
<meta property="al:android:app_name" content="YouTube">
<meta property="al:android:package" content="com.google.android.youtube">
<meta property="al:web:url" content="http://www.youtube.com/watch?v=MkN7P08_oYM&feature=applinks">
<meta property="og:type" content="video">
<meta property="og:video" content="http://www.youtube.com/v/MkN7P08_oYM?autohide=1&version=3">
<meta property="og:video:secure_url" content="https://www.youtube.com/v/MkN7P08_oYM?autohide=1&version=3">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">
Why this Facebook header's doesn't work?
<meta property="fb:admins" content="100001241265117">
<meta property="fb:app_id" content="346433102099273">
<meta property="og:url" content="http://www.fontedelucro.com.br">
<meta property="og:title" content="Fonte de Lucro - Seu negócio na internet">
<meta property="og:site_name" content="Fonte de Lucro - Seu negócio na internet">
<meta property="og:description" content="Blog relacionado a negócios na internet em geral. E-commerce,Programa de afiliados,Novidades entre outros">
<meta property="og:type" content="website">
<meta property="og:image" content="http://www.fontedelucro.com.br/wp-content/uploads/2012/07/dolar50.gif">
<meta property="og:locale" content="pt_br">
When i put the url in post, the header image not show.
The page is http://www.fontedelucro.com.br.
Use this tool to check what is going wrong : http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.fontedelucro.com.br
Aparently only the image is wrong.
EDITED:
One more thing. If you tried to share your url before you setted the header, facebook will cache the headers or the non-headers. So, you need to use the Facebook Object Debugger to force clear this cache.