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

A good resume of what OG Tags you should integrate in your code


<meta property="og:image" content="http://the_path_to_my_thumbnail/img/bastiendelmare_thumb_ogtags.jpg"><!-- Put the path of your thumb image you want to show when people share the  url -->
<meta property="og:image:width" content="600"><!-- This is the width of your image, in 2017 Facebook recommands a size between 600*315 & 1200*630 -->
<meta property="og:image:height" content="315"><!-- This is the width of your image, in 2017 Facebook recommands a size between 600*315 & 1200*630 -->
<meta property="og:locale" content="en_US"><!-- Important : put the language of the page -->
<meta property="og:type" content="website"><!-- What type of content is this -->
<meta property="og:title" content="Bastien Delmare – Graphic &amp; Motion Designer"><!-- Give a nice and evocative OG Tag Title to your website, or use the title of the current page -->
<meta property="og:description" content="A nice description about the current URL or about what I do. This should be under 160 caracters in total.">
<meta property="og:url" content="http://bastiendelmare.com/"><!-- Root URL of your website -->
<meta property="og:site_name" content="Bastien Delmare"><!-- Site name : here my name -->
<meta name="twitter:card" content="summary_large_image"><!-- Type of layout when shared on twitter -->
<meta name="twitter:site" content="@bastiendelmare"><!-- Twitter username -->
<meta name="twitter:creator" content="@bastiendelmare"><!-- Twitter username -->
<meta name="twitter:title" content="Bastien Delmare – Graphic &amp; Motion Designer"><!-- Twitter title, same as previous one -->
<meta name="twitter:description" content="A nice description about the current URL or about what I do. This should be under 160 caracters in total.">
<meta name="twitter:image" content="http://the_path_to_my_thumbnail/img/bastiendelmare_thumb_ogtags.jpg">
<meta name="twitter:image:width" content="600">
<meta name="twitter:image:height" content="315">

og:image : An image URL which should represent your object within the graph. Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images. Images can be up to 8MB in size. If your image is smaller than 600 x 315 px, it will still display in the link page post, but the size will be much smaller.

fb_large_image

fb_small_image

og:image:width / og:image:height :Using these tags will specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.

og:locale : This gives the language of your page.  The format is language_TERRITORY. Default is en_US.

og:type : In order for your object to be represented within the graph, you need to specify its type (also possible : music, video, article, book, profile, website, see link).

og:title : The title of your object as it should appear within the graph.

og:description : A one to two sentence description of your object (advice : less than 160 caracters).

og:url : The canonical URL of your object that will be used as its permanent ID in the graph.

Cannonical URL : canonical URL allows you to tell search engines that certain similar URLs are actually one and the same. Sometimes you have products or content that is accessible under multiple URLs, or even on multiple websites. Using a canonical URL (an HTML link tag with attribute rel=canonical) these can exist without harming your rankings.

og:site_name :If your object is part of a larger web site, the name which should be displayed for the overall site.

 

Some more infos to enhance your SEO


<meta name="robots" content="noodp,noydir"><!-- force google & yahoo to use metas from the webdsite -->
<meta name="author" content="Bastien Delmare"><!-- Name of the website/page author -->
<meta name="description" content="A nice description about the current URL or about what I do. This should be under 160 caracters in total.">
<meta property="article:publisher" content="https://www.facebook.com/bastiendelmarefreelance/"><!-- You can use your pro/personnal social network page to inform people about who you are -->
<link rel="canonical" href="http://bastiendelmare.com/">

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!