Website thumbnail on other websites - html

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.

Related

How can I host an image on a React website for a thumbnail preview that isn't displayed on the site itself?

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!

LinkedIn sharing URL does not show og:image

I have a problem with og:image on sharing post within LinkedIn sharing URL. Here is test post with configured og tags.
LinkedIn takes other og:tags, but not og:image.
I've checked page with the W3 validator. There are some errors, but they seem not really important. I've checked other page with working LinkedIn sharing and there are also similar html errors.
Also have tried to use cropped image, using shchemeless URL (like in this article), add og:prefix to HTML.
Does anybody know how to fix this?
I found your are not including prefix="og: http://ogp.me/ns#" in your root HTML
And your og:image size is not appropriate for universal social media sharing. Its better you give 1600:800 img (2:1) aspect ratio. And the file size below 1mb.
Here is the link of how to give og:images for universal social media
I hope this answer would help you.
Thanks
post inspector can help...
(1) in my LinkedIn profile, on 'Edit Intro' Under Media
(Add or link to external documents, photos, sites, videos, and presentations.) I had added my website but the og:image wasn't being picked... even though I had already followed the advise as per the link in your question but image wasn't being displayed
(2) So after adding prefix="og: http://ogp.me/ns#" in my html tag and changing the "https" to 'http' for my website I tried again, but no luck, even though the Post Inspector was picking it up
(3) I removed the media (from my profile intro) and saved. then added the same website address again and it worked like a charm. This could be because the image was being pulled from the cache (and since it wasn't there, i was getting a blank)... but when i added the media again, it did a fresh pull, which was successfull
Hoping someone else who experienced this issue will be helped with this...

Facebook og:image does not work

I am still trying to get a thumbnail as preview when sharing this site on facebook:
http://hundeschule-olching.de/
I have added the following code to my header:
<meta property="og:image" content="http://www.bilder-upload.eu/show.php?file=3d2bee-1459359037.jpg" />
I needed to load that image up first, even though it already is posted on facebook, but for some reason facebook does not accept its own links.
This would be the original facebook link:
https://www.facebook.com/202405526459834/photos/pb.202405526459834.-2207520000.1459358633./1184106678289709/?type=3&theater
It was already showing me the correct image in the debug tool from facebook, but when i tried to post the link in facebook, a completely different image was shown..(pick option).
After running the debugger again the image that was fetched correctly a few minutes before was gone and it told me there will be a selection shown to pick from.
So I tried to fetch the image from the Data folder on the server going like this:
<meta property="og:image" content="Data/chak.jpg" />
did not work as well.
Please help me I'm going crazy about this problem.
http://www.bilder-upload.eu/show.php?file=3d2bee-1459359037.jpg does not deliver an image, but an HTML document – at least for me. It is probably some sort of hotlinking protection of that upload service at work. You should test this with an image on a server you have control over, to avoid such problems.
And you need to use an absolute URL – a relative one like Data/chak.jpg won’t work either.

Facebook share image sharethis

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

How to add a Facebook share button that shares specific image from web page?

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" />