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:
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:
- the Open Graph Protocol website
- the Facebook documentation on its implementation of the standard
Other interesting articles are:
- Open Graph protocol 1.1 Niall Kennedy’s Weblog
- Understanding the Open Graph Protocol FactoryCity
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:
- PHP: Open Graph Protocol helper for PHP
- Python: PyOpenGraph 0.2
- Java: OpenGraph for Java
- Ruby: A Ruby wrapper for the Open Graph protocol
Last but not least, the plugin to implement the Open Graph Protocol in WordPress:
