Do you know what is Website Meta Tags & Open Graph Protocol? if you don’t know about it . don’t worry in this article i will discribe understand about website meta tags & Open graph Protocol . This allows us to optimize for sharing Twitter, Facebook, Google+ and Pinerest by defining exactly how titles, descriptions, images and more appear in social streams. so Let’s Start

Introduction

The Open Graph protocol enables any web page to become a rich object in a social graph. For example, this is used on Facebook,twitter to allow any web page to have the same functionality as any other object on Facebook,twitter.
While many different technologies and schemas exist and could be combined together, there isn’t a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement.

What is Open Graph Protocol

To turn your web pages into graph objects, you need to add basic metadata to your page.there are  4 required properties for every page are:
og:title – The title of your object as it should appear within the graph, e.g., “File Storage”.
og:type – The type of your object, e.g., “Article”. Depending on the type you specify, other properties may also be required.
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, e.g., “http://www.thedevline.com/2015/01/top-free-online-file-storage-sites.html“.
As an example, the following is the Open Graph protocol Structure:

Open Graph Protocol

How it’s Work

As an simple Example when you are sharing a website URLto social networks like facebook,twitter, they will find the social information which you defined between head tags, if it’s not available, they will get it’s in the post content. and you can share it on your timeline for demo see the image may be you understand . in this process you will got social network tariff in your web site .

Structure Property

Some properties can have extra metadata attached to them. These are specified in the same way as other metadata with property and content, but the property will have extra :.
The og:image property has some optional structured properties:
og:image:url – Identical to og:image.
og:image:secure_url – An alternate url to use if the webpage requires HTTPS.
og:image:type – A MIME type for this image.
og:image:width – The number of pixels wide.
og:image:height – The number of pixels high.

Optional Metadata

The following properties are optional for any object and are generally recommended:
og:audio – A URL to an audio file to accompany this object.
og:description – A one to two sentence description of your object.
og:determiner – The word that appears before this object’s title in a sentence. An enum of (a, an, the, “”, auto). If auto is chosen, the consumer of your data should chose between “a” or “an”. Default is “” (blank).
og:locale – The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.
og:locale:alternate – An array of other locales this page is available in.
og:site_name – If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., “IMDb”.
og:video – A URL to a video file that complements this object.

How to Implementations on web Page

The open source community has developed a number of parsers and publishing tools. here I have collected developer implementation process choice your environment and easy to implement on you web page .
Facebook Object Debugger – Facebook’s official parser and debugger
Google Rich Snippets Testing Tool – Open Graph protocol support in specific verticals and Search Engines.
PHP Validator and Markup Generator – OGP 2011 input validator and markup generator in PHP5 objects
PHP Consumer – a small library for accessing of Open Graph Protocol data in PHP
OpenGraphNode in PHP – a simple parser for PHP
PyOpenGraph – a library written in Python for parsing Open Graph protocol information from web sites
OpenGraph Ruby – Ruby Gem which parses web pages and extracts Open Graph protocol markup
OpenGraph for Java – small Java class used to represent the Open Graph protocol
RDF::RDFa::Parser – Perl RDFa parser which understands the Open Graph protocol
WordPress plugin – Facebook’s official WordPress plugin, which adds Open Graph metadata to WordPress powered sites.
Alternate WordPress OGP plugin

SHARE
Previous articleBest HTML5 Audio Players Plugins For Developers
Next articleBest FREE jQuery Tab Plugins For Developers
Abdullah Al Mahamud is a programmer and founder of Thedevline an Inspiration blog since 2014. live in Bangladesh. He is passionate about Technology and Design. He works on the freelancing marketplace as a freelancer and has also written for Useful Article in this blog

Leave a Reply

avatar
  Subscribe  
Notify of