In recent times I’ve often come across people working on their website that run into the same problem; once their website is complete, they head over to their Facebook profile to get started on promotion, post a link to one of their pages, and find that the link preview that Facebook generates isn’t as classy as they’d envisioned. To those people I say this; I know your pain, and in this article I’ll help you get around this issue!
What’s going on?
In order to understand the gist of things, we first need to learn how Facebook creates a particular page’s preview.
In short, once you insert a link in your Facebook status, the linked site is paid a visit by Facebook’s bot (barring a small exception that I’ll discuss later) that tries to pull the following information from it’s HTML code:
- page title
- main content of the webpage
- images
Depending on the overall quality of the code on the linked website, this sweep by the bot can be ineffective and lead to some visual or other issues. However, in many cases the reason that the link looks a bit iffy visually is down to a simpler problem, and that is that the link preview has a completely different structure than a standard article; images have different proportions, titles can be longer than the link will allow, and the article’s shorthand description is not always shown from its actual start point, causing some confusion as to the page’s purpose.
Help us Open Graph!
Luckily, Facebook’s creators foresaw this problem in their electronic crystal balls, and made sure to create a way to describe data that is far more accessible and understandable for their bots, which in turn gives you better control over how the links are displayed. This description method is known as Open Graph. It is based on metatags that include information that will be helpful for bots, such as the website’s title, its content description, the image that should be shown in the preview, etc…
In short, with Open Graph use, it is possible to prepare a summary of our article with dedicated images and description elements just for Facebook.
Open Graph from a code point of view
In order to implement Open Graph on a website, one need only add the appropriate metatags to a section, e.g.:
The above metatag will change the website’s title when displayed in a preview. To use a dedicated thumbnail in the preview, the following code can be used to declare an image:
Of course, there are many more metatags that cover a wide range of uses; the full list can be found on the official Open Graph website.
Example
Here’s a simple example set of Open Graph tags that will provide Facebook with the information it needs to create a link-specific title, description and image of the linked article:
How to add metatags in my theme?
Of course, we rarely if ever add metatags as above to the theme code manually, as there are plenty of plugins that will generate them automatically. Instead, our role is usually limited to inserting the appropriate text and choosing images where needed in the in plugin’s options.
The most popular plugin available that supports the Open Graph protocol is SEO by Yoast – after installation, you can navigate to the “Social” tab in the “WordPress SEO by Yoast” block that appears in the post/page editor and specify the fields and their content for your own title, description and post thumbnail:
Typical Issues
The final thing I want to cover in this article relates to the typical issues that may arise from using Open Graph, and what causes them.
Link preview is the same after making changes
As I mentioned at the beginning of this article, there is one exception, one situation, where the Facebook bot will not visit the linked website once the link is added to a status, and that is related to the use of the cache function from Facebook. Essentially, if we insert a link in a status, a bot will visit the linked site and collect the usual information it needs to provide the preview. It then saves this data for future use. Then, if you insert the same link a second time, Facebook will, instead of sending out a bot to trawl the linked page again, simply load the cached data. So, if you make several changes over a short period of time, you’re not going to see them reflected in the generated link preview. Luckily, this problem can be solved easily – just insert a problematic link address on this website – and it will force a refresh of the data used by Facebook. Once done, test out the link once more to make sure that it’s working fine.
Link preview does not display
There are many potential reasons why a link preview is not generated or displayed; far too many to list in this article. However, we can cover the most common issue, which is that the Facebook bot is unable to access the linked website for some reason, such as:
- There is an additional authorization layer that cannot be passed by a bot because it doesn’t have access rights
- An unpublished entry – such entries are visible for administrators and authors only,
- temporary problems with a server – a bot will be taken to error page – in this case, the best thing to do would be to refresh the cache as per the above guide,
- incorrect Open Graph data structure – use the tools described above to help diagnose this kind of issue,
- incorrect website HTML structure – this kind of issue is rare, especially among even slightly experienced web developers :)
Personally, I always recommend that developers check, using a tool for debugging Open Graph data, exactly what a bot receives (it can be checked under the link “See exactly what our scraper sees for your URL“) – it allows you to specify whether an error results from unavailability of a subpage for the bot to access, or whether there are any errors in the code.
That’s all folks! I hope that the above guide has proven useful, and if you’ve run into any strange link issues in the past, why not share them in the comments below?