Translated by Núria Adell.
On a few occasions, users of Nelio Content have contacted us because they had planned a social message to promote a post, but when it was published on the chosen social network, the featured image of the post did not show on the social publication. A similar thing has happened to some users with posts that include the typical buttons to share on social networks: when they click to share a post on Facebook, Twitter, LinkedIn, Google+ or Pinterest, the image doesn’t load or is not the one from the post.
Why is this happening? Well, this is because the social networks have not been able to correctly interpret the information of your post. In other words, because you haven’t configured your WordPress correctly so that social networks know how to interpret the information.
Before providing you with the solution, let me start with some basics to set up the context.
Meta Tags that Google Understands
As you know, a web page is a document usually written in HTML (HyperText Markup Language). This allows you to include links to other pages or documents, and can even include or refer to scripts that may affect the behavior of the browser.
If you go check the source code on your browser, a text viewer will open with the HTML code of the page you are viewing. As you can see, an HTML page consists of a list of elements surrounded by angle brackets (<, >, /): each element has an initial tag (<tag>), in which the properties of the element are indicated; the content of the element; and a closing tag(<tag>). Therefore, when your browser interprets an HTML page and finds the element <strong>in bold</strong>, it will show on your screen: in bold. So on the one hand, we have indicated how to interpret the content in the labels and, on the other hand, we have the text of the content itself.
In addition, on every HTML page, after the <!DOCTYPE html> and <html> tags that define the start of the document, you will find a <head> section that includes information on the characteristics of the page (not shown to the user), as well as a <body> section that includes the content one sees on the page.
With this you can have a clear idea of how any web page looks like under the hood.
However, if you want Google (or any other search engine) to find, index, and classify the content of your website within the results of a search, defining the content on your website well is not enough. So, for example, if we want Google to display the information that makes “most sense” of the following post…
The web page of this post should include meta tags that will facilitate the process of “understanding the meaning” of the content.
What Are Meta Tags?
They are simply information that is included in the section <head> of the page (remember that this section is not visualized in the browser, this is why they are called “meta”) and they follow the format <meta />.
For example, if this post includes the following meta tag:
<meta name="description" content="The WordPress login form allows you to access your dashboard. Here you have 3 simple tricks to modify its behaviour easily and quickly."/>
Google understands that you are providing a brief description of the page, and in some cases this description is the one that Google uses as part of the snippet that is displayed in the search results.
It makes sense, right? Imagine Google had to summarize your web page in two lines. It is much better to indicate yourself how you want the results of a search to be displayed.
How do you put this information in your WordPress? The easiest way is to have the Yoast plugin installed (it’s free) and enter the description in the section that is prepared for it: Edit snippet.
And if you’re interested, you can check the list of all the HTML meta tags that Google understands here.
Nelio Content
I’m so happy about Nelio Content that I will sound like a payed advocate… but here’s why you’ll love it: it works as promised, its auto-scheduling feature is top-notch, Nelio’s value for money is unmatched, and the support team feels like your own.
Panozk
Social Meta Tags
In the same way that Google uses meta tags to better index and display your web content when it is searched, there are other type of meta tags that most social networks currently use. In the case of Facebook for example, these meta tags help you share a post in your blog as another publication in your wall. They are meta tags (title, image, description…) that help the social network to create the complete social post that is published on the network.
Open Graph Protocol
The purpose of these meta tags, which should also be included in the <head> section of the HTML code, is to help the social network interpret the content. This way, it is able to convert the URL of a web page into a complete social post. This set of tags is known as the Open Graph protocol. And they follow the format <meta property="og:…" content="…">
Therefore, in order to share the previous post and allow it to be displayed on your Facebook wall as:
the following Open Graph meta tags must be included in the <head> section:
If you look closely at each one of them, you will easily find the bit that corresponds to them on the Facebook post.
Basic Meta Tags
Here are the basic tags that Facebook needs:
og:title— it is usually the title of the article, post, video, or audio you’re sharing. Its limit is 75 characters. If this tag doesn’t exist, Facebook automatically uses the title of the content being published.og:description— it is recommended that the description does not exceed 195 characters, including spaces. If this tag doesn’t exist, Facebook uses the description written for the SEO, and in the absence of the latter, it uses the first paragraph of the post or content.og:image— the image that should appear on the Facebook post must have a size of 200px x 200px. If this tag doesn’t exist, Facebook basically does what it can using the images that are in the code of the website. Although usually, it will not use any image, and hence the complaint of our clients that I mentioned at the beginning.og:url— the URL address that is posted on Facebook should be the link to the content by default.
Here you will find more information on the meta tags of Open Graph.
Meta Tags in WordPress
But how do we put all of this information in our pages in WordPress?
Don’t worry, it’s very easy. Just like before, use the Yoast plugin. On the WordPress Dashboard click on the Social menu option of the plugin and then go to the active tab of Facebook to add the Open Graph metadata.
And you can do the same thing for the tabs of the different social networks.
Now you can share all the posts of your blog correctly on your social networks. In fact, to check that everything is correct, Facebook developers have a very complete tool, Sharing Debugger, which, after entering the URL of your post, evaluates whether all the meta tags are placed correctly.
As you can see on the previous image, Facebook has verified that the previous post has all the meta tags it needs to be able to publish it as a complete Facebook publication on the wall.
Conclusions
On the one hand, we have seen that using metadata on your website is a good SEO practice recommended directly by Google. If you want to achieve a good positioning, you should incorporate the meta tags in your site. And on the other hand, the better you promote your posts on your social networks, the more chances you have of increasing the number of visits. Make sure you use the right meta tags to properly display them on the different networks. Remember it’s the first impression that counts.
Featured Image by Mira Bozhko.
Leave a Reply