【Django】で構築したWebサイトにSEO効果のある「metaタグ」を設定する方法

2020年8月3日

Djangoで構築したWebサイトにSEO効果がある「meta」データを設定する方法をまとめました。

metaデータはそのページに何が書かれているのかをGoogleの検索ロボットが把握しやすく、検索上位にページが上がりやすくなります。
Webページを構築する際は、必ず設定はしましょう。

「Django」Webサイトに「metaタグ」を設置しSEO効果を上げる

metaタグをHTMLファイルのヘッダーに記述します。
基本として以下のmetaタグを記述することでSEO効果を上げることができます。

author　：　そのページの文書の著作者の名前を記述
description　：　そのページの概要を記述します。検索エンジンのに読み取られる際、検索結果などにも表示される情報となります。
keywords　：　そのページの文章の内容に該当するキーワードを記述します。キーワードはカンマ（,）区切りで複数のパスワードを記述できます。

※現在では「meta」データの多くは使用されていません。keywordのmeta要素はスパムとして使用するサイトもあるため検索エンジンからは無視されます。

Djangoの「meta」データの書き方

通常のmetaデータの書き方は以下となります。

  <meta name="description" content="ディスクリプション　テスト">
  <meta name="keywords" content="test,テスト,キーワード">
  <meta name="author" content="test taro">

ただし、今回はベースHTMLを利用してmetaデータをそれぞれのページで反映させたいので以下の設定を実施しました。

ベースHTMLの設定

ベースHTMLファイルにはブロックコードを設定します。

$ vim base1.html

<!DOCTYPE html>
{% load static %}
<html lang="ja">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="{% block description %}{% endblock %}">
  <meta name="keywords" content="{% block keywords %}{% endblock %}">
  <meta name="author" content="{% block author %}{% endblock %}">

  <title>{%block tab%}{%endblock%}</title>

------中略------

表示するHTMLファイルへの記述

次に実際にページを表示させるHTMLファイルへの設定を以下で記述します。

$ vim test/test1.html

設定は上記ベースHTMLで設定したブロックコードを用いて記述します。
設定例は以下となります。

{% extends 'base1.html'%}
{% load static %}

{% block description %}
ディスクリプション　テスト
{% endblock description %}

{% block keywords %}
test,テスト,キーワード
{% endblock keywords %}

{% block author %}
test taro
{% endblock author%}

{%block tab%}
test_tab
{%endblock%}

------中略------

正常に設定ができると以下のようにページのヘッダーにメタデータが記述されます。