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%}
------中略------
正常に設定ができると以下のようにページのヘッダーにメタデータが記述されます。
Djangoでのメタデータの設定は以上となります。
サーバーを構築するならVPSがおすすめです。
エンジニアのオンライン学習
ITエンジニアにおすすめの教材、オンラインスクールです。
無料からエンジニアの学習ができる教材などまとめているので参考にしてください。
| おすすめオンライン教材 | |
| 自宅で学習ができるオンラインスクール | |
ITエンジニアの開発・検証・学習としてインターネット上で専用のサーバ（VPS）を利用しましょう！
実務経験はVPSで学べます。
コメントを残す