タグクラウドとは？作り方とメリット・デメリットを初心者向けに解説

タグクラウドとは、WEBサイトやブログで使用される、特定のキーワードやタグを視覚的にテキストデータで一覧にして表現したリストのことです。

タグクラウドは、訪問したユーザーが興味のあるトピックや関連するコンテンツを素早く見つけるためのナビゲーション機能として、ホームページのサイドナビや記事ページの下部などに設置されます。多くの場合、タグをクリックすると、そのタグに関連する投稿や記事が一覧表示されます。

例えば、本メディア「SEM Plus」の場合はSEOに関するトピックの記事が多いため、タグクラウドも「SEO内部対策」や「SEOイベントレポート」などSEOに関するキーワードでタグを設定し、タグクラウドで表示させています。

【タグクラウドの設置例】

タグクラウドの作成方法は、CMSを利用している場合と利用していない場合で異なります。

CMSを使用している場合は1.を参考に、CMSを使用していない場合は2.をご確認ください。

1. CMSを使用している場合にタグクラウドを作成する方法
2. HTML+JavaScript でタグクラウドを作成する方法

それぞれの作成方法について、詳しく解説します。

多くのCMS（例：WordPress、Movable Typeなど）には、タグクラウドを簡単に追加する機能が組み込まれています。例えば、WordPressを使っている場合は、デフォルトのウィジェット機能からタグクラウドを設定できます。

手順は以下になります。

尚、WordPressであれば、「TaxoPress」や「xili-tidy-tags」、「Cool Tag Cloud」などタグクラウド作成用のプラグインを使って設定もできます。

CMSを使用しないWebサイトでも、HTMLとJavaScriptを使って簡単にタグクラウドを実装できます。

■ STEP1. 　HTML構造を作成

タグクラウドの基本構造をHTMLで作成します。
例えば、以下のようなdiv要素でリンクを配置します。

<div id="tag-cloud">
  <a href="/tag/html">HTML</a>
  <a href="/tag/css">CSS</a>
  <a href="/tag/javascript">JavaScript</a>
  <a href="/tag/web-design">Webデザイン</a>
</div

■ STEP2. 　CSSでスタイリング

タグクラウドを視覚的に分かりやすくするため、CSSでスタイリングをおこないます。

#tag-cloud a {
   text-decoration: none;
   padding: 5px;
   color: #0073aa;
  border: 1px solid;
  font-size: 16px;
}

#tag-cloud a:hover {
   color: #d54e21;
}

カラーなどは好みで指定してください。

▼ 上記を実装すると、以下の画像のようなタグクラウドを作成できます。

■ STEP3. 　タグリンクの作成

それぞれのタグリンクを、該当するページにリンクさせることで、ユーザーがタグをクリックした際に関連するコンテンツが表示されるようにします。

タグの使用頻度によってサイズを動的に変えたい場合は、JavaScriptを使うことで自動的にフォントサイズの調整もできます。

タグクラウドを作成するメリットは、以下の2つです。

1. サイトの回遊率向上に繋がる
2. WEBサイトの流入数が増加する

それぞれのメリットについて詳しく解説します。

タグクラウドを作成するメリットは、サイトの回遊率向上に繋がることです。Webサイトの回遊率とは、Webサイトを訪問したユーザーがどのくらいのページを閲覧しているのかを示す指標です。

例えば、本メディアSEM Plusを見ているユーザーはSEOやMEOに興味があるユーザーです。

そこで、「被リンク」「内部対策」「コンテンツSEO」「サーチコンソール」といった、SEOに関連するタグクラウドをフッターやサイドナビに設定しておくことで、興味があるタグをクリックして一覧ページから記事ページへ遷移してくれる可能性が高くなります。

このように、タグクラウドを設置することで、ページを閲覧したユーザーがそのままWEBサイトから離脱することを減らし、他のページを閲覧してもらうことで、Webサイトの回遊率が向上するというわけです。

タグクラウドを設置することで、WEBサイトの流入数が増加する可能性があります。

例えば、タグクラウドを設定すると、該当するキーワードに関連する一覧ページがWEBサイト内にできます。タグクラウドで作成された一覧ページがインデックスされて検索結果に表示された場合、新規のユーザーがそのタグページを通じてサイトに流入する可能性があります。

つまり、タグクラウドを設定すれば、WEBサイト内のページが増えるため流入数が増加する可能性があるという事です。特にサイトの使用上細かくカテゴリーを設定できない場合は、タグを上手く活用することで新規の流入数を増加させることができます。

スニーカーショップ大手の「アトモス」のWEBサイトでは、カテゴリには設定していない「モデル名」や「ブランド名×アイテム名」に関するキーワードをタグクラウドで設定することで、タグ一覧ぺージを検索結果に表示させています。

以下画像のように、多くのタグ一覧ページが検索結果に表示され流入を獲得しています。

このように、上手くタグクラウドを活用することで、WEBサイトの流入数を増やすことができる事がメリットです。

タグクラウドを作成するデメリットは、以下の2つです。

1. タグ付け作業と管理に手間がかかる
2. 重複を避けるためにタグ一覧ページの制御をおこなう必要がある

それぞれのデメリットについて、詳しく解説します。

タグクラウドのデメリットは、タグの設定や管理に手間がかかることです。タグクラウドを設定する際には、どのようなタグを作成するのか、どのページにどのタグを割り当てるのかを検討しながら作業するため、タグ付けは時間と手間がかかります。

似たような内容のコンテンツに異なるタグを付けてしまうと、ユーザーが探しにくくなり、SEO効果も弱まる可能性があります。例えば、「SEO対策」と「SEO」など、意味は似ているものの異なるタグが乱立してしまうと、コンテンツが分散され、検索エンジンにも悪影響を与えることがあります。

また、よくあるケースとしては、サイトが成長するにつれて、追加されたタグの数が増えてしまい、管理が煩雑になることです。

この場合、定期的にタグを見直し、不要なものを削除したり、タグ同士を統合する必要がありますが、これもまた労力を要する作業です。このように、タグクラウドを利用すると作業や管理をおこなうのに手間がかかる事がデメリットになります。

タグクラウドを作成する2つ目のデメリットは、タグ一覧ページの制御が欠かせないことです。タグ一覧はWEBサイトにあるトピックをまとめたキーワードを設定するため、同じトピックのページとテーマが重複しやすくなります。

例えば、「SEO外部対策」について解説しているページと、「外部対策」に該当するページをまとめたタグ一覧ページは、どちらも「外部対策」についてのぺージになるためテーマが重複します。

このように、テーマが重複したページが複数ある場合、検索エンジンがどちらのページを評価して良いのか迷い表示させたいページが検索結果に表示されなくなる可能性があるため注意が必要です。

タグクラウドを利用する場合は、サイトの重複を避けるためにnoindexやrobots.txtなどを使ったテクニカルな施策をおこない、タグ一覧ページの制御をおこなう必要があります。

WEBサイトへタグクラウドを導入したからといって、検索順位が上がったり、検索結果上でのクリック率が向上したりするなど、SEOへプラスの影響を与えるわけではありません。

タグクラウドについてはGoogleのマット・カッツ氏が、GoogleのYouTube公式チャンネルの中で、「タグが多すぎるとキーワードスタッフィングになってしまうかもしれない」「意図したページにPageRankを流すことができなくなる」と述べています。

私個人としては、タグクラウドの使用には少し抵抗があります。
タグクラウドは通常、害を及ぼすわけではありませんが、タグクラウドが多すぎると、キーワード スタッフィングのように見えて作業の妨げになることがあります。
ですから、タグクラウドは自由に使用してください。
ただし、使用する場合は、タグクラウドのサイズ、使用する技術、使用するタグなどの要素について考慮してください。

Do tag clouds help or hinder SEO?「Google Search Central」

キーワードスタッフィングとは、ページの内容とは関係のないキーワードを羅列し、意図的に検索順位を上げようとする行為で、ペナルティの対象となります。

つまり、タグクラウドを利用することで得られるSEO効果はなく、使い方によってはSEOへのマイナスの影響を与える可能性があるという事です。

どうしてもタグクラウドを利用したい場合は、管理方法や実装方法などをしっかりと検討した上で、導入するようにしましょう。

タグクラウドを作成する際のポイントは、以下の4つです。

1. タグの数を増やしすぎない
2. タグ管理のルールを設けておく
3. 内容の薄いタグ一覧ぺージを作成しない
4. CSSでデザイン調整をしながら作成する

それぞれのポイントについて詳しく解説します。

タグクラウドを作成する場合は、タグの数を増やしすぎないようにしましょう。

例えば、「SEO」と「SEO対策」など同じような意味を持つタグや、似た意味を持つタグが表示されていると、ユーザーがどのタグをクリックすれば良いのか迷ってしまうかもしれません。

そのため、手あたり次第にタグを増やすのではなく、ユーザーの利便性を意識して類似したタグを作成しないようにする事が大切です。

また、多くのタグを表示することで、HTMLの構造が複雑になり、サイトの読み込み速度が遅くなる可能性があります。特に、モバイルユーザーにとってはサイトの表示速度が非常に重要であるため、タグの数を抑えてページの軽量化を意識することが大切です。

タグ管理のルールを設けることで、重複や類似するタグを作成したり、タグが大量に作成される事を防ぐ事ができます。

タグクラウドのタグの名前やタグの割り当て方には決まったルールが存在しているわけではなく、自由に名前を付けたり割り当てたりできます。しかし、複数のスタッフがタグクラウドを管理している場合、全く同じ名前のタグを作成したり、同じ意味のタグを作成したりするかもしれません。

タグクラウドを作成する際には、ページにタグを割り当てる条件を決めておくことや、重複を避けるために作成したタグをExcelファイルで共有するなど、タグ管理における共通のルールを設けておくことが重要です。

タグを作成する際は、内容の薄いタグ一覧ページを作成しないように注意が必要です。

例えば、該当するページが1つしかないにもかかわらずタグを作成した場合、そのタグ一覧ページにはその1つのページしか表示されないため、キーワードとの関連性が低く、内容の薄いページとなってしまいます。

このようなページを大量に作成した場合は、「低品質なページが多いサイト」もしくは「ユーザーの役に立たないページが多いサイト」と検索エンジンから判断され、WEBサイト全体のSEO評価を落とす可能性があります。

そのため、タグクラウドを作成してタグを付与する場合は、タグのテーマに該当するページが一定数以上あるかどうかを確認した上で作成しましょう。

タグクラウドを作成する場合は、CSSでデザイン調整をしながら作成しましょう。テキストをただ並べただけのタグだと、ユーザーからリンクだと認識されずなかなかクリックしてもらえません。

文字の色やフォント、文字のサイズなどのデザインを調整して目立つようにしたり、横並びや縦並びなどタグの配置を工夫したりすることが重要です。

また、レスポンシブデザインを考慮して、画面サイズによってタグの配置が変わるように設定することも大切です。例えば、デスクトップ表示では横並びで一覧表示し、スマートフォンでは縦並びにしてスクロールしやすくするなど、デバイスごとのユーザビリティも意識しましょう。

今回は、タグクラウドについて解説しました。

タグクラウドの作成方法や作成するメリット・デメリット、作成する際のポイントは以下の通りです。

タグクラウドはWEBサイトの運営においてさまざまな効果が期待できる機能ですが、導入方法や管理・運用方法によっては十分な効果が出なかったり逆効果になってしまう恐れがあります。

本記事で解説した、タグクラウドのメリット・デメリット、作成する際のポイントを参考に導入を検討してみましょう。