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

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種類のタグをご紹介します。
- titleタグ
- descriptionタグ
- h1〜h6タグ
- altタグ
- li,ol,ulタグ
- aタグ
タグ1
titleタグ
名前の通りWebページのタイトルを宣言するタグです。
実際にtitleタグで宣言した文章は以下のような箇所で表示されます。
- 検索結果のタイトル
- Webブラウザでページを開いたときのタブ名
- SNS等でURLを共有したときに表示されるタイトル

titleタグの2つの役割:
1.直接的なSEO対策:検索エンジンに何のページであるかを教える
titleタグで宣言されたタイトルは、サイトへの訪問者だけではなくGoogleなどの検索エンジンにもページの内容を伝える役割を担っています。ユーザーが検索する時に入力する「検索クエリ」と関連性の高いタイトルを設定することで、検索エンジンの評価が高まり順位上昇につながります。
2.間接的なSEO対策:クリック率向上
検索一覧ページに大きく表示され、みなさんがクリックするのが「ページタイトル」です。この「タイトルに何を記載し、いかに目を引くか」がページを選ぶ上で重要な情報となります。そしてタイトルのクリック率が高まると検索エンジンは「このクエリで検索するユーザの期待に合うコンテンツだ」と評価してくれるようになり、順位上昇につながります。
titleの書き方のポイント:
文字数:30文字程度
検索エンジンや閲覧デバイスによって、タイトルが表示される最大文字数が異なり、全角30文字程度(半角は50文字程度)に収めることが望ましいです。また、タイトルが長すぎる場合やタイトルが設定されていない場合は、検索エンジンが重要と思う情報を切り抜いて表示する場合もあります。
キーワードを絞る
ジャンルも分野も異なるキーワードがタイトルに複数ある場合、何について書かれている記事か検索エンジンが判断できなくなくなり、評価が分散してしまいます。
絶対必要なキーワード2〜3点に絞るか、タイトルテキスト内に2度キーワードを使うなどして「キーワードのタイトル占有率」を高めましょう。
※強調のために不自然に繰り返し使うなどすると、評価が悪化するので注意が必要です
キーワードはタイトル前方に記述
ユーザは検索を行った際、大量のタイトルから「自分が欲しい情報がありそうなWebサイト」を探します。求めているキーワードやフレーズが目に留まると反射的にクリックしてもらえる可能性があるため、目立つタイトル前方に配置するのが良いでしょう。また、タイトル後方は文字数によって省略表示される場合もあるため、その点でも前方配置を推奨します。
タグ2
descriptionタグ
ページに書かれている情報の概要を宣言するタグです。
検索エンジンに対し「このページにはこの内容が書かれている」ということを伝えるだけでなく、検索結果画面にてタイトルの下に表示される重要な情報となります。

descriptionの書き方のポイント:
文字数:全角110文字程度
検索エンジンや閲覧デバイスによって最大文字数は異なりますが、全角120文字程度とされています。省略を防ぐためそれ以下の文字数におさめることが推奨されます。
キーワードを前方に配置する
こちらもtitleタグ同様にユーザーの目につきやすくするためです。
また、スマートフォンの場合は50文字程度しか表示されない可能性があります。主要なフレーズ・キーワードは最低でも50文字以内に配置すべきです。
タグ3
h1〜h6タグ
「h」は見出しを意味する「heading」の略であり、h1〜h6タグは「見出し」を宣言するタグです。
見出しの大きさ(優先順位)別に6種類のタグがあり、一番大きい見出しがh1、小さい見出しがh6となります。hタグによって見出しの優先度を宣言することで、Webページの構成を正確に伝えることができます。
文字の表示サイズを変えるためにhタグを使用している例も見受けられますが、情報構造を宣言するタグであるため適切に使用できていない場合は見直しましょう。

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」箇条書きリスト形式で表示されます。

リストの書き方のポイント:
リストの見た目にこだわらず、要素を並記する場合に使用する
リストタグは「情報構造を表すタグ」です。「・」や「1,2,3」といった箇条書きの見た目はいくらでも変更ができるので、情報構造を表すために宣言しましょう。
例えば、Webページの上部などにあるグローバルナビゲーション、メニュー一覧、ブログ記事の一覧などは、全て要素を並記したコンテンツです。よって、リストタグで宣言することが望ましいです。
タグ6
aタグ
「a」は海に下ろす錨(いかり)を意味する「アンカー(anchor)」の略であり、他のWebページへ「リンク」を貼る際に開始位置と終了位置を宣言するタグです。

SEOではリンク先ページの評価にも影響を受けるほか、リンク数の多さにより構造 も評価の対象としており、「被リンク」「発リンク」という言葉をご存知の方もいらっしゃると思います。
aの書き方のポイント:
リンク先ページのキーワードを含める
検索エンジンは「リンク先のWebページがどのようなページであるか」も評価の対象とします。
例えば「Webサイト制作」のページへリンクを設置する場合「詳しくはこちら」と記載するのではなく、「Webサイト制作について詳しく見る」と記載する方が、リンク先ページの概要が分かりやすくなり、SEO評価が高まります。ただし、過剰にキーワードを詰め込むなどの行為を行うとスパムとして判断される可能性があるため注意が必要です。
影響を受けたくないページをリンクする場合はnofollowを設定
例えば、スパムなどの悪質なWebサイトを公表する場合、通常と同じようにaタグでリンクするとこちらのWebサイトまで悪質として評価される可能性があります。しかし、aタグの中にrel=”nofollow”という属性を付与すると、検索エンジンに「このURLは辿らないでほしい」旨を伝えることができます。
nofollowの詳しい使い方は、Googleのウェブサイト作成者向けのガイドラインもご参照ください。
こちらでは超基本のタグ設定についてご紹介いたしましたが、WebサイトのSEO内部施策としては「氷山の一角中の一角」でしかありません。
Web制作会社サービシンクでもSEOを考慮したタグ設定や内部施策のご支援を行っております。見直しを行いたいなどございましたら、まずはお気軽にご相談ください。
Webサイトのタグ構造を見直すならサービシンクにお任せください!
その他のサービス
-
Webサイト・ホームページ制作
新規立ち上げ、デザインリニューアル、集客改善、更新の効率化など、Webサイトの目的や課題の整理から着手し、企画設計から制作、運用までワンストップで対応します。
Webサイト・ホームページ制作を詳しく見る
-
Webシステム開発
物件情報、会員情報、資料請求や会員登録情報、Webサイトでのアクセス情報の管理など、Webシステムによって業務効率まで向上させる仕組みを構築します。
-
Webアプリケーション開発
iOS/Androidの開発に対応。マルチ化するデバイス、幅広いプラットフォーム対応を解決するWebアプリケーションを構築します。
-
WordPress・CMS実装
WordPressをはじめとする様々なCMSへの実装が可能です。豊富なプラグインを活用するだけでなく、システム開発によるカスタマイズにも対応します。
WordPress・CMS実装を詳しく見る
-
Webサイト・システム 運用保守
Webサイトやシステム、CMSのエラー監視、セキュリティ対策、技術サポート、サーバやドメインの管理を代行します。
Webサイト・システム 運用保守を詳しく見る
-
CRO/ABテスト
Webサイトのボトルネックを分析し、改善施策と検証ステップを提案します。また、改善案は事前のアンケートで支持率が高い案を採用するため、勝率7割を維持しています。
CRO/ABテストを詳しく見る
-
デザインサーベイ・アンケート
300名のモニターを対象とした、定量のアドホック調査(カスタム調査、単発調査)を提供します。また、1回10万円の“デザイン調査”パッケージもご用意しています。
デザインサーベイ・アンケートを詳しく見る
-
Webコンサルティング
アクセス情報などの定量調査と競合比較やアンケートなどの定性調査を組み合わせ、Webサイトのボトルネックの発見と改善施策をご提案します。
Webコンサルティングを詳しく見る
-
Webセキュリティ対策
SSL化やIP制限、ベーシック認証、悪意あるスクリプトが実行されないようにするといった対策を行い、Webサイトの安全対策を行います。
業務・集客支援、自社サービス
-
不動産会社向け非対面営業ツール
アトリク(Atlicu)不動産会社様とエンドユーザーの追客〜契約までのコミュニケーションをお手伝いするチャットサービスを提供しています。
アトリク(Atlicu)を詳しく見る
-
Webサイト内アンケートツール
ティーチ(Teach)ログ分析では分からないWebサイト訪問者の声を集め、Webサイト改善の課題を得ることができる“Webサイト内アンケートツール”を提供しています。
ティーチ(Teach)を詳しく見る
-
Googleしごと検索対応
WebサイトをGoogle指定の形式に対応させ、貴社の求人情報がGoogleしごと検索(Google for jobs)に掲載されるようにします。
Googleしごと検索対応を詳しく見る
-
Googleデータポータル設定
Webサイト解析ログをワンクリック出力できる環境を構築します。レポート環境構築には無償で提供されている「Googleデータポータル」を使用します。
Googleデータポータル設定を詳しく見る
-
RFP作成コンサル
Webサイトをリニューアルする際の要件定義書を作成代行します。リニューアルを外部に依頼する際、何をどのように伝えるべきかを弊社でまとめ、納品します。
-
Webマスター育成講座
自社でWebサイトを運営する上で必要な基礎知識をお伝えし、Webサイトの効果アップを考え、制作会社に的確に依頼ができるWebマスターを育成する講座です。