Open Graph is a protocol created by Facebook in 2010, and now used by most social networks: Twitter, LinkedIn and Pinterest. The principle is as follows: the site developer inserts Open Graph tags into the source code of the web page; when a user shares the page on a social network, the preview is displayed according to the instructions provided by the developer.
> Download: The 2022 Social Media Trends Report” align=”middle”/>
L’open graph protocol (OGP) thus allows the brand to control the display of content, by customizing information such as title, image or description. The challenge for the company: to optimize its social links. In this way, the audience of the Internet user who shared the content is encouraged to click to be redirected to the brand’s site: the company increases its reach and its incoming traffic.
What is Open Graph?
The open graph protocol allows social networks to understand how to display the preview of a web page shared by a user. The presentation of the publication thread is more ergonomic. For the company, it is the opportunity to encourage clicking on the content to redirect to its site or blog.
What is the benefit of using Open Graph?
Using Open Graph consists of entering meta og tags in the element of the HTML file that contains the code of the web page. Note that when the site is created using a CMS, dedicated plugins allow you to insert these tags without knowledge of code. The meta og tags are specifically aimed at social networks: they indicate display instructions to them, like other tags in the element which explain to the web browser how to display the site’s link on the page of search results.
Title of the sharing insert, domain name of the source site, description of the redirection content or even illustrative image: when a user shares the web page on the social network, this is the information duly filled in by the company that appear on the user’s profile, and on the publication thread of its subscribers.
Without Open Graph tags, the social network’s crawler chooses the title, preview image and description of the shared content as effectively as possible. With Open Graph beacons, the business chooses. The interest is significant: the brand optimizes the display to make it attractive to its target, inviting it in a convincing way to visit the page, to ultimately increase its traffic via social networks. The company also controls its brand image, since the sharing insert appears on social networks in accordance with its instructions.
Illustration: the corporate blog publishes an article illustrated with a photo and an infographic. The company wants to make it a snack content to broadcast on Facebook. For this purpose, it uses Open Graph: it indicates in the code of the blog page to display the infographic when the article is shared. Infographics are attractive content that the Facebook user enjoys viewing. The Facebook user clicks more readily on the link, to visit the blog in search of other interesting content. Result: Incoming traffic increases.
Open Graph meta tags
- The type tag : the og:type tag describes to the social network the nature of the main content of the page. It can be an article, a video or music. Depending, the social network applies the most suitable display format.
- The title tag : the og:title tag determines the title of the share insert visible on the social network. The company can use the title of the content of the web page, or choose a different title, more attractive to its audience on social networks.
- The image tag : the og:image tag allows you to choose the image that appears on the social network when a user shares the page. Enriched tags allow you to customize the size or the descriptive text of the image.
- The url tag : the og:url tag corresponds to the web address of the page. For readability reasons, the social network only shows the domain name in the sharing box.
- The description tag : the og:description tag, optional, allows you to write a short description of the content of the web page. The social network displays the text below the title.
- The Facebook statistics tag : the fb:app_id tag is essential to obtain the statistics of the incoming traffic generated by the sharing of the publication on Facebook.
- The video tag : The og:video tag is useful if the shared content is in video format. It allows the audience to play the video directly in the posts feed.
Other Open Graph meta tags, not mandatory, allow you to give more information about the preview of the social link to display: og:locale to specify the language of the source content or og:site_name to confirm the name of the site web to the social network, for example. Once the meta og tags have been inserted into the code of the page, it is possible to verify that the social network understands them correctly, and to ensure that there are no errors in the code. The tools for this purpose also offer a preview of the final rendering. Each social network provides its own tool:
- On Facebook: Sharing Debugger.
- On Twitter: Twitter Card Validator. Note that Twitter has developed its own protocol, Twitter Cards, but also includes the Open Graph protocol.
- On Pinterest: Rich Pin Validator.
- On LinkedIn: Open Graph debugger.
Example of adding Open Graph
In this example, the blog author is using Open Graph to optimize the preview of her first post when shared on Facebook. In particular, it uses the following meta og tags in its code:
- The og:title tag to make the content more attractive, by challenging with a question. The title displayed on the social network, here, is different from the title of the article on the blog.
- The og:description tag to make you want to continue reading, thus encouraging you to click to redirect to the blog. This short description does not appear in the article.
The Facebook user who sees the share appear on their publications feed sees a specific title, description and image. When he goes to the blog, these elements do not appear.
To go further, download this 2022 social media report and find out how to adapt your social media strategy to changing consumer expectations.