- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
FAQs
General Tutorials
MonsterONE Subscrioption
Open Graph
March 14, 2016
The Open Graph is a protocol which enables any web page to become a rich object in a social network. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. Through Open Graph protocol you can define how your shared contents should be displayed on Facebook.
Most content is shared to Facebook as a URL, so it is important that you mark up your website with Open Graph tags to take control over how your content appears on Facebook. To turn your web pages into Open Graph objects, you need to add basic metadata to your page. In particular, you need to place additional <meta> tags in the <head> of your web page. These tags include descriptive meta-data about the content that you specifically want to present when someone shares your blog post or page. The four required properties for every page are:
-
og:title– the title of your object as it should appear within the graph. -
og:type– the type of your object, for example, “article”. Depending on the type you specify, other properties may also be required. This tag impacts how your content shows up in Facebook News Feed. -
og:image– an image URL which should represent your object within the graph. -
og:url– the canonical URL of your object that will be used as its permanent ID in the graph, for instance “http://www.example.com/2016/02/10/articles/article.html”.
The following properties are optional for any object and are generally recommended:
-
og:description– a brief description of the content, usually between 2 and 4 sentences. This will be displayed below the title of the post on Facebook. -
og:audio– a URL to an audio file to accompany this object. -
og:video– a URL to a video file that complements this object. -
og:locale– the locale of the resource. Default isen_US. -
og:site_name– the name of your website (such as IMDb, not imdb.com).
As an example, the following is the Open Graph protocol markup for an article, news story or blog post with og:type="article":
<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" /> <meta property="og:type" content="article" /> <meta property="og:title" content="When Great Minds Don’t Think Alike" /> <meta property="og:description" content="How much does culture influence creative thinking?" /> <meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
Here is an example of content formatted with Open Graph tags for optimal display on Facebook:
