Problems with sharing posts on Facebook
The causes of failure in the sharing of a post on Facebook can be many and some more insidious than others to solve. In the past few days I found myself studying this phenomenon because of two different problems but with the same result: the failure to sharing a post on Facebook.
The first problem was observed on the site VeronikaGi: once published the online site, we could not manage to share anything on Facebook. It didn’t show neither the post title nor the description, let alone the image. Or was missing one of the three parts.
After a moment of uncertainty I immediately started work in order to see what was gone wrong. First I checked the SEO of the post, if there were mistakes and, soon after, the setting of SEO plugin (WordPress SEO Plugin by Yoast) but everything was ok.
By now, after years of living with WordPress, I put to use what I call “The Drill” that is to disable all the plugins and activate them one by one to see if there is an interference between them. So I noticed that a plugin in particular, it bothered. By blocking the codes that are used to share the various elements on Facebook. It was so invasive that even disabling, it annulled all my attempts to fix the problem. Normally I would have decided to disable the plugin and do without it, but for my client was essential because it allowed her the Automatic Login via social networks to access the comments of her blog.
The second problem was in the site of Valentina (Unwritten). The sharing, for her, worked for every post, except one. When she wrote to me (the day after discovering the problem in the other site), I had a moment of pure panic. The common denominator of the problem was only one: both sites were created by me! Ended the paranoia, I realized that there had to be other causes for the failure and in fact I had noticed in the post of Valentina (unlike that of Veronica) a meta-description too short. My Google search has found many articles, some of them they were too old, others were not complete. The most comprehensive was “For a good sharing on Facebook” (revised and updated version of “Drama and despair: a preview of Facebook”) that I really recommend you to read.
The Causes of a failed sharing of a post.
- Missing OpenGraph Tag in the Header: depending on how you see the preview of the links shared on Facebook, you can figure out which tag is missing. These tags are the key to the sharing of all the Social Networks. (Here you can find the explanation of these elements directly in the Developers section of Facebook, in English.)
- Conflict with other WordPress Plugins: generally create conflict those plugins that require activation via API/Secret Key to Facebook, the ones that you have to configure via Facebook Developers. This happens because various plugins are trying to overwrite the same values, thus generating a cancellation of tags and their contents.
- Error in the setting of the SEO Plugin: in the general settings of the section ‘Social’ , not check the appropriate box.
- Meta-description too short: Particular case and rare, when you compile a too short meta description of a post through the plugin (that is the snippets that appear in the SERP) can create problems of sharing. This is the most remote and abnormal cause, it happened to me only with a single post and I didn’t manage to replicate it. So it may have been a temporary bug, but I prefer to report it.
[su_spoiler title=”Facebook Link Anatomy” style=”fancy”]
[su_spoiler title=”Tag OpenGraph: what are they and how they work?” style=”fancy”]
The OpenGraph are essential elements for the sharing of contents of your website on the various social networks. The first pioneer was Facebook, which in 2010 has launched the possibility of integration of the contents of their site on the social platform as if they were objects belonging to the site itself. Today also other Socials are integrating the OpenGraph (Google+ & Twitter, for example).
These elements help to have more control and power to customize how the contents appear once shared on Facebook (or other social network). In case there was a total absence of one or more elements within your theme / site, Facebook picks up independently the standard MetaTag. Even from that, it could be errors of sharing, such as inserting an image within the code that is not inherent in Article (or page) that you have published. Here you can find the list of all existing tags and their codes.
The various tags, unless you use a CMS (such as WordPress or Joomla), have to be inserted by hand in the static sites (inside the <head> section) and changed on each page that you are going to update/add or share, because they are univocal and therefore they are valiant for the entire site.
There are 5 principal Tags that should be present in every pages of a website: the type, the title, the picture, the description and the url.
Describes the type of object you are going to share: if it is a site or article. There are many types of tags, but the most common ones in the web are website, article and blog. Those related to entertainment can be: book, movie, game. This kind of tag is very useful when in your site there is the little button “like” Facebook because according to the tag of belonging it will appear in the specific sections of the social network. For example, sites like IMBD have the tag set to movie, but it changes depending on the section, could be actor or tv shows.
But let’s talk about the 3 basic tags for a proper display of items on Facebook.
This is a tag that is rarely shown on Facebook, also because the social network search immediately the tag < title > that is setted automatically for the most of the time.
There is no limit on the length of the characters that we can use, but Facebook has a rule that every title that exceeds 100 characters, it will be displayed only the first 88. So I suggest you never to exceed 90-100 characters.
It is the equivalent of the HTML tag “Meta Description” with the only difference that instead of appearing within the search engines, this is the description that will appear under the title of Facebook. Unlike HTML tags this description will have no impact On Page SEO, so do not waste time writing text with keywords or something. Facebook displays roughly 200 characters within the descriptions.
This is the most important tag because it is the one that captures the reader’s attention, and the one that Facebook search in any part of the site. If it is not setted correctly, you may find yourself with whatever banner or image in your site on the sharing post but that has nothing to do with the content you are publishing.
The images shown by Facebook are of three kinds:
– Horizontal visualisation: on the top of the post, it happens when the image is wider than it is long (like a horizontal visualisation) and generally they must have a size greater than 500 pixels.
– Portrait view: to the side of the sharing box, it happens when the image is longer than it is wide (vertical framing).
– Thumbnail visualisation: when the image is less than 400×200 pixels, and it displays only a small square of preview.
Simply the canonical url of a page.
How to fix the Problem
There are various tests to do, unfortunately, the process is a classic “Trial and Error“, especially when it comes to complex CMS like WordPress where the variables are as many as the plugins installed and the complexity of the chosen theme.
First of all, you must to analyze the failed sharing of the post.
Facebook has made available this Debugger, very comfortable that keeps you from going crazy and tells you what kind of problem has your post/site/page.
As you can see from the image, the ideal response of each site should be without any complaints. This debugger also allows you to empty the cache of Facebook, so if you have fixed the problem, offers you the opportunity to reset the information related to the post and to publish it without any problems.
This step may allow you to solve everything without change the code because sometimes Facebook – that is not foolproof – may have some troubles to loading all the necessary information and insert a link that is incomplete. Passing the link through the Debugger, you force a reset of the cache, allowing you to view the post as you wish. At the end of the screen, in fact there is a preview of sharing and if it is correct, with this simple step you will have solved the problems.
But if the Debugger send me some error codes?
… and the preview is not correct??
- Check the settings of your plugin SEO. On Yoast I have already shown to you how you have to set the section “Social” applicable to Facebook. And also check that you have filled in an appropriate way all your metatags: title, description, and that there is the image in evidence (either in the post and in the page). In case you used Yoast and you have a post full of photos, I recommend you to directly set the photo that you want to appear in the preview of Facebook, so as to avoid epic load times on all the photos in the article.
- Check your plugins and, if necessary, disable all of them and then turn on again one by one. When you notice that a plugin creates you some problems, try to find a similar one. I have noticed that those who create more interference are those which require the setting via the section “Developers” of the profiles. As can be: Automatic login via Social newtwork for comments, the “Like” button on Facebook and all those plugins that require access to the data of social channels.
… Nothing, it still doesn’t work. What we can do?
Add manually the codes Open Graph..
In case you haven’t got a plugin SEO (please, we are in the 2014, download it and install it immediately), or you have correctly setted in the right way but it still doesn’t work… You switch to the manual insert of the OpenGraphs, and here I recommend you get it done to someone who means of codes. You will have to edit two important files for WordPress: the functions.php and header.php.
Regarding the Images
This is the code to establish the main picture that you want to assign to the website, when you don’t publish any photos in a post/page. It’s useful also to insert the image for those websites that have a Homepage of kind “blog”, without a real graphic Header . In that way Facebook doesn’t take whatever pictures from the whole site. I found 2 possible solutions:
1) This is a code that must be inserted inside the page header.php which involves the use of the image in evidence, so if it’s not there, it will be set an image that we have chosen as the default. «/wpcontent/themes/MyTheme/images/preview.jpg» Should be modified with the correct url of where we placed the image.
2) This is a second way which considers the addition of a code both in the header.php and in the file functions.php. They both work, but I prefer the first: it’s quickly and simple.
Regarding the Description
I found the best solution in the first article that I linked to you. This works when Facebook doesn’t manage to recover the information of the page in the first lines of the article, going to create an only, static description for the whole site. You must insert these lines in the bottom of the page functions.php. While this line should be added in the page header.php, before the closing of the tag head.
In case you have not read the digression on the OpenGraphs (but I recommend you to do it, because it helps you to fully understand what they are and how they work) I remind you that these tags are univocals and statics and applicable to the entire website. So they have to be setted cautiously and only when it’s absolutely necessary. The settings that I used, they take into consideration the Opengraph only when it excluded the presence of other elements in the page, so you do not overwrite anything important.
I do not want to give up the plugin ‘responsible’: what can I do?
Do you have realized that the absence of that plugin greatly influences the existence of your own website? That just that little plugin is the unavoidable piece of which you can’t do just less? Well, maybe there is a solution, but I tell you right away that it is complex and impractical. It worked to me and I installed on wordpress: SEO Plugin by Yoast.
1) Before posting your article, fill in every part required from the plugin SEO, both in the “General” section and in the “Social” one, the content can be the same, but the sections must be filled in both of them.
2) Post normally your article.
3) Copy the Url and paste it in the website Debugger of Facebook, and do it analyze.
4) Share your article on Facebook.
Unfortunately, this is not only an impractical procedure, but it’s not even guaranteed that it will work. I did it on the site of my client, going to change those articles that were shared in a wrong way, and it worked. But I cannot guarantee 100% that it will be the same every time. Only time will tell me. Meanwhile, I am continuing to study the situation and if I had to find other developments you will be the first to know!
What does not work?
Modify manually the preview of your own Facebook sharing. If you are administrator of a page or profile, you know that you can change the title of the sharing and add an image. Well, It could seem a good solution but the first person that will share your post, will find the same problem with the not working link.