Learning how to add Open Graph and Schema meta data to your website’s HTML pages can be done easily or over the course of a business day. We will explore both methods in this article. First things first though. You have to be made aware of what Open Graph and Schema meta data are so that you know of their importance to your website and its HTML pages.
What is Open Graph?
The Open Graph protocol enables developers to integrate their pages into the social graph. These pages gain the functionality of other graph objects including profile links and stream updates for connected users. As an example, the following is the Open Graph protocol markup for text on Software Master Center:
What is Schema?
Schema.org is a set of extensible schemas that enables webmasters to embed structured data on their web pages for use by search engines.
The definition of Schema: “a diagrammatic presentation; broadly : a structured framework or plan.”
Why Open Graph and Schema Meta Data are important to your website
Your web pages have an underlying meaning that people understand when they read the web pages. But search engines have a limited understanding of what is being discussed on those pages. By adding additional tags to the HTML of your web pages—tags that say, “Hey search engine, this information describes this specific movie, or place, or person, or video”—you can help search engines and other applications better understand your content and display it in a useful, relevant way. Microdata is a set of tags, introduced with HTML5, that allows you to do this.
Basically, if you want your web pages to be read more effectively by search engines, adding this data to them will ameliorate your efforts towards that end.
The Scenario and Open Graph in Action
I had seen great pictures being published on a few Google+ pages I frequent and noticed that the posts consistently showed large, great images. I wanted that for my own Google+ postings and initially thought the person was uploading them single-handedly. After an investigation, it turned out I was wrong. Not only were the larger images in the Google+ postings being automatically pulled directly from the website articles, the publishing of the articles on Google+ was automated as well (more on that in an upcoming article). On the first point, I went to the website of the Google+ page with the automation, picked a random article and looked at the HTML of that page in Firefox using the Tools ->Web Developer -> Page Source. I was trying to discover the plugin that he was using for the automation (which I did – again, in an upcoming article) when I discovered this (I redacted the site’s name with [*]):
<meta property=”og:type” content=”article” />
<meta property=”og:title” content=”New image of The Rock as Hercules” />
<meta property=”og:url” content=”http://www.*******films.com/2014/05/06/new-image-of-the-rock-as-hercules/” />
<meta property=”og:description” content=”[ad#google-adsense-2] A new image for Dwayne Johnson's Hercules movie has been released. It appears the fantasy trope of impractical female armour is alive and well. Based on the graphic novel Herc…” />
<meta property=”article:published_time” content=”2014-05-06T13:50:41+00:00″ />
<meta property=”article:modified_time” content=”2014-05-06T15:30:21+00:00″ />
<meta property=”article:author” content=”http://www.*******films.com/author/*******films/” />
<meta property=”og:site_name” content=”*******Films” />
<meta property=”og:image” content=”http://www.*******films.com/wp-content/uploads/2014/05/Hercules1.jpg” />
The “og” stands for Open Graph. I figured this might be the key to posting bigger, more eye catching pictures per published article on Google+, Tumblr, and Facebook (and I was correct) so I went about looking for ways to implement Open Graph on my website.
The Long Way of Adding Open Graph and Schema Meta Data
I asked my web designer this Open Graph question a year and four months ago:
How could Open Graph be implemented on my site and how much would that cost?
Open Graph can be implemented by including a function on the site that will read info on the post and decide which image to present as meta tag, so Google can read this image instead of a random one. (4 hours)
Four hours of work at his rate is a lot of money plus at the time I didn’t fully understand how Open Graph would benefit my webpages so I declined. FYI: creating code or a function is the best way to implement meta data because it will be engrained in your website and will be there forever. In this article: A Professional Web Designer’s thoughts on Websites, SEO, SERP, HTML, and Search Engines, another web designer speaks about the search engine benefits of meta data.
The Short Way of Adding Open Graph and Schema Meta Data
The alternative to the long way is the short way, a plugin. Its quicker to implement and its free. The problem is that it is one more plugin on your website that has to load each and every time one of your webpages loads. The more plugins you use, the slower your website will eventually run.
Since cost was an issue and I wanted to immediately see if my hypothesis was correct, I found a plugin to do the job: Facebook Open Graph Meta Tags for WordPress. The Jetpack WordPress plugin adds Open Graph tags on other websites but because it did not immediately on mine, I went with the aforementioned plugin. The Facebook Open Graph Meta Tags for WordPress plugin also comes with the benefit of adding Schema meta tags to your website (I didn’t see the harm of having both meta tags active within the HTML of my webpages).
After activation of the Facebook Open Graph Meta Tags for WordPress plugin, Open Graph and Schema Meta tags immediately appeared on my webpages.
The Google +, Tumblr, Facebook Benefit
I ran a test by posting an article on Google+, Tumblr, and Facebook and voilà: bigger, better images on each of my social network postings from the articles on my website plus more text. Example:
After tests, I found that the large pictures and extra text still appeared whether or not Schema was shut on or off. Like I said though, since I didn’t read anything about Schema being harmful, I include those meta tags as well.
I would suggest using the Jetpack WordPress plugin first for a few days or a week to see if the Open Graph meta tags appear in the HTML of your web pages. If they don’t, use Facebook Open Graph Meta Tags for WordPress plugin. If you have the money, ask your web designer to implement Open Graph (and perhaps Schema) meta data within your webpages. They are beneficial.