Open Graph, boost your visibility on social networks

Automatically display the preview of a page when posting an URL on a chat or social network. 2020-11-09

Find more tutorials explaining the basics of a subject in ten minutes with the tag what is it.

You've probably already seen that some URLs are automatically expanded when they are shared on a social network or in a chat conversation: this is called the "unfurling" of a link. When posting the link, the social network analyzes its content then displays an image, a title, a description, a date, the author of an article, a media player and so much more...

To make this analysis possible, you need to explicitly indicate all the needed details by adding meta tags in the header of your pages. Some social networks developed their own protocol of meta tags with their own vocabulary, the Twitter Card Tags for instance. These proprietary protocols offer a lot of powerful features. In 2010, Facebook developed one of these protocols: the Open Graph Protocol.

Open Graph has now been adopted as a common protocol by the main social networks and chat solutions.

Facebook, LinkedIn, WhatsApp, Slack, Instagram, Twitter and so on... with Open Graph you can use the basic features of all these networks. As you can see in the Twitter Cards documentation, Open Graph is not 100% supported and you still need to use the proprietary protocols for advanced cases.

Let's take a tutorial of tuto4dev as an example:

Main Open Graph meta tags
<meta property="og:site_name" content="tuto4dev">

<meta property="og:image" content="https://tuto4.dev/tuto4dev-logo-open-graph.jpg">
<meta property="og:image:secure_url" content="https://tuto4.dev/tuto4dev-logo-open-graph.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="1200">
<meta property="og:image:alt" content="Easy and short tutorials for developers. Come learn docker, PHP, nodejs, web marketing and many other developer skills.">

<meta property="og:title" content="Microdata, enrich search engine results">
<meta property="og:description" content="How to customize the way a result is displayed by Google, Bing and their friends? Make search engines understand the content of a web page.">
<meta property="og:type" content="article">
<meta property="article:published_time" content="2020-11-08">
<meta property="article:author" content="https://tuto4.dev/author/nicolas-gautron">
<meta property="og:url" content="https://tuto4.dev/tutorial/microdata-enrich-search-engine-results">

Actually, you can skip half of these markups and everything will still be fine on the majority of the networks. The above example is the result of my own tests on several networks and I would love to read your feedback in the comments.

Is there a way to test the result before actually sharing a link on a network?

Of course, every social network has its own tester. I advise you to test the result on every tool in order to avoid some bad surprises.

Facebook sharing debug tools . The tool works as well for Messenger, WhatsApp and Instagram.
Twitter card validator
Linkedin post inspector
For Slack my favorite technique is to talk to myself. Yes, it's sad I know...

An important point before ending this tutorial: Open Graph is also used by social network's search engines.

Learn more about Open Graph in the official documentation.

Have a nice day :)