The Open Graph Protocol was first introduced by Facebook in autumn 2010. It replaced “Facebook Connect“ that was previously used to verify Facebook profiles on websites.
The click activity plays a key role for content shared on Facebook and other social networks – just like in search results pages. Besides the title and description, you can also define other elements (e.g., preview images) in social networks. A well-optimized and targeted preview of the shared article helps improve the CTR significantly. This article will show you the most important tips on Open Graph optimization to help you make the most out of your social shares!
The og:title is the most prominently displayed element next to the image on a Facebook post. You should therefore try to address your target group on social networks as best as possible in order to improve the CTR of your shared posts! Make sure your title does not exceed 95 characters. To keep the title short and crisp, you should also bear in mind that there is always a line break after the first 50 characters.
<meta property=”og:title” content="Open Graph optimization – Tips that
website operators should consider"/>
Just like with the html meta description, you can add a description for social networks using og:description. Primary keyword, secondary keyword, etc. do not matter in this case, and no keywords are highlighted in bold. Your description should therefore be aimed at enticing users to click and should give users a clue of what to expect from your link (this helps avoid user disappointment and hence avoid deteriorating user signals). Maximum number of characters: 297!
<meta property=”og:description” content=”description “/>
One very crucial element of the og properties is og:image. You should pay special attention to this element and optimize it as best as possible. For the image to be perfectly presented to the corresponding target group, it is advisable to use a custom og:image, especially if the content is crucial for social networks. There are often many ways in which you can optimize the article image used on your website. A user can also select an image if og:image is not used. Banner ads, icons, and other website elements are often also displayed in this selection, which should not happen. More details on ideal image dimensions and sizes will be discussed later in this article. The examples below show different ways in which you can optimally present your og:image.
OnPage.org - A custom og:image layout that was developed for the OnPage Magazine. This layout contains the brand name, author, and a photo of the author. Here, it is clear that we have different optimization options (from article to article), and the cost-to-benefit ratio shows you that the og:image images used by OnPage are simply ideal!
Figure 1: og:image on OnPage.org
As for your own website, you simply have to keep experimenting the different options. Ideal tracking enables you to quickly find out which option is liked most by the different target groups. Ideally, og:image should offer clues on the article’s content whereas the title and description should then be used to further encourage users to click.
Good to know: If og:image is not used, XING does not search for an image on the website. The og:image element is required in order to display a preview for the shared link on XING.
Some people consider the og:url listing redundant in the use of the canonical tag. However, since you have to use multiple URLs at times (e.g., through tracking of social media campaigns), it is important to configure them using the Open Graph Protocol in order to provide social networks with better clues on the Edge Rank calculation (Facebook). And considering that social networks also work with alternative clues (e.g., Canonical URL), it is advisable to list og:url before the Canonical Tag in the source code. Unlike before when several problems often resulted in false URLs in the Facebook stream, all major social networks currently work well with different sequences.
<meta property=”og:url” content=”https://en.ryte.com/magazine/?p=7112&preview=
In most cases, we can use og:type for websites, blogs or articles. However, if you also work with other media, such as music, videos, books, etc., you should certainly be well acquainted with the og:type properties. In this article, we focus on the optimization of HTML documents for Open Graph. Referencing of og:type looks like this:
<meta property=”og:type” content=”article”/>
You need to be conversant with the currently used image formats and sizes if you want to optimally present og:image in Facebook. Facebook currently uses a 1.91:1 format for images in its feed. But you still have to consider several aspects for this size:
If you are working with small images and would like to integrate them within your text, you should try to position them as centrally as possible. This ensures that the images are also visible in the Facebook stream (without being truncated).
One very helpful and valuable tool in the optimization of Open Graph elements is the Facebook Object Debugger. This shows you the information that is saved on Facebook for a specific URL as well as how the URL is displayed on Facebook.
The most important function of the Open Graph Debugger: Fetch new scrape information. This function is particularly important when you want to test and optimize a lot on your website. It also serves as a "delete cache" function in the Open Graph Protocol. Facebook stores information temporarily. If you optimize og:title, og:image, or other elements, it might take some time before Facebook finally displays the elements correctly. The "Fetch new scrape information" function deletes and reloads the cached information.
You can then place the bookmark in the bookmarks bar and thus make it ready to use on any URL.
I hope this article has given you a good overview of Open Graph optimization and look forward to any questions and suggestions in the comments section!
Published on 07/27/2016 by Martin Tauber.
With his passion for technical and intelligent systems, Martin Tauber has been devoting himself to online marketing since 2008. Until recently, he shared his expertise as an SEO Consultant at the online marketing agency Catbird Seat. He is currently concentrating on the conception and development of his own innovative websites and apps.Become a guest author »
Get more traffic and customers by optimizing your website, content and search performance. What are you waiting for?Register for free
Do you want more SEO traffic?
Improve your rankings for free by using Ryte.Register for free