Bitbucket is a code hosting site with unlimited public and private repositories. We're also free for small teams!

Close

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.

Recent activity

David Larlet

Commits by David Larlet were pushed to liberation/django-ogp

2114506 - Due to inconsistencies in OGP's properties' names, we can't guess the property from the method name, ogp_'s methods allow you to return a tuple with ...
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.