I am using a og:image meta property to define an image so whenever I shared my webpage in WhatsApp or Facebook, that image will be shown as a thumbnail.
But all my pages had a specific image. I want to show these images as a thumbnail. So I removed the meta tag.
<meta property="og:image" content="https://www.website.com/download.png">
But all my pages have 2 images. One is on top and the other is on the footer. As the footer image is big, whenever I shared my page, only the footer image is shown as a thumbnail. I want to show the top image to be a thumbnail. So how to hide the footer image?
You can use the Sharing Debugger to see the information that is used when your website content is shared on Facebook, Messenger and other places.
https://developers.facebook.com/tools/debug/sharing/
And it will also displays the missing properties.
Open Graph Object Debugger will also help you
https://developers.facebook.com/tools/debug/og/object/
If you want to know more about OGP you can visit
http://ogp.me/
Related
I am trying to upload an image to my React website so that the image can be used as the thumbnail preview when it is posted to social media. All of the images on my website are too high a resolution to be used. I want to have the website host images that suit a thumbnail display so that they can be linked in the meta data, but not have them shown on the page itself.
What would be the best way to go about this? And how would I get the image URL so that it can be linked as the preview image in the meta data in index.html?
I have tried hosting the thumbnail images on external sites and linking in and they are not loading, so it seems to work best when kept on the same website.
For those interested, the website is https://doe.games and I am testing the meta data with https://metatags.io/ The image preview currently works for Facebook and Twitter, but not WhatsApp.
Thanks!
I'm trying to understand why I'm getting an empty thumbnail when sharing a link on Facebook.
Initially, I set an og:image meta and it correctly worked, now I resized the image to make it appear as a big thumbnail (with image size greater than 600px on the wide side) and I don't see my thumbnail anymore.
I tried to debug the link on the Open Graph Debugger, but I still get an empty thumbnail! Does anyone have any hint on how I can fix this?
If you need it, here's the link to the webpage, and here's how I set my meta tag:
<meta property="og:image" content="http://messages-svil.ciacola.it/00002/00002/8619/shared/preview_8619_social.png">
(As you can see the image exists, but Facebook doesn't show it on the post)
Thank you!
In my site I add sharethis plugin to share pages
My problem is to manage the image in sharing page, and seems that facebook take the first image and not my image.
this is my page
http://www.netafim.com/testimonial/netafim-customers-video-testimonial---uvs-south-africa
In this page i have this meta tag
<meta property="og:image" content="http://www.netafim.com/Data/Uploads/South Africa_sugarcane_share.png"/>
this is my image in the meta tag
But when sharing i see another image
[]
Why and how can i manage my sharing image?
thanks
FIX: Rename the image filename without any whitespace characters(ie. space in filename)
So far, all it could scrape is just the title and description of it. And since it can't scrape the image(due to the space in the image filename), it has fallen back to the default image for your website, which is
Hope this helps. :)
After fixing the name I can't see the image on the dialog page.
When I Share the page I see the image from the og:image tag.
But on the Dialog sometime the image exists and sometimes not.
some time its like this with no image
and some times with the image
On the debugging page when click on the "see this in the share dialog" its seems good as expected
but when click from the site
i got "thin" version with no image. what can be the reason for the differant
I just added my personal website http://oatmeeel.com/ to my Linkedin. It appears that there is no thumbnail/icon showing on my LinkedIn (https://ca.linkedin.com/pub/oat-wongsajjathiti/63/55b/967)
How do I add some sort of an image (like favicon) to any links to my website from other websites. Sorry if I'm being unclear. Here is an image of my issue.
Thank you
I believe Linkedin uses three open graph protocols, one of them being image to scrape an image to use from your website. Scrolling through your source code I didn't see one. Try adding <meta property="og:image" content="http://URLTOYOURIMAGE" /> to the of your website and see if that changes anything.
I am trying to add a Facebook share button to an interactive page I am working on. On this web page users can manipulate a customizable image by selecting different colors to appear on the image. I'd like to know if there is any way I can add a Facebook share button that shares their finalized image.
The web page is a PHTML file and I have successfully added a plain Facebook share button to the page that just shares a link to the web page.
Thanks in advance!
Update the Open Graph meta tag with the link of your final image and when the user Share the page on Facebook, the final image will be displayed as a thumbnail.
<meta property="og:image" content="http://yoursite.com/images/final.jpg" />