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

（最終更新月：2021年10月）

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

404 NOT FOUND | ITC Media

IT業界へのChallengeを応援します

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

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

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

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

当記事では、

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

を解説します

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

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

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

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

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

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

コードの紹介

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により直接表示しています

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