In order for images to appear correctly on Facebook, you must use meta tags a>. In this case for Facebook, a special set of meta tags is required as @Maicon already mentioned, called Open Graph Protocol / a> or abbreviated OG Meta tags.
To add them to your Blogger site, navigate to - Blogger > Dashboard > Template > Edit HTML
At the top of the editor, you'll find a code that looks like this:
<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
Paste the code xmlns:og='http://ogp.me/ns#' before the closing of this html tag. Example:
<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'
xmlns:og='http://ogp.me/ns#'>
This will now add the Open Graph Protocol tag that is the protocol used by Facebook to your Blogger. After this has been done, look for the tag <head> that should be just below the tag above, and below this tag head paste the code:
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='IMAGEM_PERSONALIZADA_HOMEPAGE' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='"Ler artigo sobre " + data:blog.pageName + " em " + data:blog.title + ""' property='og:description'/>
</b:if>
<meta content='ID_DA_TUA_APP_FACEBOOK' property='fb:app_id'/>
<meta content='ADMINS_DA_TUA_APP_FACEBOOK' property='fb:admins'/>
Basically what this <b:if cond='data:blog.metaDescription'> will do, is to get the meta description if it exists and display it as og:description , but if it does not exist and / or is not available, then the text Ler artigo sobre ... will be implemented as og:description instead.
Meta description on Blogger
To enable meta description you have to go to:
Definições > Preferência de pesquisa > Meta tags > Descrição Click edit.
And the following will appear:
Add%with%toindividualpublications
SimplyedityourpublicationorpageandlookfortheSearchDescriptionoption,andthisiswherewe'lladdthedescriptionforeachpagethatwillnowalsobedisplayedasMetadescriptiontoFacebook.
Do not forget to replace the fields:
-
og:description - Image displayed on homepage (home page) and other pages
Here you should indicate the image address that you want to be the default image to be displayed when you publish the homepage link on Facebook (for example - IMAGEM_PERSONALIZADA_HOMEPAGE ) and this will also be the default image on other non-publication pages. br>
Yes, it may be the logo of the site, but the image must have at least pt.stackoverflow.com width and height. You should replace the text 200px with something like - IMAGEM_PERSONALIZADA_HOMEPAGE
-
http://i.stack.imgur.com/gL1sB.jpg - The ID of your Facebook application
Here you should put the ID of your app. This ID_DA_TUA_APP_FACEBOOK and also the next one meta tag are not very relevant here in this case, they are only necessary to implement the Facebook comment box on your site and the like, so if you want you can remove this tag and the other one that comes down because it will only add the name of your app / site when someone posts something on Facebook, for example - ADMINS . To use this you need to create an APP on Facebook . If you want, here is a website that explains how to create an app step by step.
This value should be changed to something like - O João publicou isto através da aplicação ______ which will be the app ID
-
000111222333444555 - The administrators of your APP
This will not be very useful as adding admins is basically adding admins to control your app. For example if you were to use the Facebook comment box on your site, adding admins they could moderate the comments on your site and the like. But now you can also add admins to the app itself, so if you create an app you can delete this tag and add the admins directly to your app by going to: ADMINS_DA_TUA_APP_FACEBOOK on the page link after you've created your app. You can find out what your My Apps > Roles > Administators is through the findMyFacebookId site.
This value should be changed to something like - user id
After replacing all of these, the meta tags should look something like this:
<meta content='http://i.stack.imgur.com/gL1sB.jpg' property='og:image'/>
<meta content='000111222333444555' property='fb:app_id'/>
<meta content='12345678910,10987654321' property='fb:admins'/>
Remembering that these last two tags are not necessarily mandatory, the code will work normally with or without them, so if you want you can remove them from the code and when you need them come here in the answer and follow the example to implement them, you can use them in your code.
At the end of this everything is implemented, it should look something like the code below:
