I am attempting to get my website logo to show up properly on Facebook news feeds. When I paste my site link on my news feed (share it) in Facebook and the image shows up, but the thumbnail image is just a portion of my logo. Specifically, the center portion of my logo shows up only.
My image/logo is exported via GIMP 2.8 and it is 1200 by 349 px. I made it this size because that is the closest I could come to the Facebook recommended 1200 x 650 px (or something like that).
EDIT:
I am not sure if this is the best way to publicly share images, but this is exactly like my logo except for text and color:
http://2imgs.com/2i/i/53d2dd5f/22d0e1223be1e43544446b27ab6b4b3c/377394be6d.f.jpg
Then when I scale the image down (in GIMP 2.8) to something that seems like it will fit, the image doesn't seem to change anything.
I am using the Open Graph Debugger here:
https://developers.facebook.com/tools/
I am doing stuff like this (and many other) posts:
Default website image for social sharing
Here is the head of my Index.php:
<head>
<link href="html5reset-1.6.1.css" rel="stylesheet">
<meta charset="utf-8" />
<meta name="description" content="my business description here" />
<!-- For facebook -->
<meta property="og:image" content="http://www.example.com/imagename_w1200h349.jpg">
<meta property="og:image:type" content="image/jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="349">
<link rel="icon" type="image/png" href="myiconpic.png" />
<title>my business title here</title>
</head>
What am I missing? This is the first website I have built.
Make sure the Open Graph image is always public, that image does not seem to be available for Facebook.
About the correct sizes: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#images
I sorted it out. I had two issues:
1) Facebook's Open Graph debugger Share Preview section doesn't refresh right when you upload a new Index.php and picture file to my host. I had to let it sit for a few minutes then refresh the page to get the preview to update.
2) I'm not sure if this is 100% true, but it worked for me: I made my image 1200 x 1200 with white canvas space above and below the logo (black). Since Facebook's recommendation is to go with 1200 x 630 pixels pictures, my solution here seems off, but it works so I am posting it.
Here is my image example that works:
EDIT: (Previous link didn't work. Hopefully this one does.)
http://2imgs.com/2i/i/53d3c78d/6719aed50ed239e3331cdeeadc572cf1/577394be6d.f.jpg
you can test why is not fetching you site image to facebook.
Facebook crawler will 'scrape' your site search for an image to use when it is being shared. If you want to specifiy which image to use, put this in the the section of your site:
Facebook may have cached a copy of the previous random image. to change or refetch for newer image. and you can test it for your ans.
https://developers.facebook.com/tools/debug/
Related
I have a personal website that I refer to from Linkedin. I like the preview windows on my Linkedin profile to show a snapshot image of my website. However, I cannot seem to get this to work.
According to the documentation it must fulfill the following:
Below are the og: tags that must exist and their correct format:
<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />
Here are the image requirements specific to the LinkedIn sharing module:
Max file size: 5 MB
Minimum image dimensions: 1200 (w) x 627 (h) pixels
Recommended ratio: 1.91:1
I have done exactly this and then run it through the linkedin inspection tool that is supposed to detect these as well as clearing the linkedin cache: https://www.linkedin.com/post-inspector/
It does pick up all my og tags in my header section of my index.html, except for the image og tag. It says it cannot find it at all. In my case, I'm linking to an image I have to github, like this:
<meta name="image" property="og:image" content="https://github.com/XXX/XXX.github.io/blob/master/img/XXX.png">
(Size is 1641x851)
What else can I do to try and make this work? I have tried and made sure to verify all other suggested solutions
<meta property="og:image" content="https://vickygupta16.github.io/Images/VickyGupta.jpg">
<meta property="og:image:type" content="image/jpg" />
<meta property="og:image:width" content="240" />
<meta property="og:image:height" content="240" />
<meta property="og:image:alt" content="Display Picture" />
I am not able to view the image that should be displayed while sharing URL on social media platform.
I tried different width and height and updated my github repo and still didn't got the image while sharing URL.
I know i am missing a simple step and solution can be very simple, but i am not able to solve it.
Check out the following Facebook recommendations for images:
For high-resolution devices, use images of at least 1,200 x 630
pixels. To publish Pages with links with large images, use images with
a size of at least 600 x 315 pixels.
We have changed the publication of the Page with links: now the aspect
ratio of the images is the same for News Feed on PC and on mobile
devices. Try to ensure a 1.91: 1 aspect ratio so that the image in the
News Feed is not cropped.
Everything looks right to me. The thing is just that not all social media platforms are configured to use OGP (i.e. not all platforms can understand those tags). So there's could be few things:
The social media you're trying to use does not support any social meta tags
The social media you're trying to use has their own tags (e.g. Twitter)
The social media network has cached the content and has not yet updated it after your last modifications
For number 1, there's no solution. For number 2, try to find the tags the platform uses. For number 3, clear the cache and cookies on your browser and try again.
I need to make social networks for example facebook.com to display website logo when someone put link on it in post, message or share it. I have googled this question and found that website should have this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
and
<meta property="og:image" content="https://www.lucida.construction/wp-content/themes/lucida-theme/images/logo_for_sn.png" />
<meta property="og:title" content="Home - Lucida ConstructionLucida Construction" />
but it doesn't give any result. I tried to do this on Facebook and LinkedIn and both of them either not showing an image at all or display some random image and not the logo that I've set in the <meta property="og:image" /> tag.
Website I try to share are http://www.resolutemarine.com and https://www.lucida.construction
Any help appreciated! Thanks!
What you did is correct. I don't know about other social media channels but facebook caches the information of your page. So if have you shared your link before the results are probably cached before you made the change in your code (inserting the og:image part). I don't know when facebook exactly clears it but you can do it manually by using their tool (again).
I tried it with one site of your linked domain and it works for me.
So if you want to test it use their tool. Otherwise you just need to wait until they grab it automatically.
Here is the link to the tool - just enter the url that you want to be crawled again by the bot: Facebook sharing debugger
I tried to share my website sometime and it kept on showing me the website logo, till I had to uninstall all plugging and it still didn't work not knowing it was the All in one SEO plugging that I selected a default image when shared on social media, so if you have AIOS installed, kindly check the settings=> Social Networks and selected the social media you want to change the profile picture if you have it installed
My question is related to this one, this one, and this one, but completely different. The URL http://ogp.me/ lists the following example, where multiple images are defined within a single page:
<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="http://example.com/rock2.jpg" />
<meta property="og:image" content="http://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />
However, the site does not say how these multiple images are used. I was thinking that perhaps Facebook scrapes all of the images specified with the og:image property and displays the one which best matches the resolution of the browsing device. But I'm not sure of this, and need confirmation.
If I include a 315x315 PNG image and a larger 1200x630 image, so that one can be used as a small image with the text corresponding to the image displayed by Facebook on its right-hand-side, and the other one is a full-size image occupying a rectangular rather than square area with the text described on the site below it, then how does Facebook decide whether to use one image or the other? (Personally, I have a square logo to display, so the smaller image might be best, with the text corresponding to the logo on the right, but I'm not sure whether to include just one of these two images or both?)
Thank you for your answers!!!
Typically multiple OG:image tags allows the user to choose which image they want to use for their post depending on the platform that is reading the OG tag. IE facebook or linkedin.
When i paste a link to my website i would like facebook to grab certain images from my website to show. How do i do this?
i tried adding this right below my title tag but it doesnt seem to work, nothing shows
<link rel='image_src' type='image/jpeg' href='http://www.url.com/myImage.png'>
regards,
alexander
You can use the facebook "Open Graph" meta data protocol.
<meta property="og:image" content="http://www.url.com/myImage.png" />
Full Documentation