Back to Blog

Flaskでcanonicalタグを設定する方法を解説！

flask

2024年11月25日

【Pythonの基礎、アルゴリズム、ソフトウェアアーキテクチャの学習はこちら】

こんにちは！

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

FlaskでWebアプリケーションを開発する際、SEO対策は重要です。

その中でも重要なのが、canonicalタグです。canonicalタグは、検索エンジンが同一または類似するURLの中でどれを正規のページとするかを理解するための指標を提供するタグです。

特に動的なウェブアプリケーションを構築する際、クエリパラメータが含まれるURLが生成されることが多く、正しいカノニカルURLを設定することが必要です。

この記事では、PythonのFlaskフレームワークを使用して、動的なカノニカルタグを実装する方法を初心者にもわかりやすく解説します。

そもそもcanonicalタグとは？

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

canonicalタグは、HTMLの<head>内に挿入されるリンク要素で、正規URLを指定するためのものです。HTMLのヘッダーに以下のように記述します。

<link rel="canonical" href="https://example.com/register">

検索エンジンはこのタグを参照し、クエリパラメータが異なるURL（例: /register?next=/test）が複数あった場合でも、正規URL（/register）に統一して評価します。

なぜcanonicalタグが必要なのか

なぜcanonicalタグが必要かというと、SEO評価が分散する可能性があるからです。

具体的には、同じ内容のページが異なるURLでアクセス可能な場合、検索エンジンはそれぞれのURLを別々のページとして扱います。その結果、ページが本来持つべき評価が分散してしまい、検索順位が低下するリスクがあります。

例えば、以下のようなURLを想定します。

https://example.com/register
https://example.com/register?next=/home
https://example.com/register?session=12345

これらはすべて同じ「登録ページ」を指していますが、検索エンジンから見ると別々のページとして認識される可能性があります。そのため、それぞれに対して個別の評価が割り当てられてしまい、本来1つのページに集中すべきSEO効果が薄まります。

canonicalタグを設定することで、検索エンジンに「このページの正規URLはこれです」と明示できるため、分散を防ぎ、評価を正しく統一することができます。

Flaskでのcanonicalタグの実装手順

続いて、Flaskでのcanonicalタグの実装手順について解説します。

通常のアプリケーションの作成

まず、例として以下のようなFlaskアプリケーションを作成します。app.pyに以下のように記述されています。

from flask import Flask, render_template, request

app = Flask(__name__)

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

@app.route('/register')
def register():
    next_page = request.args.get('next', None)  # クエリパラメータを取得（例: ?next=/test）
    return render_template('register.html', next_page=next_page)

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

上記のアプリケーションでは、/(ルート)と/registerの2つのページがあると想定します。

フロントエンドは、index.htmlとregister.htmlがあると想定します。これらは、base.htmlのレイアウトテンプレートを使います。

project/
├── app.py
├── templates/
│   ├── base.html
│   ├── index.html
│   ├── register.html
└── static/
    └── style.css

canonical URLを生成するコンテキストプロセッサを追加

ここからが本題です。

Flaskでは、テンプレートで共通して利用するデータを提供するために「コンテキストプロセッサ」を使用します。ここで、現在のURLからクエリパラメータを除外した正規URLを生成します。

app.pyに以下を追加します。

@app.context_processor
def inject_canonical_url():
    """
    テンプレートにカノニカルURLを提供する
    """
    canonical_url = request.base_url  # クエリパラメータを除外したURLを取得
    return dict(canonical_url=canonical_url)

上記により、canonical_urlという変数がすべてのテンプレートで利用可能になります。

テンプレート側の設定

続いて、テンプレート側の設定を行います。先ほど設定した、canonical_urlをcanonicalタグとしてヘッダーに埋め込みます。

HTMLのヘッダーは、templates/base.htmlとして全ページ共通化します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}サイト名{% endblock %}</title>
    <meta name="description" content="{% block description %}サイトの説明{% endblock %}">
    <!-- カノニカルタグを設定 -->
    <link rel="canonical" href="{{ canonical_url }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

これで設定は完了です。

動作確認

最後に動作確認をしましょう。Flaskアプリケーションを起動します。

python app.py

次に、ブラウザでアプリケーションにアクセスしましょう。http://127.0.0.1:5000へアクセスします。

canonicalタグはHTMLのソースコードを見て確認します。

ソースコードを確認するためには、ブラウザの開発者モードを開きます。その後、HTMLの
<head> タグ内を探します。

以下のように、URLにクエリがついていても、通常のURLがcanonicalタグとして設定されています。

これで設定は完了です。

まとめ

ここまで、canonicalタグの解説やFlaskによる実装方法について解説しました。

canonicalタグは、SEOにおいて非常に重要な役割を果たします。同じ内容のページが複数のURLでアクセス可能な場合、正規URLを明示することで、検索エンジンの評価が分散する問題を防ぎます。Flaskのような動的ウェブフレームワークでは、クエリパラメータなどによる重複URLが発生しやすいため、カノニカルタグの適切な設定が不可欠です。

カノニカルタグの実装は、一度設定してしまえば、全ページで自動的に適用されるため、SEO対策を効率化できます。特に動的ウェブサイトやクエリパラメータが多いアプリケーションでは、カノニカルタグの効果は大きく、検索エンジンが適切なページを評価してくれるようになります。

正しいカノニカルURLの設定を行い、ウェブサイトのSEOを強化して検索順位の向上を目指しましょう！

ここまでお読みいただきありがとうございました！

flask Jinja2 SEO フロントエンド