The Open Graph(OG) protocol enables any web page to become a rich object in a social graph using Meta Tags. As marketers create a lot digital content to attract users and engage them on social media – anyone who creates content must know about the Open Graph protocol and how to use the content and images to display the best social media experience for its users.
In this short example I will show you how to use the OG protocol to display a rich social media display for your links.
First of all, we need know the simple syntax of the META tag.
|
1 |
<meta property="og:title" content="Your page title goes here" /> |
Open Graph uses a few attributes that you need to edit and integrate into your META tags.
There is no need to explain them all here, let me just show you how they look in plain code:
|
1 2 3 4 5 6 7 |
<meta property="og:title" content="Your title here" /> <meta property="og:url" content="http://www.yourdomain.com/canonical-url" /> <meta property="og:type" content="website" /> <meta property="og:description" content="Your description goes here" /> <meta property="og:image" content="http://www.yourdomain.com/image.jpg" /> <meta property="article:publisher" content="https://www.facebook.com/your-page/" /> <meta property="article:author" content="https://www.facebook.com/your-page-profile-etc/" /> |
You can use the Facebook Debugger to see how your Open Graph tags look before publishing your content.
Check out a live DEMO of this example.