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…
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 :