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...
Related
Noob question. I have a chrome extension that is throwing back funky results when it accesses an api.
I think the problem is with the user ID I'm scraping from the DOM.
What exactly are the purposes of these elements?
<meta name="twitter:app:url:googleplay" content="website://user/22457128">
<meta name="twitter:app:url:googleplay" content="website://user/22457128">
<meta property="fb:app_id" website="127876283963492">
<meta property="twitter:app:id:iphone" content="517684114">
<meta property="twitter:app:id:ipad" content="517684114">
<meta property="twitter:creator:id" content="385941344">
And why are some of the Ids at the end of them the same but others are different?
They basically show other sites how to display your website.
Like if you share a YouTube video in Twitter or Facebook is shows all nice with the video title, thumbnail, length and all those great stuff. Its all done using meta tags.
Google use website meta tags to determine what the website is about and if it is appropriate.
Here is a link example:
https://youtu.be/Luo_wCcWAaw
The first two are the exact same that's why they're I'd is the same. They tell you the name of the website to Twitter.
Onto Property's
They tell you how the website should look on different devices and on different websites
iPhone property tells how the meta tag should look on iPhone.
IPad meta says how it should look on ipad.
Fb one says how it should look on Facebook.
I want to display multiple images in facebook's preview when sharing a website.
How can I do this? Can I just define multiple og:image tags?
Here is an example, what I want to do:
Thanks
You can simply add a single og:image tag.
<meta property="og:image" itemprop="image primaryImageOfPage" content="src/to/image/file" />
But when you share a link on facebook, they give you the option to add multiple images. Use that option.
See at the bottom you have the option to add multiple images. Use that and then publish.
Another Option
You can add multiple og:image tags and then if only single image shows up update that page link in facebook debugger.
<meta property="og:image" content="src/to/image/1">
<meta property="og:image" content="src/to/image/2">
Any pages that have already been shared (with one image) can be updated by loading the link in the facebook debugger here:
https://developers.facebook.com/tools/debug/
The debugger/linter may not show a preview of all the images – it may just show the last one however it does work.
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
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