Open Graph Protocol, Facebook and the Semantic Web

0
399

The Semantic Web is a topic that has been dealt with for a very long time, but in practice, too little has been done to make this idea really take hold. The king of social networks, Facebook, has moved for some years in this situation by implementing the so-called Open Graph Protocol to overcome some shortcomings still too evident in the world of the Web.

We have already dealt with the protocol analyzing how to integrate Facebook into our website. Here we will see more closely and more in detail its characteristics.

This protocol, which reflects the specific RDF (Resource Description Framework) as it exploits the meta-tags in the page, allows each page on the Internet to be represented in the form of an object, characterized by some key properties, and to be included in what is called a “social graph” or a sort of mapping of all Internet pages and of what they represent and contain.

The Open Graph Protocol is highly appreciated because, despite being created by a worldwide circulation platform, it does not preclude any “private” use even from other portals or applications in general that can obtain information from each web page without regard to Facebook. In fact, there are other platforms that use the Open Graph Protocol to create their own internal “social graph” (for example, LinkedIn).

Implement open-node nodes

One of the key aspects towards which Facebook has been oriented has been the ease of implementation. To configure a web page as an object that can become part of a larger “social graph”, it is necessary to set a series of meta tags inside the <head>page tag with the information required by the specific tag.

The necessary metadata can be grouped into different sub-categories:

  • basic meta-data
  • optional meta-data
  • structured meta-data

Basic metadata

They are mandatory metadata for any type of object and are:

Meta-data Description
og: title represents the title of our object in the “social graph” (attention is in no way connected to¬†<title>the page)
og: type represents the type of object
og: image url of an image that represents the object
og: url url that identifies the object and represents the unique id that the object will have

 

An example of a basic implementation of the Open Graph Protocol of this article is as follows:

<pre class=”brush: php; html-script: true”>
<meta property=”og:title” content=”Open Graph Protocol, Facebook and the Semantic Web” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=”https://www.macroprogramming.com/open-graph-protocol-facebook-and-the-semantic-web/”/>
<meta property=”og:image” content=”https://www.macroprogramming.com/articolo_42dbbb815bdbc3b3.gif”/>
</pre>

Optional meta-data

These are meta-data that further enrich the page in the “social graph” but are not required by any parser:

Meta-data Description
og: description represents a brief description of the object
og: determiner the article that appears before the object’s title in a sentence (unfortunately now only accepts a, an, the, auto)
og: Local the local reference for the Open Graph tags
og: Local: alternating any other locales on the page
og: site_name the name of the website that encapsulates the Open Graph object
og: audio URL of an audio file that represents the object
og: video URL of a video file that represents the object

 

Always taking considering this article (as you can see not all have been implemented):

<pre class=”brush: php; html-script: true”>
<meta property=”og:site_name” content=”Macro Programming” />
<meta property=”og:description” content=”Open Graph Protocol, Facebook and the Semantic Web” />
</pre>

Optional meta-data

These are meta-data that further enrich the page in the “social graph” but are not required by any parser:

Structured meta-data

Some properties related to multimedia attachments may have additional meta-data that further specify the object.

Images

With regard to the associated image, the following properties can be implemented:

Property Description
og: image: SECURE_URL represents an alternative url to the resource in HTTPS
og: image: type represents the mime-type of the image
og: image: width represents the width in pixels of the image
og: image: height represents the height in pixels of the image

 

Video

With regard to any associated video content, the following properties can be implemented:

Property Description
og: video: SECURE_URL represents an alternative url to the resource in HTTPS
og: video: type represents the mime-type of the video
og: video: width represents the width in pixels of the video
of: Video: height represents the height in pixels of the video

 

Audio

With regard to any associated audio type content, the following properties can be implemented:

Property Description
og: Audio: SECURE_URL represents an alternative url to the resource in HTTPS
og: Audio: type represents the mime-type of the audio file

 

A site dedicated to videos like Vimeo implements, for example, the following meta-tags:

<pre class=”brush: php; html-script: true”>
<meta property=”og:video:type” content=”application/x-shockwave-flash” />
<meta property=”og:video:width” content=”640″ />
<meta property=”og:video:height” content=”472″ />
</pre>

Facebook Open Graph, meta-data og: type

The meta-data og: type and Facebook

One of the metadata considered mandatory is og: type . It represents the type of object that is represented on the page within the vast set defined as “social graph”. Facebook, intended as a consumer of pages that implement the Open Graph Protocol , supports a large but limited set of possible types.

This is a constraint of the Facebook platform and not the protocol itself that potentially provides infinite object types. The list of types accepted by Facebook is available here.

Extend the Open Graph Protocol

Like all the latest protocols, the Open Graph Protocol is also extensible. This means that it is not only possible to define new types, but also new properties that each object can possess. The properties seen so far use the namespace og that nothing else is an acronym for Open Graph.

In addition to these properties, it is possible to define new ones in a dictionary that is already present or belongs to a new dictionary. Dictionaries can also be nested: for example, there is a dictionary music which in turn implements music:albumand music:song.

Some already implemented dictionaries can be analyzed, using JSON descriptors in the JSON format on the official website of the Open Graph protocol. Here are some links:

Support tools, resources, and libraries

Among all the web tools available, the best remains, without doubt, the Facebook Debugger that allows in real time to view the meta-data collected from a particular web page. Here is the example starting from the Vimeo page previously analyzed:

Visulizing the meta data with the Facebook Debugger
Visualizing the metadata with the Facebook Debugger

Another similar tool is OpenGraph.in which offers a real-time web service for parsing Open Graph meta-data using the JSON format. We can have the meta-data extracted in an address like this.

Other useful links

Among the main resources we point out:

Other interesting articles are:

With regard to libraries, finally, it must be said that implementations exist at both the generation and interpretation levels of the Open Graph Protocol for all the main languages. Here are the main libraries organized by language:

Last but not least, the plugin to implement the Open Graph Protocol in WordPress:

LEAVE A REPLY

Please enter your comment!
Please enter your name here