最終更新日:2020年4月14日

SEO効果のあるHTMLタグを「重要度」順に紹介

当記事は、HTMLタグのなかで「特に重要なもの」を選んで紹介しています。

重要なHTMLタグから順番に紹介していますので、その順番どおりに作業をすれば「最小の労力」と「最短の時間」で効率よくSEOを進めることができます。

なお、詳細説明ページがあるHTMLタグについてはリンクが貼ってあります。

また、リンクタグ( aタグ)について知りたい方は次のページをご覧ください。

重要なHTMLタグ1位は「タイトルタグ <title>」

タイトルタグは、検索結果に表示される「ウェブページのタイトル」を設定するためのものです。具体例を紹介します。

下の画像は Google の検索結果ページです

Googleの検索結果に表示されているページタイトルを説明した画像

この画像の赤枠部分に表示されているのが、タイトルタグに設定した文章です。

タイトルタグが SEOで1番重要なHTMLタグである理由

タイトルタグは、HTMLタグのなかで一番SEO効果が高いタグです。

なぜかというと、次の 2つに大きく影響するからです。

  • 検索順位
  • 検索結果でのクリック率

したがって、SEO で HTMLを改善する場合は「まず」タイトルタグから取り組むことをオススメします。

タイトルタグの書き方とSEO効果をあげるポイント

タイトルタグのHTMLの書き方は次のとおりです。

<title>ここにページタイトルを記述します。</title>

そして、タイトルタグのSEO効果をあげるポイントは次の4つです。

  • 検索キーワードを入れる
  • 文字数は 28文字以内
  • 検索ユーザーの興味をひく内容
  • 記号を使って目立たせる

タイトルタグのSEO効果を上げるポイントについては次の記事で詳しく説明していますので、そちらをご覧ください。

また、他にも次のような記事がありますので興味のある方はご覧ください。

重要なHTMLタグ 2位は「メタディスクリプション」

メタディスクリプションは、検索結果に表示される「ウェブページの説明文」を設定するためのものです。具体例を紹介します。

下の画像は Google の検索結果ページです

Google検索結果に表示されるメタディスクリプションの説明画像

この画像の赤枠部分に表示されているのがメタディスクリプションです。

メタディスクリプションが SEOで2番目に重要なHTMLタグである理由

メタディスクリプションは、HTMLタグのなかで 2番目に SEO効果が高いタグです。

なぜかというと「検索結果でのクリック率」に大きく影響するからです。

ウェブページが検索結果の上位に表示されるようになっても、クリック率が低ければウェブページの集客は「それほど」増えません。そのため、SEOではクリック率を上げるということも重要です。

したがって、SEO で HTMLを改善する場合は「先述したタイトルタグと一緒に」メタディスクリプションの改善も行いましょう。

メタディスクリプションの書き方とSEO効果をあげるポイント

メタディスクリプションのHTMLの書き方は次のとおりです。

<meta name="description" content="ここにページ説明文を記述します。" >
                    

メタディスクリプションのSEO効果を高めるポイントは、次の2つです。

  • 検索(SEO)キーワードを入れる
  • 省略されない文字数で設定する

メタディスクリプションのSEO効果を上げるポイントについては次の記事で詳しく説明していますので、そちらをご覧ください。

【関連知識】SNSでのページ説明文は「メタタグ OGP」で設定

Facebook や Twitter に表示されるウェブページの説明文は、通常、Facebook や Twitter のシステムが自動作成したものが表示されます。

そのため、ウェブページの内容や魅力が十分に伝わらないことがあります。

Facebook や Twitter に表示されるウェブページの説明文を「自分の意図したものにする」ためのHTMLが「メタタグのOGP」です。

Facebook や Twitter からの集客を強化したいという場合は「メタタグのOGP」の設定もしておきましょう。設定方法については次の記事で詳しく説明していますので、そちらをご覧ください。

重要なHTMLタグ 3位は「 見出しタグ <h1> 〜 <h6> 」

見出しタグは「ウェブサイトの閲覧者」と「検索エンジン」に対してウェブページの見出しを伝えるためHTMLタグです。

ウェブページの見出しと聞くと難しく聞こえますが、そんな事はありません。私たちが、いつも読んでいる新聞や雑誌、書籍などにある見出しと同じ意味です。

新聞の見出しを赤線で囲んだイラスト

上記画像の赤枠部分は「新聞の見出し」ですが、ウェブページの見出しもこれと同じです。

見出しタグ(hタグ)が SEOで3番目に重要なHTMLタグである理由

見出しタグ(hタグ)は、HTMLタグのなかで 3番目に SEO効果が高いタグです。

その理由は次の2つです。

  • 検索順位の上昇が期待できる(効果は低い)
  • 閲覧者が読みやすいページになる

まず一つ目ですが、見出しタグを適切に使用すると少しだけですが検索順位の上昇が期待できます。

そして、二つ目は閲覧者が読みやすいページになることです。具体的には次のとおり。

見出しタグを使用したウェブページのサンプル画像
見出しタグを使用していないウェブページのサンプル画像

上記 2つを見比べると、ほとんどの人が「見出しがある上のページの方が見やすい」と感じるはずです。このように、見出しの有無で「ウェブページの読みやすさ」は大きく変わります。

読みづらいページは「まず」最後まで読んでもらえません。

SEOで検索エンジンからの集客を増やしても、ウェブページの内容を読んでもらえないようではSEOをする意味が「あまり」ありません。

以上が、見出しタグが SEOで3番目に重要なHTMLタグである理由です。

見出しタグ(hタグ)の書き方とSEO効果をあげるポイント

見出しタグのHTMLの書き方は次のとおりです。

<h1>大見出し</h1>
                        <h2>中見出し</h2>
                        <h3>小見出し</h3>
                        <h4>小小見出し</h4>
                        <h5>小…見出し</h5>
                        <h6>小……見出し</h6>
                    

見出しタグを使用する順番

<h1> → <h2> → <h3> → <h4> → <h5> → <h6>

見出しタグ(hタグ)のSEO効果を高めるポイントは次の3つです。

  • h1タグとタイトルタグは同一にする
  • テキストを使用【画像の場合は alt が必須】
  • <h2> から <h6> に関連キーワードを入れる

見出しタグ(hタグ)のSEO効果を上げるポイントについては次の記事で詳しく説明していますので、そちらをご覧ください。

重要なHTMLタグ 4位は 2つ「 alt属性と引用タグ 」

HTMLタグのなかで4番目に重要なのは次の 2つです。

  • alt属性 … 画像の説明文を記述する
  • 引用タグ … <blockquote> と <q>

上記 2つの重要度は「ほぼ同じ」なので、取り組みやすい方から最適化してください。

また、後述する 5位のHTMLタグの重要度も上記 2つと同じです。しかし、設定が少し難しいため「あえて」5位にしました。

それでは「 alt属性と引用タグ 」について順番に説明します。

画像のalt属性

画像のalt属性は「その画像がどんな内容か」を説明するためのものです。

alt属性が SEOで重要なHTMLタグである理由

alt属性がSEOで重要な理由は検索エンジンが画像の内容を理解できないからです。

根拠となるのは Google公式サイトの次の記述です。

重要な名前、コンテンツ、リンクの表示には画像を使用しないでください。Google のクローラでは、画像に含まれるテキストを認識できません。

ページの主要なコンテンツとキーワードを通常の HTML 形式で記述できない場合は、ALT属性を使用してください。

引用:Google と相性の良いサイトを作成する方法

もし、あなたが検索エンジンだったら次のどちらを高く評価しますか?

  • 画像の内容が分かるページ
  • 画像の内容が分からないページ

おそらく「画像の内容が分かるページ」でしょう。

以上のような理由から、画像のalt属性はSEOで重要といえます。

alt属性の書き方(HTMLの記述)

alt属性のHTMLの書き方は次のとおりです。

<img src="../images/sample.jpg" alt="画像の説明文を記述します" />

alt属性に設定する文章の具体例は次のとおり(Google公式サイトより引用)。

  • 良い例:子犬
  • 最も良い例:投げたものを取ってくるダルメシアンの子犬

また、alt 属性の禁止事項として次の点をGoogleはあげています。

  • alt テキストにキーワードを並べたり、文章全体をコピー&ペーストしたりする
  • スパムと見なされるような長すぎる alt テキストを記述する。

上記の禁止事項をしているページを紹介したのが次の記事です(真似しないようにしてください)。

引用タグ <blockquote> と <q>

引用タグは、自分のウェブサイトに他人の著作物を掲載する時に使用するHTMLタグです。具体的には、次のようなものを引用する時に使用します。

  • 他人のウェブサイトに使用されている文章・画像・統計データなど
  • 自分以外の人が執筆した書籍の内容全般

引用タグがSEOで重要なHTMLタグである理由

引用タグが重要な理由は「著作権の侵害をしない」ことと、それが理由でGoogleからSEOペナルティを受けるのを防ぐためです。

引用タグ <blockquote> と <q>の書き方(HTMLの記述)

引用タグ <blockquote> と <q>の書き方は次のとおりです。


                                    <blockquote>
                                    <p>ここに引用する文章を記述。</p>
                                    
                                    <footer>引用:<cite><a href="引用するウェブページのURL">引用するウェブページのタイトル</a></cite></footer>
                                    </blockquote>
                                

                                                <p><cite>引用元の情報<cite> ... <q cite=“引用元のURL">引用するフレーズ </q> ... <p>
                                        

引用タグについて詳しく知りたい方は、次の記事をご覧ください。

重要なHTMLタグ 5位は 2つ「canonical属性、noindexメタタグ」

HTMLタグのなかで 5番目に重要なのは次の 2つです。

  • canonical属性
  • noindex

上記の2つのHTMLタグに関しては慎重に設定する必要があります。理由は、間違った設定をしてしまうと次のようなことが起こるからです。

  • 検索結果にページが表示されない
  • 自分の意図していないページが検索結果に表示される

設定するのが不安…という人は無理する必要はないかと思います。

なお、重要度は「ほぼ同じ」なので取り組みやすい方から最適化してください。

それでは「 canonical属性、noindexメタタグ 」について順番に説明します。

canonical属性

canonical属性は「同じような内容のページ」がウェブサイトに 2ページ以上ある場合に記述するHTMLです。

具体例をあげると、通販サイトなどで「同じ商品の色違いページ」がある場合等です。

同じ商品の色違いページがある

  • カバン:トートバッグ(茶色)
  • カバン:トートバッグ(白色)
  • カバン:トートバッグ(黒色)

このような場合に「どのページをオリジナルとして扱ってほしいか」を検索エンジンに伝えるのが canonical属性の役割です。

ちなみに、このようなSEOの作業をURL正規化といいます。

canonical属性がSEOで重要なHTMLタグである理由

canonical属性が重要な理由は次のような状況を防ぐためです。

  • 被リンクが分散して検索順位が上がりづらくなる
  • 重複コンテンツとしてペナルティを受ける可能性がある
  • クローラーの巡回効率が悪くなる

canonical属性の書き方(HTMLの記述)

canonical属性のHTMLの書き方は次のとおりです


                            <link rel="canonical" href="優先して表示したいページのURL" />
                    

canonical属性の書き方は上記を入れて全部で5パターンあります。詳しくは次の記事で説明していますので、そちらをご覧ください。

noindex(メタタグ)

noindex は「検索エンジンにとって価値の低いページ」を検索エンジンにインデックス(登録)しないように指示するためのものです。

noindexがSEOで重要なHTMLタグである理由

noindexが SEOで重要な理由は、ウェブサイトの評価が下がるのを防ぐためです。

もう少し言うと、ウェブサイトに「価値の低いページ」が少しでもあると「ウェブサイト全体の評価が下がる可能性があるので、それを防ぐために「noindex」を記述します。

根拠となるのがGoogle公式サイトの次の記述です。

低品質なコンテンツがサイトの一部にしか存在しない場合でも、サイト全体の掲載順位に影響を与えることがあるということにご注意ください。

引用:良質なサイトを作るためのアドバイス

noindexの書き方(HTMLの記述)

noindexの書き方は次のとおりです。


                    <meta name="robots" content="noindex" />
                                

上記コードを「検索エンジンにインデックス(登録)しない」ページに記述します。詳しい書き方については次の記事でまとめていますので、そちらをご覧ください。


以上で、当記事の内容は終了です。

おわり

タグ:

SEOまとめ記事

トップへ戻るボタン