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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

見出しタグ（hタグ）が SEOで３番目に重要なHTMLタグである理由

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

上記 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つです。

上記の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" />
                                

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

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

おわり

当記事の内容が役にたったという方は、ぜひ、他の方に紹介してください。