How to change the image that goes on Facebook or Messenger when I put the address of my site ?
When you communicate on Facebook you often give the URL of your site. As a reminder, the URL is the address starting with “http://”. Whether in a post or in Messenger, the address is immediately recognized and Facebook inserts an image which is directly extracted from your site.
Often alas, the image is not significant, or appears truncated. You can actually prepare an image that suits you and require Facebook to display it.
A little programming
We will use the Open Graph tags for this.. These are fairly recent tags and understanding the functioning of Open Graph tags and their stake in your SEO has become essential.. Of course, you will need to access the HTML code of your web pages and of course the FTP to update your pages and upload your image.
Definition of the Open Graph protocol
This protocol that will allow you to share content from a web page on social networks. He is called “Open Graph”, which corresponds to “and” tags – couple of examples : <meta property = ”and:locale ”content =” fr_FR ”>
Open Graph data is therefore gathered in a set of tags allowing to give structured and rich information on the content of a page coming from a website.. In other words, when a user clicks a share button, the information entered by default will be that inserted.
The impact of these tags is at the search engine level. Originally, Open Graph tags were intended exclusively for social networks. They generate and increase the click through rate on a website via social shares, which can be very interesting. As Google uses as the click-through rate among its relevance criteria, the Open Graph protocol then indirectly becomes a significant tool in an SEO strategy.
Do not hesitate to pass check the basics of Google SEO to optimize your site.
How to set up open graph tags ?
Just add the following lines in your Html page. This is done in the section <HEAD> following the tags <Meta> usual. I also advise you to create a signature image. A format close to 800×600 px in 72 dpi suffit.
There are several tags but to summarize, here are the 7 Open Graph tags are important. The others do not have an overdeveloped impact. Information is often taken from traditional Meta tags. But since the protocol used is not the same, this redefinition is necessary.
- and:locale : allows to define the language of the website
- and:type : allows to define the type of site : Website, Blog etc…
- and:title : corresponds to the title of your page. You must create a title of less than 65 characters. It is similar to your classic Title tag
- and:description : short description of the page, less of 300 characters: it is similar to your classic meta description.
- and:url : indicate here the address which corresponds to the url of your web page
- and:image : put the full address of the file that represents the image of your page that will be shared on social networks. This is actually this image that we find in signature.
- and:site_name : enter here the global name of your website
Once online, just go to the developer section of Facebook to check the consistency of your data : https://developers.facebook.com/tools/debug/
<meta property = ”and:locale ”content =” fr_FR ”>
Like I told you, this manipulation requires an intervention in the code of your page. If this manipulation exceeds you do not hesitate to consult me.