TOPサービス > タグ設定

タグ設定TAG SETTING.

タグは、Webページの土台となるプログラミング言語「HTML(Hyper Text Markup Language)」にて使用される特殊な文字列です。タグで情報を囲むことによってそれぞれの文章や文字列が表している意味をコンピュータが理解できるようになります。適切なHTML構造でページを作成し有益な情報を提供することで、WebページのSEO評価が高まります。

SEO対策のタグ設定はできていますか?

HTMLマークアップのイメージ


Webサイトに適切なタグ設定を行えていますか?
広告配信等でアクセス数が多いページであっても、基本のタグ構造や情報記述ができていなければ検索エンジンに上位表示されることは非常に難しくなります。

 

タグとは

まず、普段私たちが目にしている“画像や装飾された文字で構成されたWebページ”は、一枚絵が表示されているわけではありません。 Webページは、コンピュータに分かるHTML(Hyper Text Markup Language)というプログラム言語で宣言され、構築されています。

「プログラム言語で宣言する」というのは、例えば以下のようなイメージです。(実際は英数字や記号で記述されています)

  • これはタイトルです
  • これは大見出しです
  • これは別のページにリンクします

本題の「タグ」はHTMLの宣言に使用される特殊な文字列です。
タイトルや見出し、テキストや画像表示など、それぞれを宣言するタグが存在しており、それらのタグで情報を囲むことによって、はじめて文章や文字列が表す意味をコンピュータが理解できるようになります。

タグの例:

タグ種類 使い方 表示イメージ
タイトルを宣言するタグ<titile> <titile>タグ設定の基本</title> タグ設定の基本
大見出しを宣言するタグ<h1> <h1>大見出し</h1> 大見出し
ページ遷移を宣言するタグ<a href=""> <a href=“https://servithink.co.jp/”>サービシンクのWebサイトはこちら</a> サービシンクのWebサイトはこちら

 

Webページは「ページの構成、情報の網羅性」などをコンピュータに理解してもらい、ユーザへの有益性が評価されると検索エンジンに上位表示されるようになります。よって、目に見えるデザイン以外の情報もたくさん宣言されています。

例えば、

  • このページは日本語で作成されています
  • このページの情報は「Web制作を検討している人に有益な情報」です
  • 画像が表示されない、目が見えない人にはこの情報を提示できます
  • 強調したい情報はここです
など。

Webページで右クリック→「ページのソースを表示」をクリックすることで、実際にWebページを構成しているタグ記述を見ることができますので、ご興味がある方はご覧になってみてください。(ブラウザによって機能名や表示方法が異なります)

 

SEO対策の超基本タグ

検索エンジンに上位表示させるための施策をSEO(Search Engine Optimization)と呼びますが、SEO対策の基本は適切なタグ設定からです。

Googleが公表しているウェブサイト作成者向けのガイドラインには、「Webページの存在やページの構成を認識しやすいようにWebサイトを作成すること」と記述されており、SEOにおいてWebサイトのHTML構造を重要視していることを示しています。

ここでは、SEO対策の超基本となる6種類のタグをご紹介します。

  1. titleタグ
  2. descriptionタグ
  3. h1〜h6タグ
  4. altタグ
  5. li,ol,ulタグ
  6. aタグ

タグ1

titleタグ

名前の通りWebページのタイトルを宣言するタグです。
実際にtitleタグで宣言した文章は以下のような箇所で表示されます。

  • 検索結果のタイトル
  • Webブラウザでページを開いたときのタブ名
  • SNS等でURLを共有したときに表示されるタイトル

Web検索結果のタイトル文章

titleタグの2つの役割:

1.直接的なSEO対策:検索エンジンに何のページであるかを教える
titleタグで宣言されたタイトルは、サイトへの訪問者だけではなくGoogleなどの検索エンジンにもページの内容を伝える役割を担っています。ユーザーが検索する時に入力する「検索クエリ」と関連性の高いタイトルを設定することで、検索エンジンの評価が高まり順位上昇につながります。

2.間接的なSEO対策:クリック率向上
検索一覧ページに大きく表示され、みなさんがクリックするのが「ページタイトル」です。この「タイトルに何を記載し、いかに目を引くか」がページを選ぶ上で重要な情報となります。そしてタイトルのクリック率が高まると検索エンジンは「このクエリで検索するユーザの期待に合うコンテンツだ」と評価してくれるようになり、順位上昇につながります。

titleの書き方のポイント:

文字数:30文字程度
検索エンジンや閲覧デバイスによって、タイトルが表示される最大文字数が異なり、全角30文字程度(半角は50文字程度)に収めることが望ましいです。また、タイトルが長すぎる場合やタイトルが設定されていない場合は、検索エンジンが重要と思う情報を切り抜いて表示する場合もあります。

キーワードを絞る
ジャンルも分野も異なるキーワードがタイトルに複数ある場合、何について書かれている記事か検索エンジンが判断できなくなくなり、評価が分散してしまいます。 絶対必要なキーワード2〜3点に絞るか、タイトルテキスト内に2度キーワードを使うなどして「キーワードのタイトル占有率」を高めましょう。
※強調のために不自然に繰り返し使うなどすると、評価が悪化するので注意が必要です

キーワードはタイトル前方に記述
ユーザは検索を行った際、大量のタイトルから「自分が欲しい情報がありそうなWebサイト」を探します。求めているキーワードやフレーズが目に留まると反射的にクリックしてもらえる可能性があるため、目立つタイトル前方に配置するのが良いでしょう。また、タイトル後方は文字数によって省略表示される場合もあるため、その点でも前方配置を推奨します。

 

タグ2

descriptionタグ

ページに書かれている情報の概要を宣言するタグです。

検索エンジンに対し「このページにはこの内容が書かれている」ということを伝えるだけでなく、検索結果画面にてタイトルの下に表示される重要な情報となります。

Web検索結果の説明文章

descriptionの書き方のポイント:

文字数:全角110文字程度
検索エンジンや閲覧デバイスによって最大文字数は異なりますが、全角120文字程度とされています。省略を防ぐためそれ以下の文字数におさめることが推奨されます。

キーワードを前方に配置する
こちらもtitleタグ同様にユーザーの目につきやすくするためです。
また、スマートフォンの場合は50文字程度しか表示されない可能性があります。主要なフレーズ・キーワードは最低でも50文字以内に配置すべきです。

 

タグ3

h1〜h6タグ

「h」は見出しを意味する「heading」の略であり、h1〜h6タグは「見出し」を宣言するタグです。
見出しの大きさ(優先順位)別に6種類のタグがあり、一番大きい見出しがh1、小さい見出しがh6となります。hタグによって見出しの優先度を宣言することで、Webページの構成を正確に伝えることができます。

文字の表示サイズを変えるためにhタグを使用している例も見受けられますが、情報構造を宣言するタグであるため適切に使用できていない場合は見直しましょう。

h1〜h6タグの表示の見え方

hタグ(サイト構造)の書き方のポイント:

順番(降順)を守る
作文や論文の記述と同様に、h1からh6に向かって順番に使用します。これはユーザーや検索エンジンに構造を正確に伝えるためです。 「h1」はWebページのテーマやタイトルなどの大見出し、「h2」は目次や章などの中見出し、「h3」は各章のポイントとなる小見出しとして使用するのが良いでしょう。

h1は1つのWebページに1つ
パソコンの文書ファイルで例えると、titleがファイル名、h1は文書冒頭のメインタイトルです。重要なキーワードを持たせて1つのみ宣言している状態が理想です。

h5以下の見出しタグは使わない
SEOの観点ではなく、Webページを作成する側のテクニックになりますが、h5〜h6のタグを使いだすと設定によっては本文よりも小さい扱いになる場合もあり、正しい情報構成を組めなくなる場合があります。使ってもh4まで、h5〜h6は使わない前提とした方がページを構築しやすいでしょう。

 

タグ4

altタグ

altタグは、画像や動画が読み込めない時に表示する「代替テキスト」を宣言します。
画像解析の技術は進歩していますが、それでもコンピュータは画像や動画ファイルがどんな情報を説明しているものであるかを判断することができません。そこで代替テキストを宣言しておくことでコンピュータが理解できるようになります。また、視覚障がいをお持ちの方がスクリーンリーダーや音声ブラウザを利用してWebサイトを閲覧した場合にも代替テキストが活用されます。

altの書き方のポイント:

画像に写っている情報を簡潔にまとめる
例えば、以下のような画像を「デザイン比較」のイメージとして表示するとします。

黄色いマカロンと赤いマカロンのイメージ

この時、代替テキストは「デザイン比較のイメージ」とするのではなく「黄色いマカロンと赤いマカロンのイメージ」とする方が適切です。コンピュータには画像の内容が正確に伝わる代替テキストを伝えましょう。

画像の内容と関係無いキーワードを入れ検索ヒット率を上げようとすると、品質ガイドラインに抵触しペナルティを受ける場合があります。詳しくはGoogleのウェブサイト作成者向けのガイドラインなどもご参照ください。

意味を持たない画像はaltを空(から)で設定
Webサイトを構成する画像の中には、特に意味を持たない画像(デザイン装飾のための画像など)があります。これらの画像の場合、代替テキストは記入せず空(空白)にします。その際、altタグの宣言は行いつつ中身を空にすることがポイントです。記述しなかった場合、音声ブラウザやスクリーンリーダーが意味のない画像ファイルを「画像」と読み上げてしまう場合があります。

スマートフォン向けWebサイトでは、できるだけデータ転送を減らすためにaltを省略している場合も見受けられます。しかし、検索エンジンがaltを最低限の文法マナーとして捉えているところがあり、検索上位のWebサイトは画像にalt属性を記述しているところがほとんどです。

 

タグ5

li,ol,ulタグ

li,ol,ulタグは、情報を並列に並べたり箇条書き(リスト形式)にまとめるのに使用されるため「リストタグ」とも呼ばれます。

並列に並べる要素は「liタグ」で囲い宣言しますが、その要素を「ulタグ」か「olタグ」どちらで囲むかにより意味合いが異なってきます。

  • ulタグは要素に優先度や順位の差が「ない」場合に使用します。ulタグで宣言すると「・」箇条書きリスト形式で表示されます。
  • olタグは要素に優先度や順位の差が「ある」場合に使用します。olタグで宣言すると「1,2,3」箇条書きリスト形式で表示されます。

htmlのulタグとolタグのイメージ

リストの書き方のポイント:

リストの見た目にこだわらず、要素を並記する場合に使用する
リストタグは「情報構造を表すタグ」です。「・」や「1,2,3」といった箇条書きの見た目はいくらでも変更ができるので、情報構造を表すために宣言しましょう。 例えば、Webページの上部などにあるグローバルナビゲーション、メニュー一覧、ブログ記事の一覧などは、全て要素を並記したコンテンツです。よって、リストタグで宣言することが望ましいです。

 

タグ6

aタグ

「a」は海に下ろす錨(いかり)を意味する「アンカー(anchor)」の略であり、他のWebページへ「リンク」を貼る際に開始位置と終了位置を宣言するタグです。

htmlのaタグのイメージ

SEOではリンク先ページの評価にも影響を受けるほか、リンク数の多さにより構造 も評価の対象としており、「被リンク」「発リンク」という言葉をご存知の方もいらっしゃると思います。

aの書き方のポイント:

リンク先ページのキーワードを含める
検索エンジンは「リンク先のWebページがどのようなページであるか」も評価の対象とします。

例えば「Webサイト制作」のページへリンクを設置する場合「詳しくはこちら」と記載するのではなく、「Webサイト制作について詳しく見る」と記載する方が、リンク先ページの概要が分かりやすくなり、SEO評価が高まります。ただし、過剰にキーワードを詰め込むなどの行為を行うとスパムとして判断される可能性があるため注意が必要です。

影響を受けたくないページをリンクする場合はnofollowを設定
例えば、スパムなどの悪質なWebサイトを公表する場合、通常と同じようにaタグでリンクするとこちらのWebサイトまで悪質として評価される可能性があります。しかし、aタグの中にrel=”nofollow”という属性を付与すると、検索エンジンに「このURLは辿らないでほしい」旨を伝えることができます。

nofollowの詳しい使い方は、Googleのウェブサイト作成者向けのガイドラインもご参照ください。

 

こちらでは超基本のタグ設定についてご紹介いたしましたが、WebサイトのSEO内部施策としては「氷山の一角中の一角」でしかありません。
Web制作会社サービシンクでもSEOを考慮したタグ設定や内部施策のご支援を行っております。見直しを行いたいなどございましたら、まずはお気軽にご相談ください。

 

Webサイトのタグ構造を見直すならサービシンクにお任せください!

 

 

 

その他のサービス

 

業務・集客支援、自社サービス

Webサイト・システムの
お悩みがある方は
お気軽にご相談ください

無料相談・サイト診断

出張またはWeb会議にて
貴社サイトの改善すべき点のご提案や
ご相談事項に回答いたします。

会社案内ダウンロード

サービシンクの強みや実績を
まとめた会社案内を
ダウンロードいただけます。

ページTOP