Getting Started

Create a connection

Sign in to OpenGraph+
Go to your website’s Meta Tags page
Create a new connection and copy your connection URL

Your connection URL looks like https://$OGPLUS_KEY.ogplus.net.

Find your base template

Django uses template inheritance. Your base template is typically templates/base.html. All other templates extend it with {% extends "base.html" %}.

Add Open Graph meta tags

Add the following meta tags to your base template’s <head>. These control how your pages appear when shared on Twitter, Slack, LinkedIn, and other platforms.

<!-- templates/base.html -->
<html>
  <head>
    <meta property="og:title" content="{% block og_title %}My Site{% endblock %}">
    <meta property="og:description" content="{% block og_description %}Welcome to my site{% endblock %}">
    <meta property="og:url" content="{{ request.build_absolute_uri }}">
    <meta property="og:site_name" content="My Site">
    <meta property="og:type" content="{% block og_type %}website{% endblock %}">
    <meta property="og:image" content="https://$OGPLUS_KEY.ogplus.net{{ request.path }}">
    <meta name="twitter:card" content="summary_large_image">
  </head>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>

Replace https://$OGPLUS_KEY.ogplus.net with your connection URL, and "My Site" with your actual site name.

What each tag does

Tag	Purpose
`og:title`	The title shown in the link preview
`og:description`	The description shown below the title
`og:url`	The canonical URL of the page
`og:site_name`	Your website’s name
`og:type`	Content type (`website`, `article`, `product`)
`og:image`	The social card image (powered by OpenGraph+)
`twitter:card`	Tells Twitter to show a large image card

Dynamic tags from views

Override the blocks in child templates to set page-specific values from your model data:

Blog posts

<!-- templates/blog/post_detail.html -->
{% extends "base.html" %}

{% block og_title %}{{ post.title }}{% endblock %}
{% block og_description %}{{ post.excerpt }}{% endblock %}
{% block og_type %}article{% endblock %}

{% block content %}
  <h1>{{ post.title }}</h1>
  <p>{{ post.body }}</p>
{% endblock %}

Products

<!-- templates/products/product_detail.html -->
{% extends "base.html" %}

{% block og_title %}{{ product.name }}{% endblock %}
{% block og_description %}{{ product.price }} — {{ product.description }}{% endblock %}
{% block og_type %}product{% endblock %}

{% block content %}
  <h1>{{ product.name }}</h1>
{% endblock %}

Enable the request context processor

request.path and request.build_absolute_uri require the django.template.context_processors.request context processor. This is enabled by default in new Django projects. If it’s not present, add it:

# settings.py
TEMPLATES = [
    {
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.request',
                # ... other processors
            ],
        },
    },
]

Verify

Start your development server and view the page source. Check that all og: meta tags are present with the correct values.

Open the preview tool in your OpenGraph+ dashboard and paste a URL from your site to see the social card image.