【Django初学者必見!】効率よくページタイトルとメタディスクリプションを設定する方法を解説!

※本サイトにはプロモーション・広告が含まれています。

(最終更新月:2021年10月)

前回の記事では、開発した日報アプリをGoogleサーチコンソールへ登録する方法を解説しました

ただ、当アプリには適切なタイトルとメタディスクリプションが設定されていません

タイトルは検索エンジンが「どんなテーマでそのページが書かれているか?」を判断するために最重要項目と言われています

メタディスクリプションは検索結果でページの紹介として表示されますので、ユーザーの方が目を通し「どのページが自分の興味に近いか?」を判断するものになっています

つまり、タイトルとメタディスクリプションはとても重要!ということです

当記事では、

  • DjangoをベースとしたWebアプリでタイトルメタディスクリプションを設定する方法

を解説します

あくまでも一例としてではありますが、初心者の方へ参考になれば幸いです!

筆者プロフィール

筆者プロフィールアイコン

【現職】プロマネ/システムプランニング(元外資系金融機関営業)

【副業】ブログ(月間12万PV)/YouTube/Web・アプリ制作

コミュニケーション × ビジネススキル × 文章力 × プログラミングスキルを活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

【名著】リーダブルコード

コードの紹介

templates > base.html

HTMLテンプレート内、記載場所はheadタグ内になります

  <head>
  ...

    {% block meta_desc %}
      {% if meta_description %}
        <meta name="description" content={{meta_description}}>
      {% endif %}
    {% endblock %}
  ..
    
   <title>{% block head_title %}【日報アプリ】D-Repo{% endblock %}</title>
    ..
  </head>

タイトルはブロックタグメタディスクリプションはブロックタグとコンテキストを使い記述しています

このbase.htmlへどのように値を渡していくかをそれぞれ見ていきましょう

【コード】タイトルを渡す

templates > nippo > nippo-list.html

{% block head_title %}{{ block.super }} | 公開済み日報一覧{% endblock %}

{{ block.super }}でextends元を継承し、且つ、新たなタイトルを追記しています

もちろん、{{ block.super }}を省けば、新たなタイトルのみ表示されます

【コード】メタディスクリプションを渡す

nippo > views.py

def get_context_data(self, **kwargs):        
    meta_desc = "..当ページで適用したいディスクリプション"
    ctx["meta_description"] = meta_desc

クラスベースビューであれば、get_context_dataメソッドを使い、HTMLテンプレートへ値を渡します

この場合受け取り側のキーは「meta_description」になります

ランディングページ

{% block meta_desc %}
    <meta name="description" content="ようこそ!簡易日報アプリ「D-Repo」へ!こちらは無料で使える日報アプリのデモサイトになります!「Webアプリはとてもカンタンで便利!」を感じてみよう!">
{% endblock %}

ランディングページは、views.pyを経由せずにurls.py上でTemplateViewにより直接表示しています

そのため、コンテキストを使用せず、ブロックタグにより記述をしています

まとめ

タイトル、メタディスクリプションを表示するために、

  • 記載場所はheadタグ内で、
  • メタディスクリプションはブロックタグ、もしくはコンテキストで渡す
  • タイトルはブロックタグで表示する

ことで効率よく、ページごとに異なった値を渡すことができます

他にもやりかたはいろいろとあるかと思いますので、あくまでも参考になれば幸いです

次回の記事では、問い合わせフォーム・ページを作る方法を解説します

タイトルとURLをコピーしました