Adding Meta Tags to Django HTML Templates

Oct. 6, 2020, 4:21 p.m.

Django Python SEO · 10 min read

Adding Meta Tags to Django HTML Templates

Last Modified: Oct. 13, 2020, 10:40 a.m.

What are meta tags?

Meta tags are HTML <meta> elements that contain metadata or data about the web page.

This data includes information such as the page's description and viewpoint.

 

How do meta tags look?

Description meta-tag example

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="description" content="This page is about...">
  </head>

</html>

All meta tags are located in the <head> element and do not have closing HTML tags. 

Most meta tags follow the format of having a name attribute value followed by a content attribute value. 

 

Why are meta tags important?

Meta tags help browsers and search engines determine the main purpose of the webpage and how it should display in search engine results.

They also provide the information required to display the page as a link on social media platforms. 

For example, the title and description text seen on Google search results are the same title and text provided in the meta tags. 

Google search results for ordinarycoder.com

Google Developer Tools


 

Basis meta tags

Every HTML template should have a <head> element with these basic meta tags.

 

Character set meta tag

Character set meta tag in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta charset="utf-8">
  </head>

</html>

The character set meta tag is one of many meta tags used in the head element.

This specific meta tag determines the character set of the HTML document.

The character set specified is utf-8, the preferred encoding for web pages, and allows most characters, punctuation marks, and symbols to render properly on the web page.

 

Viewpoint meta tag

Viewpoint meta tag in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

</html>

The viewpoint meta tag provides the browser with instructions on resizing the web page content for different sized devices.

The width is set to mimic the width of the screen while the initial-scale sets the zoom level of the page.

This is an important meta tag for mobile and device compatibility.

 

Title element

Title element in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <title>Title of Page</title>
  </head>

</html>

Although not a meta tag, the <title> element is often grouped with meta tags because it is located in the <head> element and provides information to browsers and social media platforms. 

This title is also what appears on the browser tab when the user is on the site.

 

 

Description meta-tag

Description meta-tag in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="description" content="This article is about...">
  </head>

</html>

Next is the description meta tag. The description meta-tag provides a descriptive summary of the web page.

It is a small snippet of text that is only shown in the search engine results and social media posts. It does not render on the page.

The description should be written in complete phrases or sentences to help explain the content on the page.

 

 

Example with all basic meta tags

All basic meta tags in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of Page</title>
    <meta name="description" content="This page is about...">
  </head>

</html>

Above is a basic template that includes all of the basic meta tags needed in a <head> element.

Again, these should be on every HTML page and adequately name and describe the web page's content.

 


 

How to use social media meta tags

Social media sites have a different set of meta tags that they use to display your website links.

The Open Graph protocol meta tags turn web pages into an object in a social graph. These tags make it so the web page acts like any other object on that particular social media platform. 

Open Graph protocol cover most social media platforms including Facebook, Twitter, and Pinterest.

Keep in mind social media meta tags are typically only added to the articles or product pages that will be shared on a social media site.

 

Description meta-tag

Description meta-tag in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <title>Title of Article</title>
  </head>

</html>

The title element will stay the same. 

 

Open Graph title meta tag

Open Graph title meta tag in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta property="og:title" content="Title of Article">
  </head>

</html>

The property attribute value og:title works just like the regular title element but it is good practice to include both.

 

Open Graph description meta tag

Open Graph description meta tag in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="description" property="og:description" content="This article is about...">
  </head>

</html>

The property attribute value og:description just needs to be added to the existing description meta tag.

 

Open Graph type meta tag

Open Graph type meta tag in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta property="og:type" content="article" >
  </head>

</html>

The property og:type describes the type of link you're sharing. The common types are website, article, blog, company, and image.

 

Open Graph image meta tag

Open Graph image meta tag in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta property="og:image" content="https://...image.jpg">
  </head>

</html>

The property attribute value og:image allows social media platforms to easily locate the URL of the article/product image provided in the content attribute value. 

 

Open Graph image alt meta tag

Open Graph image alt meta tag in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta property="og:image:alt" content="This is a description of the image.">
  </head>

</html>

The property attribute value og:image:url allows the visually impaired to have a description of the image used in the post.

 

Open Graph URL meta tag

Open Graph URL meta tag in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta property="og:url" content="https://.../article-slug">
  </head>

</html>

The property attribute value og:url is the URL location of the article/product on your website. 

 

Twitter card meta tag

Twitter card meta tag in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="twitter:card" value="summary">
  </head>

</html>

The Twitter card meta tag determines the type of card Twitter uses to display your link. The value can either be "summary", "summary_large_image", "app", or "player"

 

Example with all OG meta tags

All of the basic OG meta tags in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of Article</title>
    <meta property="og:title" content="Title of Article">
    <meta name="description" property="og:description" content="This article is about...">
    <meta property="og:type" content="article" >    
    <meta property="og:image" content="https://...image.jpg">
    <meta property="og:image:alt" content="A picture of the mountains.">
    <meta property="og:url" content="This is a description of the image.">
    <meta name="twitter:card" value="summary">
  </head>

</html>

This is how all of the basic OG meta tags and the one required Twitter meta tag should look in the head element. 

 


 

Meta tags for Twitter

If you are looking to specifically add more Twitter meta tags than just the Twitter Card type, add the Twitter-specific meta tags below.

These meta tags are found on the Twitter Developer Documentation.

 

Twitter card meta tag

Twitter card meta tag in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="twitter:card" content="summary_large_image">
  </head>

</html>

The Twitter summary still needs to be added. 

 

Twitter site meta tag

Twitter site meta tag in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="twitter:site" content="@publisher_handle">
  </head>

</html>

Then you can add the Twitter site meta tag. This is the Twitter handle of the website. 

 

Twitter creator meta tag

Twitter creator meta tag in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="twitter:creator" content="@author_handle">
  </head>

</html>

You can also choose to add the username of the content creator or author with the Twitter creator meta tag. 

 

Twitter title meta tag

Twitter title meta tag in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="twitter:title" content="Title of Article">
  </head>

</html>

The twitter:title name attribute value can be added next. This is just the title of the page.

 

Twitter description meta tag

Twitter description meta tag in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="twitter:description" content="This article is about...">
  </head>

</html>

The twitter:description name attribute value works just like the Open Graph description meta tag.

 

Twitter image meta tag

Twitter image meta tag in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="twitter:image" content="https://...image.jpg">
  </head>

</html>

The twitter:image name attribute value is added with the image URL as the content attribute value. 

 

Twitter image alt meta tag

Twitter image alt meta tag in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="twitter:image:alt" content="This is a description of the image.">
  </head>

</html>

Lastly, it is a good idea to add the twitter:image:alt name attribute value to a meta tag given it helps convey the nature of the image to the visually impaired. 

 

Example with all Twitter meta tags

All of the basic Twitter meta tags in the head element

<!doctype html>
<html lang="en">
    
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of Article</title>
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@publisher_handle">
    <meta name="twitter:creator" content="@author_handle">
    <meta name="twitter:title" content="Title of Article">
    <meta name="twitter:description" content="This article is about...">
    <meta name="twitter:image" content="https://...image.jpg">
    <meta name="twitter:image:alt" content="This is a description of the image.">
  </head>

</html>

This is how all of the Twitter meta tags should look in the head element.

 


 

How to add meta tags to a Django HTML template

Two of the many benefits of using the Django Web Framework are the extends tag and the built-in models.

The Django extends tag can be used to extend the <head> element to multiple HTML templates while Django models allow the developer to use the same HTML template for multiple model objects.

This means you can use the same base <head> element code for all article pages on your site using the same few lines of code.

 

Before you continue...

If you are unsure how to use Django extends, check out the article How to use the Extends and Include Django Template Tags.

If need to learn how to use one HTML template for multiple model objects, check out Django II: Creating a blog in the course Building a Django Web App.

Once you have implemented the Django extends template tag and created a Django model for your article/products page, you can then use the two together to dynamically load in your meta tags.

 

Django meta tags

Meta tags using Django model object fields

<!doctype html>
<html lang="en">
    
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{object.title}}</title>
    <meta property="og:title" content="{{object.title}}">
    <meta name="description" property="og:description" content="{{object.content|striptags|truncatewords:20}}">
    <meta property="og:image" content="{{object.image_field.url}}">
    <meta property="og:image:alt" content="{{object.image_alt}}">
    <meta property="og:url" content="https://www.website.com/{{object.slug}}">
    <meta name="twitter:card" value="summary">
  </head>
  <body>

    {% block content %}

    {% endblock %} 

  </body>

</html>

Add each model object field to the appropriate meta tag. These model object fields are added just like they would be on the article.html template given that the header.html is extended to that HTML template. 

The only thing to be aware of is how to load in the meta tag description based on the article content.

You will need to add two built-in filters: |striptags and |truncatewords.

The striptags filter strips all HTML tags from the text while truncatewords limits the number of words in the string.

With those added, the descriptions presented on social media platforms and web browsers will be plain text and only the first few lines of the article. 

Again, the code above can only be implemented if the Django extends template tag is used along with Django models. 

 

Accounting for the other templates

You will need to add if and else statements to the head element given that every Django HTML template can extend the same header.html but not every template loads in a model object. 

 

For example, think about the homepage template in a Django project.

The homepage probably loads in the same header.html as the article.html file but it is not an article so none of the meta tags we added above will work.

 

Add an if/else condition to the head element

Meta tags using Django model object fields

<!doctype html>
<html lang="en">
    
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {% if object.slug in request.path %}
    <title>{{object.title}}</title>
    <meta property="og:title" content="{{object.title}}">
    <meta name="description" property="og:description" content="{{object.content|striptags|truncatewords:20}}">
    <meta property="og:image" content="{{object.image_field.url}}">
    <meta property="og:image:alt" content="{{object.image_alt}}">
    <meta property="og:url" content="https://www.website.com/{{object.slug}}">
    <meta name="twitter:card" value="summary">

    {% elif request.path == '/' %}
    <title>Homepage Title</title>
    <meta name="description" content="This is the description for the homepage.">

    {% else %}
     <title>Another Title</title>
     <meta name="description" content="This is the description ...">
    {% endif %}

  </head>
  <body>

    {% block content %}

    {% endblock %} 

  </body>

</html>

To solve this issue, add the if statement {% if  object.slug in request.path %} before the article meta tags.

Then add the else if statement {% elif request.path == '/' %} after followed by the homepage meta tags. 

Add as many else if statements as needed to cover all of the different pages on your site, making sure each page has its own unique meta tags. 

Finally, add an else statement that gives the remaining page a different meta tag and end the if condition.


1
Subscribe now

Subscribe to stay current on our latest articles and promos





Post a Comment
Join the community

0 Comments