記事ページを表示中

SEOに適したタグ(タイトルタグ、hタグ、メタタグ)の使い方

記事No.83

更新日時2023年03月10日

バイオレットちゃん、今日はタグについて勉強するよ!

スカーレット

バイオレットちゃん

おはようございます。タグ?ですか。

そう、タグ。

スカーレット

バイオレットちゃん

…タグ?タグを覚えるメリットを教えて下さい。

タグが上手く使えるようになると、SEOに有利な記事が書けるよ!

スカーレット

バイオレットちゃん

是非、教えて下さい!

タグというのは、HTMLというマークアップ言語で使用されるものです。

HTMLが出来なくても、ワードプレスなどのCMS(コンテンツマネジメントシステム)を使えば、インターネット上に記事を投稿する事ができます。

ですが、それは、私たちが書いた文章を、ワードプレスがタグを使用して正確にHTMLに変換してくれているからです。

私たちは普段、以下のような手順で記事を公開しています。

  1. 人間が文章を書く
  2. ワードプレスがタグを使用して、その文章をHTMLに変換する
  3. HTMLに変換された記事がインターネットで公開される

バイオレットちゃん

難しい事はワードプレスがやってくれているのね!

そうそう。ただ、SEO上重要なタグに関しては、人間が指示をしないと駄目なんだ。

スカーレット

バイオレットちゃん

だから私たちはタグの勉強をするのですね。

そうそう!

スカーレット

タグの基本を簡単に解説します。

ワードプレスで記事を投稿する際、投稿画面には、記事タイトルを入力するフォームがあります。

そのフォームに「今日の日記」と文字を打ち込むと、ワードプレスは以下のようにHTMLを生成します。

<title>今日の日記</title>

これは、ワードプレスの設定が、投稿画面の記事タイトルに入力された文字はtitleタグで挟む。となっているからです。

上のHTMLの場合「今日の日記、というテキストを、titleタグで挟んでいる」と言い表せます。

記事タイトル入力フォームとtitleタグの関係のように、ワードプレスには、「このフォームに入力された文字は、このタグで挟む」といったルールが沢山あります。

全てのルールを把握する必要はありませんが、SEO上とくに重要なタグの使いかたに関しては知っておいたほうが良いので、この記事では、以下のタグについて解説します。

  • タイトルタグ
  • hタグ
  • メタタグ

タイトルタグの使い方

バイオレットちゃん

まずはタイトルタグの使い方についてですね!

タイトルタグはSEO対策で最も重要なタグだよ。

スカーレット

ワードプレスなどのCMSを使用してサイトを構築している場合、記事を書く際に、その記事のタイトルを入力するフォームがあります。

先程、解説した通り、このフォームに「今日の日記」と文字を打ち込むと、ワードプレスは以下のようにHTMLを生成します。

<title>今日の日記</title>

タイトルタグで挟まれた文字は、その記事で最も重要なキーワードとグーグルは認識します。

ですので、記事タイトルには、その記事でアクセスを集めたいキーワードを入れないといけません。

タイトルを決める時のポイントは「どういった内容の記事かを具体的に書く」という事です。

  • タイトルの文字数は30文字以内が良い
  • 重要なキーワードほどタイトルの左側に配置したほうが良い

といった事も言われていますが、まず一番に考える事は、検索ユーザーが記事タイトルを見た時に「あ!この記事には私が求めている情報が書かれている」と期待できるタイトルにすべきです。

タイトルを決める時のポイントは「どういった内容の記事かを具体的に書く」という事ですが、この記事を例に解説します。

この記事のタイトルは、

「SEOに適したタグ(タイトルタグ、hタグ、メタタグ)の使い方」

ですが、

「SEOに適したタグの使い方」

といったタイトルでも変ではないです。

ですが、具体性を出す為に、

  • タイトルタグ
  • hタグ
  • メタタグ

といったキーワードもタイトルに入れました。

このように、その記事内で使用するキーワードを、1つ1つ記事タイトルに含めると良いです。

そうする事で、記事タイトルに含めたそれらのキーワードのいずれかからアクセスが来ます。

記事タイトルに入れるキーワードを決める事を「キーワード選定」と言います。キーワード選定をする場合、専用のWEBアプリがあります。私もWEBアプリを公開しているので、もし良かったら使ってみて下さい。

スカーレット

コメントフォーム

hタグの使い方

バイオレットちゃん

次はhタグですね!

hタグは、タイトルタグの次に重要なタグで、本に例えると、タイトルタグが本のタイトルだとすると、hタグは本の見出しを構成するタグだよ。

スカーレット

バイオレットちゃん

本の見出しを読むと、そこに何が書かれているか分かりますが、これと同じで、hタグを読むことで、そこに何が書かれているか分かるのですね!

hタグの使い分けについて

hタグは、h1〜h6まであります。

ただ、h1〜h6全てを使い分ける人は殆どいません。

SEO効果が期待できるのは、h4までと言われています。

h1〜h4タグの使い分けですが、hタグの中では、h1タグがSEO上もっとも有利で、h2タグ、h3タグ、となるにつれて重要度が下がります。

つまり、h1タグを使用した見出しを、グーグルはその記事で最も重要な意味を持つ見出しと認識します。

「なら、h1タグだけ使えばいいじゃん!」

と思われるかもしれません。

たしかに、h1タグはSEOに有利ですが、h1タグは大見出し(記事の一番上に表示される見出し)に使用するルールがあります。

こういった事もあり、h1タグは1記事につき1回のみ使える。h2タグ以降は自由に使える。といった設定になっているワードプレステーマが多いです。

hタグの構成について

hタグの構成は、上の図のように入れ子状にします。

アジアの国々(h2)の中に、日本(h3)と中国(h3)があり、日本(h3)の中には東京(h4)と大阪(h4)があり、中国(h3)の中に北京(h4)と上海(h4)がある。

といった感じです。

チェックポイント

この場合、図には書いていませんが、h1タグは世界の国々となり、他のh2タグはヨーロッパの国々、アフリカの国々…となります。

これを目次にまとめると、以下の図のようになります。

記事を書く時、いきなり書き始めるよりも、最初にこのような構成を決めておくと全体的にまとまるのある記事になります。

ワードプレスで記事を書く場合、hタグを挿入するボタンがあるので、そちらからタグを設定します。

スカーレット

コメントフォーム

メタタグの使い方

メタタグは、サイト訪問者ではなく、検索エンジンやクローラーに向けて書かれるものです。

メタタグはHTMLのheadタグ内に書きます。

HTMLは、headタグと、bodyタグに分かれています。

headタグの部分はサイトには表示されません。

サイトに表示されるのはbodyタグの部分だけです。

メタディスクリプションについて

メタタグには様々な種類がありますが、SEOの会話で出てくるメタタグは、メタディスクリプションを指しています。

HTMLのhead部分を見ると、上の図のような部分があります。ここに書かれているのがメタディスクリプションです。

何故、メタディスクリプションがSEOに関係しているのか?

その理由は、メタディスクリプションは、検索結果に表示されるからです。メタディスクリプションの内容によってクリック率も変わってきます。

ワードプレスを使用している場合、メタディスクリプションは記事編集画面で設定する事ができます。

スカーレット

その他のメタタグについて

SEOには直接関係しませんが、メタディスクリプションの他にもメタタグは存在します。いくつかご紹介します。

  • メタキーワード
  • 文字コード
  • レスポンシブデザイン
  • 検索エンジンへの指示

■メタキーワード

<meta name=”keywords” content=”キーワードを,で区切って指定”>

ひと昔まえはSEOに影響していたタグですが、現在はSEOとの関係はありません。

■文字コード

<meta charset=”utf-8″>

文字コードを指定するタグです。日本語のサイトである、という事を示しています。

■レスポンシブデザイン

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

レスポンシブデザインを実現する為に記入するタグです。

■検索エンジンへの指示

<meta name=”robots” content=”noindex,nofollow”>

検索エンジンへ指示する時に使用するメタタグです。

「noindex」は、「検索エンジンのデータベースに登録しないで下さい。」という指示です。

「nofollow」は、「このページをクローリングしないで下さい。」という指示です。

不特定多数の人に見られたくない記事や、検索結果の上位に表示させたくない記事に使うタグです。

コメントフォーム

何故、SEOにタグが関係しているのか?

ここからは、タグとSEOの関係について解説します。

Googleのクローラーは、私たちのサイトを読む時に、HTMLを読んでいます。

豆知識

クローラーがHTMLを読む事をクローリングと言います。

クローラーはクローリングした情報をGoogleのデータベースに運びます。

データベースではクローラーが運んできた情報を整理して、そのサイトを評価します。

検索エンジンに正しく評価して貰う事をSEO(検索エンジン最適化)と言いますが、評価される際に、タグの存在が重要になります。

タグの1つに、タイトルタグ<title>がありました。

タイトルタグに挟まれた文章は、その記事のタイトルとなります。

HTMLで、

<title>お箸の持ち方</title>

と書けば、その記事のタイトルは「お箸の持ち方」となります。

そして、Googleの検索エンジンは、タイトルタグに挟まれた文章によって評価を変えます。

仮に、お箸の持ち方に関する記事を書いていたとしても、その記事のタイトルが「9月23日の日記」だった場合、Googleの検索エンジンは、その記事が、お箸の持ち方に関する記事だと気づけないです。

これではGoogleの検索エンジンから正しく評価されません。

つまり、SEO的に不利と言えます。

グーグルは、タイトルタグだけでなく、hタグ、メタタグ、など全てのタグを見た上で、私たちが書いた記事で、最も重要なキーワードは何か?を判断しています。

ですので、タグを正しく使う事がSEO対策に繋がるのです。

バイオレットちゃん

タグのように、ブログを運営する上で勉強すべき事ってまだ沢山あるのですか?

深堀りすれば、勉強する事は沢山あるけど、タグはSEO対策で優先順位が高いので紹介したよ。

スカーレット

バイオレットちゃん

ブロガーはコツコツ記事を書いているだけでは駄目なんですね。

そうだね、タグのように、基本の部分が抜けているとブログを継続しても結果はついてこないよ。

スカーレット

バイオレットちゃん

いきなり全てを理解するのは難しいので、まず最初は、最低限の基礎を抑えておく事が大切ですね。

ブログを書きながら、SEOの勉強をすると良いよね!

スカーレット

コメントフォーム

著者情報

名前:スカーレット
2010年からWEBサイトやWEBアプリを作成しています。最初は趣味でブログを書いていましたがSEOを勉強するのが楽しくなり、そのままブロガーとして独立しました。その後、記事を書くだけでは物足りなくなり自分でWEBアプリの作成をスタート。現在はブロガー兼プログラマーとして活動しています。このWEBアプリ(ブロトーク)もDjangoで自作しました。ブロトークはブログとSNSを合体させたようなWEBアプリです。ブログを読んで気づいた事や感想などあれば、気軽にメッセージを送って頂ければと思います。WEB技術を一緒に勉強していけたらと思います。