Open Graph tags for social networks sharing

28th June 2017

Language(s): HTML/CSS | Theme(s): Development

Introduction

The Open Graph Protocol (Open Graph tags) is a package of meta tags that you can add to your differente website pages. It allows the social networks to use these informations to increase the style of the link you share. Those tags are HTML tags. Each tag gives you a differente information as the title, the description, the type of content, the site name, the site URL, the thumbnail…

open graph tags on facebook

You see those Open Graphs everyday in action. When you scroll your Facebook or Twitter feed for example, you have probably already seen custom thumbnails titles and descriptions called in your feed to layout what people share.

Actually, it is very simple to add Open Graphs to your pages. And today we’ll see how to integrate them and we’ll see the different social networks requirements.

The Open Graph tags

Mainly the Open Graph tags look like this, but we’ll see later some specificities depending on the social network you want to share on.


<!-- Open Graph Tags -->
<meta property="og:title" content="Open Graph Protocol Tutorial"/>
<meta property="og:description" content="This is a tutorial about how to integrate open graph tags to your page"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://yoursite.com/link"/>
<meta property="og:site_name" content="Site Name"/>
<meta property="og:image" content="http://yoursite.com/img/thumb.jpg"/>

OG tags for Twitter

As I said before, sometimes, OG tags are specific to their network. For example, let’s see how look the Twitter’s OG tags :


<!-- Open Graph Tags for Twitter-->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@owltoolsio">
<meta name="twitter:creator" content="@owltoolsio">
<meta name="twitter:title" content="Open Graph tags for social networks sharing">
<meta name="twitter:image" content="http://owltools.io/the_path_to_your_image/og_tags_thumb2.jpg">

Then your post should look like this when published on Twitter :

open graph tags on twitter

About the author

Bastien Delmare - Freelance Digital Designer
http://bastiendelmare.com

I'm a digital mercenary. During the last years I've been walking around the digital area, still learning everyday, this domain is an infinite source of inspiration who makes my days. Today as a freelancer I'm trying to take every project as a challenge because new knowledges, new technologies or innovative ideas are often required!