Skip to content

The Open Graph Protocol, The Sematic Web, and so much more!

March 24, 2011

Introduction

This series is prepared for our team at Yehey.com but it can be used as a reference by anyone else.  I’m no expert in this 1subject so I welcome corrections from the RDF experts who happen to be reading this blog =)

To those who are still not familiar with RDFa (or the Resource Description Framework–in–attributes), it’s advantages in SEO and the movement towards Semantic Web or Web 3.0, now is the time to start learning!  If you want better exposure and better search engine results for your website, campaign or brand, you will want to learn this.

You can start by reviewing some sources for understanding Web 3.0 (or the Semantic Web) and RDFa:

  • Introduction to Semantic Web – it’s a good start for understanding the Semantic Web.  If you have only a few minutes to spare, you might want to start here because this presentation is only 6 minutes long.
  • Web 3.0 The Semantic Web – an excellent introduction to the Semantic Web and a deeper discussion on RDFa and other protocols.
  • RDFa Basics – this goes straight to the RDFa context and has the best explanation for designers and developers to quickly understand how to use RDFa.
  • RDFa Primer – comes straight from W3C and is also a good starting point for more comprehensive applications in RDFa.
  • RDFa (Info) – This site tracks RDFa specifications, implementations, and news of all sorts.

Note:  As much as I am a Semantic Web enthusiast I am also open to points against it, like this one raised by CJ and this one by Ian.  I believe it’s VERY important to know how the semantic web can be exploited for spamming or even identity assumption and misattribution.   We all have to be responsible with how we use powerful tools like RDFa, but this all boils down to the intent of the person implementing it.  I don’t think we should stop using it or else we will be left behind by people who do, but we should not exploit it.  Let’s be honest about what we post, respect one another, honor privacy, know how to protect yourself (or the customers using your website), and use Calais!

If you want to skip the primers and go straight to application, you should at least have knowledge of HTML/XHTML and CSS to be able to follow the examples in this page.

In this demonstration we will be using the Open Graph Protocol (a light-weight version of Semantic Web implemented using RDFa) in a sample document, and then later we will see how it is inspected and validated by og:it to see what data can be extracted from your page, and by Facebook’s URL Linter to see how Facebook sees the page.

Note: Later, you will also encounter terms like GRDDL or the Gleaning Resource Descriptions from Dialects of Languages.  We will also encounter Sindice, an RDF extractor, inspector and validator.  More on that in the <next part of this series>.

You might be wondering though…

Why start with the Open Graph Protocol?

(Or skip to Let’s Begin!)

  • The reason for this is that our projects at Yehey! involve a lot of Facebook Apps and Fan Pages that become extensions to websites and microsites, so there is definitely an immediate benefit to us.
  • In a nutshell, OGP is used to turn a web page into an object in the social graph, and here lies the benefit:  Once a page becomes an object in the social graph, users can establish connections to that page as they do with Facebook Pages.  Based on the structured data you provide via OGP, your pages show up richly across Facebook: in user profiles, within search results and in News Feeds.
  • I also find that OGP hits closer to home of what is already familiar with our team; the infamous Meta Tags and Metadata. Applying OGP in XHTML is very similar to declaring standard metadata in the head of an HTML/XHTML file, so it’s very easy to learn.
  • The benefit of OGP is really in maximizing Facebook; we want to take advantage of Facebook’s reach and network (not that Facebook will also greatly benefit from websites who use their protocol).  But keep in mind that OGP should be used with other protocols, like Dublin Core (DCMI), Friend of a Friend (FOAF), Semantically-Interlinked Online Communities (SIOC) and any other variety of protocols applicable to us.  The good news is that we can <extract RDF data from an OPG source page>, and hopefully that makes OGP data useful outside of Facebook (–this is just my perception though, I am not sure if Fabien thought of using it that way).
  • Lastly, I am hoping our knowledge of OGP encourages us to implement Google’s Social Graph and OpenLike (aside from other protocols).  I’ll have to admit, I love what OpenLike is trying to do here, and I also like the openness of Social Graph (supporting open standards like FOAF and XHTML Friends Network), and by no means would I want Yehey! to be stuck with just using OGP!  But learning it is the first step towards embracing RDFa-related protocols, and I don’t see any reason why we shouldn’t use OGP with OpenLike or Social Graph–unless there’s a technical issue I’m not aware of.

Digging Deeper into Open Graph & the Semantic Web

(Or skip to Let’s Begin!)

Social Graph Diagram c/o Salmon

Social Graph Diagram c/o Salmon

The Open Graph website already describes the purpose of OGP, but perhaps what needs a little more explanation is the term “social graph” which was invented by the guys from Facebook. The diagram on the left shows a network of people and how they are related to each other; maybe by family associations, work and school associations, or common likes and dislikes.  This is basically how the social graph is represented.

Now the Open Graph Protocol enables any web page to become a rich object in that social graph.  A web page talks about something, like a company or person, an event, a place, a product, a movie, an application, an article or topic, another web page… any real-world thing!  We can therefore make explicit (or implicit) relations and connections among things posted in the world wide web to profiles in Facebook.

Note: in RDFa, people, events, places, any object or entity, fall under “things

OGP is also very useful in Facebook SEO (–let anyone who abuses OPG by spamming or like-spamming grow hair in unwanted places!).  Although we don’t regard Facebook as a search-engine (and I also don’t think it will kill Google), it’s when your pages are liked and shared and appear meaningful in Facebook–plus when friends who trust the person that liked your page will be viewing it–that improves the quality of your reach.  Better exposure doesn’t just mean being seen more, but being seen by people who will want to know more about your page (or whatever it is you are offering) because it was introduced to them by their friends.  But that’s just my take on it.

Another advantage in the real world scenario is when OGP is used with other protocols.  I don’t know if Google already recognizes OGP, but annotating data is always a good thing.  When combined with other protocols, crawlers pick up useful information about a page, and search engines display it better in their search results, or are able to pull more meaningful results for searches.  What’s more important for the end user is how machines learn to make the connection of information scattered across the web and improve the overall quality of search and discovery.  This is part of the movement to make the web more meaningful, instead of just a bunch of web pages connected by links and keywords… thus, we have the emerging Semantic Web.

As the father of the world wide web, Tim Berners-Lee, puts it, “The Semantic Web is not a separate Web but an extension of the current one, in which information is given well-defined meaning, better enabling computers and people to work in cooperation.”  There are so many protocols and technologies being used today for this purpose, like the Dublin Core (dc), Friend of a Friend (foaf)and a lot more out there, but we start with the Open Graph Protocol in this tutorial.

Finally…

Let’s Begin!

In order to turn a page into a rich object, we need to insert additional meta tags and OGP properties in the head of an HTML/XHTML document.  It’s similar to the way we insert standard meta tags.

Take a look at the way we usually describe a web page using standard meta tags:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="description" content="This test is prepared by Monica
                                     ..." />
   <meta name="keywords" content="HTML, XHTML, CSS, Open Graph, RDFa" />
   <meta name="author" content="Monica Mae Climaco" />
   ...

1.  Changing the DOCTYPE Declaration

The first step in the conversion is to make an adjustment to the DOCTYPE declaration.  In the example above we have declared an XHTML document using:

<!--Old Declaration-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Now we’ll update that declaration to indicate that we are creating a document that complies to XHTML and RDFa using the following codes:

<!--New Declaration-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
     "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

2.  Updating the XMLNS Declaration

Next, notice the line containing the XML Name Space or (XMLNS) declaration.

Note: Although the World Wide Web Consortium (W3C) document allows you to declare namespaces on all tags, Microsoft Internet Explorer supports namespace declaration only on the html tag.  See MSDN Library: XMLNS Attribute.

<!--Old Declaration-->
<html xmlns="http://www.w3.org/1999/xhtml">

You will now need to insert another declaration for the namespace of OGP.  This is important for us to be able to use the properties of OGP in declaring metadata.

<!--New Declaration-->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://opengraphprotocol.org/schema/">

Later on when you start using other protocols like foaf or dc, you will be inserting their definitions in the same way.  For example, if you were to use og and foaf together, you will have to declare:

<!--SAMPLE using FOAF and OGP-->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://opengraphprotocol.org/schema/"
      xmlns:foaf="http://xmlns.com/foaf/0.1/">

It is not uncommon to find sites using over five protocols, in fact some declare it by default!

3.  Updating the Metadata

Going back to our example, we’ll now have to update our meta tags and data using OGP attributes.  Originally we had:

<head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta name="description" content="This test is prepared by Monica
                                        ..." />
      <meta name="keywords" content="HTML, XHTML, CSS, Open Graph, RDFa" />
      <meta name="author" content="Monica Mae Climaco" />
      ...

It might be alright for us to keep those existing metadata, but to implement OGP there are 4 required properties you need include:

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Begin OG Properties-->
     <meta property="og:title" content="Test Document for Open Graph (RDFa)" />
          <!--og:title is the title of your object as it should appear within the graph.-->
     <meta property="og:type" content="article" />
          <!--og:type is the type of your object. To see a complete list of og:types,
              see http://ogp.me/#types -->
     <meta property="og:url"
          content="http://project-beta.teamyehey.com/monica/experiment-cufon/OG_Sample.html" />
          <!--og:url is the canonical URL of your object that will be used 
              as its permanent ID in the graph. In this example, it is the link
              to my sample document.-->
     <meta property="og:image"
          content="http://opengraphprotocol.org/open_graph_protocol_logo.png" />
          <!--og:image - An image URL which should represent your object within the graph. 
              The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. 
              FB supports PNG, JPEG and GIF formats. You may include multiple og:image tags 
              to associate multiple images with your page.-->
      ...

Facebook also recommends we use more properties to describe our object.  Below is another example:

     ...
     <meta property="og:description" name="description"
          content="This test is prepared by Monica.  The intention is to jumpstart the implementation
                   of RDFa in all our projects.  We start with the Open Graph protocol because it is
                   used on Facebook to enable any web page to have the same functionality as a
                   Facebook Page. In this example, we define a (pretend) article object using OGP."/>
     <meta property="og:site_name" content="This Is Where The Website Name Will Go (Not URL)" />
     <meta property="og:latitude" content="14.585774" />
     <meta property="og:longitude" content="121.060131" />
          <!--You can use og:latitude and og:longitude to pinpoint the object's exact location. -->
     <meta property="og:street-address" content="45 North Town" />
     <meta property="og:locality" content="Pasig City" />
     <meta property="og:region" content="Metro Manila" />
     <meta property="og:postal-code" content="1100" />
     <meta property="og:country-name" content="Philippines" />
     <meta property="og:email" content="monica@samplemail.com" />
     <meta property="og:phone_number" content="+6327412456" />
     <meta property="og:fax_number" content="+6327412458" />
          <!--Defined the address and contact information if applicable.-->
     <meta property="og:upc" content="SMA1230OPHJ" />
          <!--UPC is a 12-digit barcode that uniquely identifies a product or service.-->
     <meta property="og:isbn" content="1234567890123" />
          <!--For products which have a UPC code or ISBN number, you can specify them using the og:upc 
              and og:isbn properties. These properties help to make more concrete connections 
              between graphs.-->
     ...

4.  Bringing the codes together, we have:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
      "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://opengraphprotocol.org/schema/">
<head>
     <base href="http://project-beta.teamyehey.com/monica/experiment-cufon/OG_Sample.html" />
          <!-- <base /> Defines a default address or a default target for all links on a page. -->
     <title>Test Document for Open Graph (RDFa)</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Begin OG Properties-->
     <meta property="og:title" content="Test Document for Open Graph (RDFa)" />
     <meta property="og:type" content="article" />
     <meta property="og:url"
          content="http://project-beta.teamyehey.com/monica/experiment-cufon/OG_Sample.html" />
     <meta property="og:image"
          content="http://opengraphprotocol.org/open_graph_protocol_logo.png" />
     <meta property="og:description" name="description"
          content="This test is prepared by Monica.  The intention is to jumpstart the implementation
                   of RDFa in all our projects.  We start with the Open Graph protocol because it is
                   used on Facebook to enable any web page to have the same functionality as a
                   Facebook Page. In this example, we define a (pretend) article object using OGP."/>
     <meta property="og:site_name" content="This Is Where The Website Name Will Go (Not URL)" />
     <meta property="og:latitude" content="14.585774" />
     <meta property="og:longitude" content="121.060131" />
     <meta property="og:street-address" content="45 North Town" />
     <meta property="og:locality" content="Pasig City" />
     <meta property="og:region" content="Metro Manila" />
     <meta property="og:postal-code" content="1100" />
     <meta property="og:country-name" content="Philippines" />
     <meta property="og:email" content="monica@samplemail.com" />
     <meta property="og:phone_number" content="+6327412456" />
     <meta property="og:fax_number" content="+6327412458" />
     <meta property="og:upc" content="SMA1230OPHJ" />
     <meta property="og:isbn" content="1234567890123" />
<!--End OG Properties-->
     <meta name="keywords" content="HTML, XHTML, CSS, Open Graph, RDFa" />
     <meta name="author" content="Monica Mae Climaco" />
</head>
...
</html>

Note: There are also properties for audio and video objects found in the OGP website.  Please take the time to review them.

And there you have it, the basic structure of a page implementing the Open Graph Protocol! Already you have made available rich information about an object that can be exposed by the og:it inspector or extracted by Facebook’s URL Linter.

In order for og:it or URL Linter to work, however, you’ll need to make sure your sample page is already published on the internet.  This is why I already uploaded my sample document and have declared this metadata in my page:

     ...
     <meta property="og:url"
          content="http://project-beta.teamyehey.com/monica/experiment-cufon/OG_Sample.html" />
     ...

To see the results from og:it, please click this link:

http://ogit.heroku.com/inspect?url=http%3A%2F%2Fproject-beta.teamyehey.com%2Fmonica%2Fexperiment-cufon%2FOG_Sample.html

To see how Facebook sees the page, please click this link:

http://developers.facebook.com/tools/lint/?url=http%3A%2F%2Fproject-beta.teamyehey.com%2Fmonica%2Fexperiment-cufon%2FOG_Sample.html

Since the uploaded sample page already contains the complete source code for this tutorial, you will find that the URL Linter has picked up an additional detail that has not been added in our metadata so far:

URL Linter picks up additional property

Even if a web page using OPG is valid without the “Admins” attribute, this is still an important detail in order to associate a web page to a Facebook User Account.  To include that information in the page, we will need to add another namespace declaration as seen in the next step.

5.  Enabling Page Administration through fb:admins

Go back to the XMLNS declarations and add this line:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://opengraphprotocol.org/schema/"
      xmlns:fb="http://www.facebook.com/2008/fbml">

Next, insert this metadata with the rest of them:

     <meta property="fb:admins" content="100001416277566"/>
           <!--The Sample FB ID I associated with this page so that I can
               get Insights from Facebook. But this will only work if this 
               page has a domain.-->

Note: It is also possible to associate your page with a Facebook App using fb:app_id and supplying the Application ID.

Note: You may also associate to more than one account, example (the second ID is a pretend only)…

     <meta property="fb:admins" content="100001416277566, 100001548762355"/>

And that’s it!  Facebook will be able to include the data collected from users who are liking and commenting on this web page when you view Insights.

Note: There is an extra step you’ll need to do in Facebook Insights in order for the statistics to appear in your dashboard.  Since I don’t have a domain that points to my sample page I am unable to make it work.  But assuming you have a domain for your page, this step should work for you:

Adding the domain to Facebook Insights

Adding the domain to Facebook Insights

What’s missing now is adding the “Like” button to the web page, up next.

6.  Adding the “Like” button

The URL Linter serves another purpose, and that is supply the “Like button” code after you input and lint your web page’s URL.  While you are reviewing the lint results of the sample page in URL Linter, scroll down to the bottom of the page:

Getting the "Like" button codes from URL Linter

Note: Since I was logged in to Facebook while I viewed this page and I have already liked this page before, I saw an “Unlike” button and the names of others who have liked the page.  Otherwise you will see something like this:

Sample Like Button

Copy the “<iframe…” source below the like button and insert it within the <body></body> tags of the web page.  In my current example, I added it just above the </body> tag.

<body>
     ...
     http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fproject-beta.teamyehey.com%2Fmonica%2Fexperiment-cufon%2FOG_Sample.html
</body>

And that’s it!  Your page can be “liked” by anyone in Facebook!  When people start to like your page, not only is it posted in their walls, but people searching for the same thing within Facebook will also see something like this:

Searching for the web page within Facebook

Searching for the web page within Facebook

And if you search for more results…

My Sample Page in the search results page

My Sample Page in the search results page

7.  Other discoveries…

I was curious to check what Facebook would do to the other data in properties like “og:email” or “og:street-address”.  I tried searching in Facebook once more, but this time I entered “monica@samplemail.com” taken from the “og:email” declaration.  Unfortunately it got me this…

Facebook Search unable to find data from other og:<properties>

Facebook Search unable to find data from other og:<properties>

So now I’m wondering how Facebook uses the other data, aside from storing it for market research.  Will we see their benefits when people use browsers like RockMelt?  Nonetheless, I think eventually we will find a lot more improvements in Facebook’s search facility, and I think there is a greater purpose for all the data we expose in OGP that could be used outside of Facebook.  This is why <next time> I’ll show how I incorporated Fabien’s freeware GRDDL profile which allows RDF data to be extracted from an OGP source.  I’ll also show how we can use FOAF in our sample document, and learn more about it’s purpose and attributes.

Before we go…

Earlier in this blog I talked about OpenLike.  It’s widget looks like this:

OpenLike is more open!

OpenLike is more open!

OpenLike brings together other networks where you can “like” a page or an object.  Wouldn’t it be neat to use OGP and this widget together?  I’m just not sure if it will work the same way when you “like” the page using OpenLike or the widget that comes straight from Facebook.  If anyone can share anything about this, please do =)

If you also want share your thoughts about the Open Graph Protocol and how it fits in the semantic web, or if you need to correct me in my understanding of the semantic web and how RDFa protocols are used, please leave a message.  I don’t claim to be an expert and I may just be trying to make sense of everything I’m learning about RDFa and Web 3.0, so a little guidance from the semantics experts is a treat for me! =)


Additional Read:  (Warning!  It’s a lot of reading on related issues in OGP but it isn’t required to complete this tutorial.  But if you’re interested, you are welcome to read.)

1. Subject: There are many classifications of “subjects” which were realized through Subject Analysis.  Subject analysis successfully manoeuvres between the delicate balance between what the author perceives the idea to be and what the audience believes it to be, allowing for effective classification and cataloguing of information.  To fully understand and appreciate the potential of the widespread adoption of the OGP, it is pertinent to first anchor the problems inherent with subject analysis in its historical context, including the debate surrounding the utility and function of subject analysis. Central to this debate is the fact that one cannot expect anyone to perform subject analysis from an objective standpoint, as the bias of an individual towards a subject may overrule the original author’s intentions. In grappling with these issues, W. J. Hutchins (1975) identified an inherent problem with the linguistic use of the process itself, judging the word ‘subject’ to be too confining to adequately give credit to the original ideas of the author (p. 115). Instead, Hutchins suggested that the term ‘aboutness’ be used to allow the indexer a differentiated approach to the complex task of analysis. Hutchins drew the word ‘aboutness’ from R.A. Fairthorne (1969) who used the terms ‘intentional aboutness’ and ‘extentional aboutness’.   For more information, please read: Defining ‘Intentional Aboutness’ in Web Documents Using the Open Graph Protocol.

Advertisements
One Comment
  1. The only way to stop the domino effect on website security is
    for businesses to stop relying solely on passwords
    for online authentication. It’s hard to trust nowadays, where the internet is lurking with thousands of malicious sites, scammers and hackers. ) Are there data security regulations with which the company must comply.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: