Google Page Speed Insightsの使い方を解説！ページの表示スピードを上げよう
高速化
SEOに最適化した8個のHTMLコーディング【注意点も解説】
SEOで上位表示を獲得するためには、検索エンジンにコンテンツの内容を分かりやすく伝えなければなりません。そのためには、SEOに最適化したHTMLコーディングを行うことが大切です。
昨今、GoogleのロボットはHTMLコーディングにエラーがあったとしても、コンテンツの内容は理解できると言われています。しかし、競合のコンテンツ以上に適切に評価してもらうためには、いくらロボットが内容を理解できると言っても、最適化するに越したことはありません。
そこで本記事では、HTMLコーディングの概要を解説するとともに、SEOに最適化したHTMLコーディングを8つご紹介します。また、HTMLコーディングと併せて重要な構造化マークアップに関しても解説しますので、ぜひ参考にしてください。
この記事の執筆者
アダムテクノロジーズ執行役員
SEOコンサルタント
株式会社アダムテクノロジーズ 執行役員。
ユーザーニーズと最も近いSEO対策で、あらゆるビジネスを加速させ、より良い社会の実現を目指す。
入社から5年間で100社以上のSEO対策に従事し、様々なジャンル・キーワードでの上位表示を実現。顧客目線での目標達成にコミットしたSEOコンサルティングが強み。
目次
表示
閉じる
HTMLコーディングとは
まずは、HTMLコーディングの概要からご説明します。HTMLコーディングとは、見出し（h）タグやtitleタグといったマークアップ言語を正しく記載することです。Webサイトや記事コンテンツは、その大半がHTMLと呼ばれるマークアップ言語で構成されています。
検索エンジンは、これらのマークアップ言語に記載されている内容を中心にコンテンツを評価するため、適切にHTMLコーディングをすることで、SEO評価が高まる可能性があります。
一方で、たとえば見出しではないテキストにhタグを記述してしまったり、タイトルでないテキストにtitleタグを配置してしまったりすると、検索エンジンに正しく評価してもらうことができません。だからこそ、適切にコンテンツを評価してもらうために、正しくコーディングすることが大切であると理解しておきましょう。
SEOに最適化したHTMLコーディング8選
ここまで、HTMLコーディングの概要を解説しました。ここからは、SEOに最適化したHTMLコーディングを8つご紹介します。
- title
- meta
- h
- p
- alt
- li
- a
- canonical
それぞれ順番に見ていきましょう。
titleタグ
titleタグは、Webサイトやコンテンツのタイトルを決める際に使うタグです。titleタグに設定した文言が検索結果に表示される仕組みとなっており、32文字前後での設定が最もSEOに効果的だと言われています。また、Googleのクローラーもtitleタグに書かれている内容を重要視しているため、検索順位を上げるためにも確実に設定するべきタグと言えるでしょう。
SEOに強いタイトルの付け方！7つのポイントを徹底解説metaタグ
metaタグはdescriptionやkeyword等の、コンテンツの内容を補足するためのタグです。
タグ内に、コンテンツで狙っているキーワードを含めた情報を記述します。特に、descriptionは検索結果のタイトル下に表示されるため、クリック率やユーザーの理解を深める要素として重要です。hタグ
hタグは、コンテンツに見出しを作る際に使うタグです。h1〜h6まで存在し、h1はコンテンツ内に1つに留めるのが良いとされています。
適切なhタグの構造
hタグは、適切に記述しなければ正しいSEO評価を享受できません。具体的な使い方は下記のとおりです。
テキスト
テキスト
テキスト
テキスト
テキスト
Googleは、hタグに書かれているテキストをコンテンツの内容を理解する際に役立てているため、hタグにもSEOで狙っているキーワードを含めることが重要です。
h1を使用したら次はh2、h2を使用したら次はh2もしくはh3と、1つ先の数字へと飛ばす使い方をしてはいけないと言われていました。 たとえば「h2→h4」のようにです。
しかし、最近Googleによると上記の例のように「h2→h4」と利用してもSEO的には大きな影響を受けないと公表しました。 h1を使用したら次はh2、h2を使用したら次はh2もしくはh3といった様に使うことが望ましいですが、h1タグを大量に使うといった明らかにおかしなコーディングをしなければ問題ないでしょう。
pタグ
pタグは、文章に段落を作りたい場合に使うタグです。段落を作ることによって視認性が高まり、離脱率や直帰率を抑えられることに繋がります。なお、改行時に使用する「br」タグとは種類が異なります。brはあくまで改行であり、pタグは段落を作る際に使用するため、pタグを正しく使うことで検索エンジンが文章の内容を理解しやすくなります。
altタグ
altタグは、画像の意味を検索エンジンに伝えるために使うタグです。画像を表示する際に必要となるimg要素の1つであり、画像が何らかの原因で表示されない場合は、altタグに記述されたテキストが代替えとして表示されます。また、画像にリンクを貼る際はアンカーテキストと同じ役割を果たしたり、画像検索の場合はaltに記述されたテキストが表示されたりします。
alt属性とは？具体的な記述方法やSEO対策の効果についてli（リスト）タグ
li（リスト）タグは、箇条書きを作る際に使用するタグです。リストタグを使うことで、pタグよりも重要なテキストであると検索エンジンが認識すると言われています。なお、liタグを使う際は、「ul」タグで囲めば通常の箇条書きになり、「oll」タグで囲めば数字付きの箇条書きになることが特徴です。
aタグ
aタグは、別のコンテンツへの誘導を図る場合に使うタグです。内部リンクを貼る際は＜a href=”リンク先のURL”＞テキストであり、外部リンクを貼る際は＜a href=”リンク先のURL” target=”_blank”＞テキスト＜/a＞を使用します。
canonicalタグ
canonicalタグは、Webサイトの中で重複コンテンツが発生してしまった場合に、どのページを最も評価してほしいかを検索エンジンに伝えるタグです。1つのキーワードに対して、複数のコンテンツがインデックスされるとSEOに悪影響をもたらすため、SEO評価を1つに集中させたい場合に記述します。
SEOでは構造化マークアップも重要
ここまで、SEOに効果的なHTMLコーディングを解説してきました。それらを踏まえた上で、SEOでは構造化マークアップも重要です。構造化マークアップとは、Googleのクローラーに対して、自社のコンテンツを適切に理解してもらうための記述方法のことです。構造化マークアップを実装することで、検索エンジンが言葉の意味まで詳細に理解できるようになるため、SEOでも良い評価を得られる可能性が高まります。
ただし、構造化マークアップも重要ではあるものの、それは適切にHTMLコーディングができている前提の話です。したがって、まずは上述したHTMLコーディングを最適化させることから始めましょう。
構造化データとは？SEOへの影響と書き方を初心者向けに解説まとめ
本記事では、HTMLコーディングの概要や、代表的なコーディングの種類を解説しました。検索エンジンに内容を正しく理解し、適切に評価してもらうためには、コーディングも最適化させることが大切です。まずは、本記事でご紹介したコーディングがすべて完璧であるかを見直し、今後も抜け漏れのないようコーディングしてみてはいかがでしょうか。