Overview

Integrate OpenGraphProtocol meta tags in your Django project

The setup

First install the django_ogp app using pip and add it to your INSTALLED_APPS. Then load {% ogp_tags %} in your pages, you'll have access to 2 tags:

  • {% ogp_namespace %} which allows you to populate your html tag with the right namespace attribute
  • {% render_ogp item %} which allows you to render meta tags related to your item

For a concrete example:

{% load ogp_tags %}
<html {% ogp_namespace %}>
<head>
  <title>My page</title>
  {% render_ogp item %}
</head>
<body>foo</body>
</html>

Will produce:

<html xmlns:og="http://ogp.me/ns#">
<head>
  <title>My page</title>
  <meta property="og:title" content="The Rock" />
  <meta property="og:type" content="movie" />
  <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
  <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
</head>
<body>foo</body>
</html>

Now you probably wonder where all this content comes from. Given that the item object is an instance of a class (let's say a model), you have to put an ogp_enabled attribute on it and define methods starting with ogp_*:

class MyModel(models.Model):
    # Fields
    ogp_enabled = True

    def ogp_title(self):
          return 'The Rock'

    def ogp_type(self):
        return 'movie'

    def ogp_url(self):
        return 'http://www.imdb.com/title/tt0117500/'

    def ogp_image(self):
        return 'http://ia.media-imdb.com/images/rock.jpg'

Those 4 OGP properties (title, type, url and image) are required but you can add additionnal infos as suggested on the dedicated website:

class MyCompleteModel(MyModel):
    def ogp_latitude(self):
        return 37.416343

    def ogp_longitude(self):
        return -122.153013

    def ogp_video_width(self):
      return ("video:width", 1024)

    def ogp_video_height(self):
        return ("video:height", 800)

    def ogp_site_name(self):
        return "My Website"

    def ogp_postal_code(self):
        return ("postal-code", 13200)

Will produce:

<html xmlns:og="http://ogp.me/ns#">
<head>
  <title>My page</title>
  <meta property="og:title" content="The Rock" />
  <meta property="og:type" content="movie" />
  <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
  <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

  <meta property="og:latitude" content="37.416343" />
  <meta property="og:longitude" content="-122.153013" />
  <meta property="og:video:height" content="640" />
  <meta property="og:video:width" content="385" />
  <meta property="og:site_name" content="My Website" />
  <meta property="og:postal-code" content="13200" />
</head>
<body>foo</body>
</html>

Note that due to inconsistencies in OGP's properties' names, we can't guess the property from the method name so you can return a tuple with a string as the first element which will be used for the property. Otherwise, the name of the method (minus ogp_ will be used).

Pro tip, you can probably reuse existing methods in your models:

class MyExistingModel(models.Model):
    def __unicode__(self):
        return u'%(first_name)s %(last_name)s' % self.__dict__
    ogp_title = __unicode__

    @models.permalink
    def get_absolute_url(self):
        return ('app:resource', [self.id,])

    def ogp_url(self):
        return settings.BASE_URL + self.get_absolute_url()

    def ogp_image(self):
        if not self.image:
            return None  # will not render the meta tag in the template

And so on.

The discussion

Suggestions? Let's discuss in the Issues tab.

Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.