I have developed a website page where I provided og: properties for the FB and LinkedIn share. But as part of the demo with the client, they requested to remove the image from og:image and then try to share.
When I removed the og:image then as null check my og:image with meta tag was not available on the page but when I shared, then FB and LinkedIn both showed the banner image available on the page while sharing.
So, why did this happen, that the banner image was shown when og:image was not available?
Related
I've noticed that all the articles that The Guardian are publishing have a unique logo on the share image - og:image
click here to see the example from The Guardian's post
when I looked into the article's code, I didn't see the logo in the og:image URL
this is the og:image URL:
https://i.guim.co.uk/img/media/f54a859ae94b8ca3998ab81bfee3e17e65ff21de/0_918_1702_1021/master/1702.jpg?w=1200&h=630&q=55&auto=format&usm=12&fit=crop&bm=normal&ba=bottom%2Cleft&blend64=aHR0cHM6Ly91cGxvYWRzLmd1aW0uY28udWsvMjAxNi8wNS8yNS9vdmVybGF5LWxvZ28tMTIwMC05MF9vcHQucG5n&s=681c1f1e7d23bca848c895fc8ac0eeb5
my question: how do they add the branded logo to the og:image?
For some reasons the addthis widget on my page is not sharing the latest image - which can be deceiving.
This is the one example of the page - http://www.starbucks.com.sg/menu/beverages/chocolate-black-tea-double-chocolate-green-tea-frappuccino
Any help?
Facebook and many other services use Open Graph meta tags to know which image should be shared, along with the title and description.
Here's some more information on Open Graph tags:
http://support.addthis.com/customer/portal/articles/381222-optimize-facebook-sharing
Since the page you mentioned already has og:title and og:description meta tags, you'll just need to add og:url and og:image.
The Facebook Debugger tool is also a great tool for determining which OG tags Facebook is currently detecting and it can also "rescrape" a page to pick up newly added meta tags.
https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Fwww.starbucks.com.sg%2Fmenu%2Fbeverages%2Fchocolate-black-tea-double-chocolate-green-tea-frappuccino
I have inserted the OG meta tags in my pages and also have provided a simple link to help users share the contents on the Facebook using the
https://www.facebook.com/sharer/sharer.php?u=[the-urlencoded-link-to-my-page]
link. But I have two problems:
When attempting to share the content for the first time, the
Facebook sharer page only displays a preview box which only contains
the name of the site, and makes me use the Facebook's Object
Debugger to
fetch the meta tags. How can I automate this process?
And secondly, while the Object Debugger report says that it has
found the og:url, og:type, og:title, og:locale,
og:image:width, og:image:height, og:image and the
og:description raw tags on the page, but the image doesn't get
displayed in neither the preview box of the page nor on the shared
status. What I have missed? What's wrong?
To make things clear, sharing on google+ works perfectly (the image gets displayed, the title and the descriptions are in place.)
Thanks in advance :)
When I paste a link on my Facebook automatically reads the url and assigned me a picture of them on my server etngo as I can do to take a default image.
Yes, set your og: tags on the web page. See https://developers.facebook.com/docs/opengraph/ pay attention to og:image.
Here I have set a image url by the og:image tag, but when sharing to the facebook, it doesn't show the correct image that I just set, instead it shows lots of images that doesn't appear in that page.
I've tried to enter the URL on the Facebook debugging system, but it shows no errors.