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
Related
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
Whenever we share a link to this page: http://www.leadingpractice.com/our-people-and-values/our-leaders/, then we see an image of our former CEO. An old image that is supposedly somehow associated with that web page.
It looks like this (example of posting the link in a Skype chat): http://prntscr.com/hzvxot.
The image has been deleted from our server and is no longer available online. How can I change this image to something else?
Thanks!
In the HTML of your page, you have a bunch of META tags.
The first image meta tag is this:
<meta property="og:image" content="http://www.leadingpractice.com/wp-content/uploads/2016/08/Mark-von-Rosing.png" />
Remove that meta tag and after Facebook updates their cache, another image will show up (whichever is the first image meta tag).
Nevermind, I managed to fix this issue. Great.
We are using Wordpress as our platform for the website, and I tried to set a "Featured Image" for the page itself. This might be what fixed it.
Thanks for the help, guys!
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
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...