Open Graph protocol tags - The other meta tag to improve your social media link presentation

Most people understand the basics of meta tags or html tags to improve your sites usability and your technical SEO. However in the age of social media and social media sharing of Websites, pages, blog posts, product pages etc Open Graph protocol ( og: ) tags are essential if you want full control of your links presentation.

What are open graph tags for:

og: meta tags allow any webpage to present as a reach post in social media. Instead of posting your link to facebook and hoping it picks up the correct image or video, title, author og tags allow you to control what is shown and customise it for the main social media platforms, such as; googlplus, facebook, twitter. This is a great tool, because while you might take the time to present your link nicely in social media many other users may not.

Creating an attractive link can increase sales, for products. Improve through put or even just make sure your company always looks professional.

What are the open graph basics

If you look at the header source code of most web pages you will see meta tags. The most common being the Your website name here tag and possibly meta tags for keywords, description and sometimes author.

og tags compliment the existing meta tag structure and allow you to specify how a page will display as a link in social media (Ogpme, 2016).

The basic og tags are; meta property="og:title" content="Mebsites Website"
meta property="og:description" content="Demo description for blog"
meta property="og:type" content="Website"
meta property="og:url" content="http://mebsites.com"
meta property="og:image" content="http://mebsites/fb-logo.jpg"

(Pro tip: is you put your og tags in brackets you can post it straight into your ghost blogger article)

If we then posted this webpage to Facebook we would see 'Mebsites Website' as the title for the post. Description would be displayed. The url would be the page the link would go to (watchout for this one if you make a mistake). Most importantly you can specify a nice click bait image to display in the correct dimension, because how many times has the wrong image or the wrong sized image been shown in a link your trying to post for your business website!

There are many more og tags for videos etc as well. All will turn a standard text link post into a rich interactive post.

If you want to control how your page looks in twitter you can create something like this (Mozcom, 2016)

Twitter Card og meta data meta name="twitter:card" content="summarylargeimage"
meta name="twitter:site" content="@publisherhandle"
meta name="twitter:title" content="Page Title"
meta name="twitter:description" content="Page description less than 200 characters"
meta name="twitter:creator" content="@author
handle"
*Twitter summary card with large image must be at least 280x150px * meta name="twitter:image:src" content="http://www.yourwebsite.com/image.html"

Product og tags for twitter (Mozcom, 2016)

meta name="twitter:card" content="product"
meta name="twitter:site" content="@publisherhandle"
meta name="twitter:title" content="Page Title"
meta name="twitter:description" content="Page description less than 200 characters"
meta name="twitter:creator" content="@author
handle"
meta name="twitter:image" content="http://www.example.com/image.html"
meta name="twitter:data1" content="$3"
meta name="twitter:label1" content="Price"
meta name="twitter:data2" content="Black"
meta name="twitter:label2" content="Color"

Have fun and remember to back up and test and measure your results.

Bibliography:

Mozcom, C.S. (2016, no-date). Must-Have Social Meta Tags for Twitter, Google+, Facebook and More. [Weblog]. Retrieved 19 March 2016, from https://moz.com/blog/meta-data-templates-123

Ogpme. (2016). Ogpme. Retrieved 19 March, 2016, from http://ogp.me/

Kissmetricscom. (2016). Kissmetricscom. Retrieved 19 March, 2016, from https://blog.kissmetrics.com/open-graph-meta-tags/

Author image
Senior Developer at Mebsites on the Gold Coast, Queensland, Australia. Mebsites is an acclaimed Magento and Custom Framework Web Software coding house.
Gold Coast, Queensland, Australia Website