Only on LinkedIn are the links' thumbnails I post incorrect. They work on Facebook, Twitter, Slack, what have you.
Using https://www.linkedin.com/post-inspector/, I am checking the thumbnails previews and they are incorrect. The image portion at the bottom recommends I use this code pattern.
<meta name="image" property="og:image" content="[Image URL here]">
That is the syntax I am using in the head and it still insists on grabbing a random image on the page, specifically the author of our blog posts. The author's image appears in an img and nowhere else in the DOM. When I remove the author's image from the img src, the post inspector states that no image is found.
How can I get LinkedIn to show the correct thumbnails for my blog posts when the OG meta data is ineffective?
Related
If I include an url in some applications, for example in a conversation thread in Facebook Messenger (www.messenger.com), the application is able to show a "key" image from that web site. Is there a special Html tag or attribute that allows the web author to specify which should be the image that is to be shown?
Example, pasting http://www.digitaltrends.com/cool-tech/spencer-the-airport-robot-will-help-you-catch-your-flight/ in Messenger will display:
Here is an example from Facebook's documentation
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
og:image -> The URL of the image that appears when someone shares the
content to Facebook. See below for more info, and check out our best
practices guide to learn how to specify a high quality preview image.
I try to add my link to a facebook page. Sometimes facebook loads preview picture, sometimes not (even don't try to load and just add as link, without preview picture). My code has the following lines in head section:
<meta property="og:title" content="[title]" />
<meta property="og:description" content="[text]" />
<meta property="og:image" content="[correct_link_to_image]" />
all pages have format like
[MY_ADDRESS]/jpg/[UNIQUE_CODE].html
links for images have format:
[MY_ADDRESS]/publicThumb/[UNIQUE_CODE].JPG
So, each unique page has unique image
My thoughts - it happened because Facebook caches it. But how to solve?
Thanks
I solved my problem.
First at all, facebook proposes us a special debug tool
https://developers.facebook.com/tools/debug/og/object/
If you enter the url to check and click on "Fetch new scrape information" and receive all detailed information, including page error (this was my case, I asked Request.UserLanguages on page and this is empty for Facebook's request, so, Facebook got an error).
Secondly, need to add og:url meta tag (this tag is mandatory to correct work)
Thirdly, og:image should be at least 200x200, otherwise Facebook try to catch any other picture on page
P.S. Seems, russian social network "VKontakte" uses the same tags as Facebook
I recently designed and built this site: http://velvetbus.co.uk
When one of the administrators go to post a link on Facebook the post appears like this:
How can I change the icon? A 'v' is nice and all but doesn't really represent the company too well.
Thanks
Facebook uses Open Graph protocol. You need to add a meta tag on your web page so facebook will know what image do display
<meta property="og:image" content="http://LINK_TO_YOUR_IMAGE"/>
It's best to use a square image, as Facebook displays them in that matter.
That image should be at least 50x50 in any of the usually supported image forms
(JPG, PNG, etc.)
Here you can learn about other tags http://davidwalsh.name/facebook-meta-tags
Is the facebook link from your website? Make sure to include a <meta property="og:image" content="someimg.jpg" /> in the head of the url you're pointing to in your post, to tell Facebook which image to use for the post.
Jeroen
There is same Open Graph Tags og:image url for five pages. For some reason the given image is shown only on one page and for the rest four facebook chooses some other image from the page.
Any ideas?
This is the page: http://time-time.net/timer/timers-and-clocks.php
There 'countdown timer' shows wanted image, but the others gets the page logo as og:image.
Facebook debugger shows that everything is okay (http://developers.facebook.com/tools/debug).
It looks OK to me.
Where does Facebook not show this image?
You have to copy the "Graph API" right before the <head>.
<meta prefix="og: https://graph.facebook.com/10151069666995572">
When posting a link to a website in Facebook (Google+ and the rest count too) you're given a thumbnail, or selection of thumbnails to choose from. These are tags from the HTML.
I've always been of the opinion that it was good practice to make my logo a background image inside a h1 tag using CSS. I make the h1 tag a link back to the home page and hide the header text with something like {text-indent: -9999px}, leaving a lovely semantic HTML header. Here's a link to my site if you want a look: http://tempertemper.net
The problem with this is that as it's a background image it's overlooked.
Would it be a good idea to post a custom at the top of the HTML for this purpose only, and hide it off the side of the page? I don't know, seems a bit messy. I could just put the tag inside the h1, but the logo wouldn't be the right shape as it's designed for a specific purpose.
Maybe there's a meta tag for this purpose or maybe there's a technique to force FB to pull a specific image that isn't loaded normally? Does anyone have any ideas or top tips for this?
Yes, you can set a meta tag so that Facebook knows which image to pick.
See: https://developers.facebook.com/docs/opengraph/
Specifically, it is the og:image property, and it will tell Facebook's link share script to choose that image as its thumbnail.
Keep in mind though that Facebook does some caching, so if you've already shared the link once it may still be "stuck" on using the older image.
You can see whats Facebook getting out of your website by using the Facebook URL Linter. See: http://developers.facebook.com/tools/lint/ (The use of the URL Linter will also rebuild Facebook's cache)
There is a Meta-Tag to let the Application (like FB) know that you want a specific image taken rather than let the user choose one.
<link rel="image_src" href="http://link.to/image.png" />
For Facebook there is also an other Way to achieve this by using Open Graph protocol.
You need to prepare your Website for using og: Tags by adding the og-Namespace in your html-Tag:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#">
Then you are able to use the og: Meta-Tags like this:
<meta property="og:title" content="Any title here" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://link.to/image.png" />
For Facebook this six og Meta-Tags are required:
og:title
og:type
og:image
og:url
og:site_name
og:admins OR og:app_id
You can find additional information an more og: types at: https://developers.facebook.com/docs/opengraph/
Like others have answered but it only works for me when i use (https)
<meta property="og:image" content="https://link.to/image.png" />
Instead of
<meta property="og:image" content="http://link.to/image.png" />
what if you did like a img but in css put
#logo{
display: none; }
<img id="logo" src="yourlogohere.jpg">
the image would not show up on the page but i don't know if facebook would see the image
As already said: Best would be to use the metatag with the og:image opengraph property.
In addition to that: Facebook is not the only platform using the opengraph metatags. Also Google+, or Xing are preferring it. Not sure about others...