Being well referenced on ridplace – the Open Graph protocol

ridplace uses opengraph metadata to display your site and all public bookmarks

what is opengraph?

In order to standardise the appearance of shares on its social network, in 2010 Facebook presented the Open Graph protocol, which was inspired by the work carried out by Dublin Core, link-rel canonical, Microformats and RDFa. This project has since been entrusted to the Open Web Foundation.

The Open Graph protocol makes it possible to optimise the content of a web page so that users can share it on the main social networks and on riplace . Technically, these are simple META tags that indicate the content of the web page. Remember that search engines use this protocol to better understand the content of a web page.

So by integrating these META Open Graph tags into the content of your page, you can define the elements of your page that you want to be displayed when someone shares your page. In addition to the title and description, other elements such as preview images can be defined using these tags. A perfectly optimised preview of the shared article, tailored to the target group, leads to significant improvements in the click-through rate.

In this article, I’ll be giving you a few tips and tricks for optimising your Open Graph tags. The aim is to get the most out of your social network shares!

The technical side of the Open Graph protocol

To understand how this protocol works, we need to open the bonnet and take a look at what the engine looks like.
As we saw in the introduction, Open Graph is a protocol made up of META tags. Here’s an example:

<meta property="og:title" content="article title"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="https://mywebsite.com/article-title"/>
<meta property="og:image" content="https://mywebsite.com//article_image.jpg"/>
<meta property="og:description" content="This article introduces you to the Open Graph protocol"/>

If you’re already familiar with META tags (title, description, author, etc), you’ll immediately notice that the only real difference between META tags and Open Graph tags lies in the property attributes.

We’ll now look at these different tags and how to make the most of them.

og:title

I’m deliberately starting with the og:title element because it’s the most visible next to the image when published on Facebook.

Example of a Facebook share Open Graph protocol
Example of a share on Facebook
Here, it’s all about addressing your target audience in the most appropriate way possible. The more relevant and punchy the title, the higher the CTR of your posts. Although there is no official rule on the maximum length of your title, it is still advisable to limit it to 50-65 characters, so that no line breaks occur during display.

og:description

Similar to the html meta description tag, the og:description element can be used to display a different description on social networks.

As no keywords are highlighted here, there is no need to worry about this optimisation. The purpose of the description is to briefly indicate the purpose of the page and to encourage users to click to access it. The unofficial maximum length for Facebook is 297 characters, but here again I recommend that you limit yourself to one or two short, energetic sentences to capture users’ attention as effectively as possible. You can even do without if your title is eloquent enough.

og:image

Let’s move on to the visual element. The og:image element is particularly important because you can control the appearance of the publication in News Feeds. I strongly recommend that you create an image specifically for this purpose, especially for content that has a high potential on social networks. If no og:image tag is specified, the distributor will choose an image at random, i.e. from among those that are perhaps not supposed to appear.

I’m not going to give you a theoretical lecture on the subject, but there are many ways of attracting clicks on a publication using visuals. They can be designed in such a way as to catch the eye without providing any textual information about the publication.

While the content of the visual is important, i.e. what information your image will convey, you also need to consider the size of the image. Not all sites have the same requirements in this respect, as we shall now see.

og:type

In most cases, you will use the following values for the og:type element: website, blog or article. However, if you are working with other types of content such as products, videos, music, books or others, it may be worth taking a closer look at the functions offered by the og:type element.

og:url

From my point of view, mentioning the og:url tag is redundant in relation to the canonical URL of the page. However, given that several URLs are sometimes used (particularly when tracking a campaign on social networks), it can be useful to differentiate between them. It should be noted, however, that the major platforms such as Facebook are now capable of managing a different order.

You can find all the tags available on the Open Graph Protocol project page.

Now you’ready to submit your website on ridplace