Flaskでmeta descriptionタグを付ける方法解説

2024年11月28日

こんにちは！

今回の記事では、Flaskでmeta descriptionタグをつける方法について解説します。

meta description（メタディスクリプション）は、HTMLのメタタグの一種で、ウェブページの内容を簡潔に説明する短いテキストを指します。このテキストは、検索エンジンの検索結果ページに表示され、ユーザーにページの概要を伝える重要な役割を果たします。

今回は、meta descriptionを実装する方法を解説します。

meta descriptionタグとは？

まずは、meta descriptionタグについて解説します。すでに知っているという方は読み飛ばしてください。

先ほども説明した通り、meta description（メタディスクリプション）は、HTMLのメタタグの一種で、ウェブページの内容を簡潔に説明する短いテキストを指します。

HTMLのヘッダーに以下のようなタグを埋め込みます。

<meta name="description" content="Flaskを使ってSEOに強いWebサイトを構築する方法を解説します。">

meta descriptionの役割

meta descriptionの内容は、GoogleやBingなどの検索結果に表示されるスニペット（要約）に利用される場合があります。

meta descriptionが魅力的でユーザーの意図に合った説明は、検索結果でのクリック率を高めます。つまり、ユーザーにとってページを訪問する価値があるかどうかを判断する助けになっているのです。

ユーザーが検索意図に合ったサイトを探している場合、meta descriptionが適切であれば他のページよりも選ばれやすくなります。

SEOにおけるmeta descriptionの重要性

Googleはmeta descriptionをランキング要因として直接使用していません。

しかし、以下の理由でSEOにおいて重要とされています。

高いCTRを獲得することで、検索エンジンからの評価が間接的に向上する可能性がある。
検索結果での視覚的な魅力が増す。

そのため、meta descriptionの内容は、ユーザーの検索意図を意識して具体的な説明を書くことが重要です。また、内容を120～160文字に収めると良いとされています。

Flaskでmeta descriptionを実装する

ここから、Flaskでmeta descriptionを実装する方法を解説します。

アプリの基本的な構造

今回は、以下のような構造のアプリを想定します。

project/
│
├── app.py                # Flaskアプリケーション
├── templates/            # テンプレートフォルダ
│   ├── base.html         # ベーステンプレート
│   ├── home.html         # ホームページテンプレート
│   └── about.html        # アバウトページテンプレート

/と/aboutの2ページがあり、base.htmlをテンプレートとしています。

app.py

続いて、app.pyは以下のようになります。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/about')
def about():
    return render_template('about.html')

if __name__ == '__main__':
    app.run(debug=True)

app.py は非常にシンプルで、各ページのルートのみを定義します。

ベーステンプレート

すべてのページで共通の構造を提供するtemplates/base.htmlを作成します。
ここで titleとdescriptionのブロックを設定します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}デフォルトタイトル{% endblock %}</title>
    <meta name="description" content="{% block description %}デフォルトの説明{% endblock %}">
</head>
<body>
    <header>
        <nav>
            <a href="/">ホーム</a> | <a href="/about">アバウト</a>
        </nav>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        <p>© 2024 サイト名</p>
    </footer>
</body>
</html>

ホームページテンプレートとaboutテンプレート

続いて、ホームページ専用のテンプレート(templates/index.html)です。base.htmlを拡張してtitleとdescriptionを独自に定義します。

{% extends 'base.html' %}

{% block title %}
ホームページ - サイト名
{% endblock %}

{% block description %}
このサイトでは最新の技術情報やリソースを提供しています。初心者から上級者まで利用可能です。
{% endblock %}

{% block content %}
<h1>ホームページ</h1>
<p>ここはホームページの内容が表示されるセクションです。</p>
{% endblock %}

以下は、アバウトページ専用のテンプレート(templates/about.html)で、ホームページと異なる descriptionを定義します。

{% extends 'base.html' %}

{% block title %}
アバウトページ - サイト名
{% endblock %}

{% block description %}
このサイトは、技術者向けにリソースや情報を提供するために設立されました。詳細はこちらをご覧ください。
{% endblock %}

{% block content %}
<h1>アバウトページ</h1>
<p>このページではサイトの概要や目的について説明しています。</p>
{% endblock %}

このように、ベーステンプレートを活用することで、各ページにdescriptionを設定することができます。

サーバー側でdescriptionを設定する方法

上記では、index.htmlやabout.htmlのテンプレート側にdescriptionを指定しました。

しかし、動的にdescriptionの内容がわかる場合があります。このような場合は、サーバー側で設定してテンプレートに渡すことも可能です。

app.pyで各ルートに対応するdescriptionを生成

まず、app.py側でdescriptionを動的に生成し、各ルートで設定します。

render_template()に渡す際、description をテンプレートに含めることで、テンプレートで直接使用可能にします。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    # 動的に生成する場合の例
    description = "このサイトは最新技術情報を提供するためのリソースです。初心者から上級者まで利用可能です。"
    return render_template('index.html', title="ホームページ", description=description)

@app.route('/about')
def about():
    # 動的に生成する場合の例
    description = "このサイトの概要について説明しています。技術者向けの情報プラットフォームです。"
    return render_template('about.html', title="アバウトページ", description=description)

if __name__ == '__main__':
    app.run(debug=True)

base.htmlの共通構造に、サーバー側から渡されたdescriptionを出力

続いて、base.htmlの共通構造に、サーバー側から渡されたdescriptionを出力します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <meta name="description" content="{{ description }}">
</head>
<body>
    <header>
        <nav>
            <a href="/">ホーム</a> | <a href="/about">アバウト</a>
        </nav>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        <p>© 2024 サイト名</p>
    </footer>
</body>
</html>

この場合、index.htmlやabout.htmlの{% block description %}ブロックは不必要になります。

これで設定は完了です。このように設定することで、記事の内容や商品情報など、ページごとに異なる情報を動的にdescriptionに反映することができます。