Semantic Web for Facebook

Programming, Ontology, Python

I’m going to assume you have some back-end storing your blog posts with all the data fields you’ll need that you pass through to your template. This would be what you pass in to your template already to populate it with the title, date, content etc.

Facebook look for Open Graph data encoded in RDFa, which means the data will be added to the HTML content on the normal page. You can add the additional tag attributes to the appropriate elements in the body of your HTML, however Open Graph recommend using meta tags in the head. The advantage of this approach is that they are easier for you to read and update.

This template is for my Open Graph meta data. You can create a file in your apps templates: templates/includes/ogmeta.html, paste the code in there and adjust as needed. This template is intended for use in a blog, you can check the terms you wish to use and adapt it from the documentation at Open Graph.

<!-- Open Graph Data -->
<meta property="og:locale" content="en_GB" />
<meta property="og:site_name" content="Paul Brown Magic" />
<meta property="og:url" content="{{ post.path }}" />
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ post.title }}" />
<meta property="og:description" content="{{ post.description }}" />
<meta property="og:image" content="{{ post.image }}" />
<meta property="og:image:width" content="1600" />
<meta property="og:image:height" content="900" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="{{ post.title }}" />
<meta property="oga:published_time" content="{{ post.date }}" />
<meta property="oga:modified_time" content="{{ post.date_modified }}" />
<meta property="oga:author" content="Paul Brown" />
<meta property="oga:section" content="{{ post.subject }}" />
{% for tag in tags -%}
<meta property="oga:tag" content="{{ tag.label }}" />
{% endfor %}

RDFa uses namespace prefixes, which is what lets us write og:title instead of the full URI that identifies an Open Graph title, which is http://ogp.me/ns#title. We like these prefixes because they’re so much nicer to read. However, that does mean you need to declare the prefix, we’ll do that in templates/base.html, which is what you will render or extend.

<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#
                        oga: http://ogp.me/ns/article#">
  <head>
    <meta charset="utf-8">

     {% include "includes/ogmeta.html" %}

    <title>{% block title %}{% endblock title %}</title>
  </head>
  <body>
  </body>
</html>

If you’re familiar with Semantic Web it seems strange that Open Graph have created new identities for existing terms, like dc:title. If you read their design documents you’ll see they tried that, but wanted to make it as simple as possible for people to use. You can pretty much copy and paste from this blog post and make it easy for Facebook to parse your blog or webpage without needing to become an expert in all things Semantic Web.

Until next time, happy coding. Paul

*[URI]: Uniform Resource Identifier: an identity.