WEBマーケティングのトータルサポートならディーエムソリューションズ株式会社
0120-934-226受付時間 平日9:00~18:00

SEOで効果的なHTMLコーディングタグ6つの使い方

このエントリーをはてなブックマークに追加

SEOで効果的なHTMLコーディングタグ6つの使い方

HTMLコーディングのルールをどこまで厳密にするか悩んでいる人も多いのではないでしょうか。こだわればこだわるほど、外注の場合は費用が高くなり、内製化できている場合は社内工数がかかると思います。
そこで今回は最低限押さえて欲しい、SEOで効果的なHTMLコーディングのタグについて解説していきます。

制作会社に依頼をする発注者や制作会社の方には、最低限押さえて欲しいタグとして理解をして頂きたいと思います。

SEOに効果的なコーディング

SEOに効果的で最低限押さえて頂きたいコーディングとは、HTMLの文法に沿った正しい用途でタグを使うことです。
HTMLにはバージョンがあり、今の最新はHTML5で1つ前はHTML4となっています。HTML4とHTML5では、タグの推奨用途が異なるものもあるので、HTML5でコーディングする場合は、HTML5のタグ用途で正しく使うことが求められます。

正しいコーディングは、検索エンジンのコンテンツ理解に役立ちます。理解されやすいサイト構成(検索エンジンに伝わりやすいサイト構成)にするためには、正しいコーディングの知識が必要です。

W3C標準のコーディング

外注先の制作会社や社内の制作部隊に対して、サイトの品質を管理する指標になるのがW3C標準のコーディングです。
W3CとはHTMLやCSSの規格を決めている団体で、Webサイトを作る上ではW3Cの決めた標準を守るべきとされています。正しいHTMLやCSSの書き方をするためには、守らなければならない基準です。

W3C標準のコーディングを行うことは、HTMLの正しい使い方を理解する上で役に立ちます。Webサイトを表示するブラウザもW3Cの基準に従う仕様になっているので、W3C標準のコーディングを行うことで表示崩れも防げます。

この基準を満たしているかどうかを判断するためには、以下のサイトが使えます。

https://validator.w3.org/

エラー状況も表示されるので、その内容に従ってサイト改善をすればW3Cに基づいたコーディングができます。

W3Cの高得点は、SEOで必ずしも絶対条件ではないので注意!

W3Cは正しいコーディングを目指すための指標となりますが、W3Cの得点を100点にすることが絶対条件ではありません。検索順位を上げるためには、サイトコンテンツの質の方がはるかにSEOに影響するからです。W3Cの基準にこだわりすぎて工数をかけすぎると、費用対効果が悪いので、ある程度までにしておきましょう。本記事でご紹介しているのは「ある程度の基準となるタグ」になりますので、要所を押さえて工数をかけず取り組むことができれば効率的にSEO効果を高めることができます。

HTMLタグの用途に忠実に使う

コンテンツのSEO効果を最大限に発揮するためには、HTMLタグの用途に忠実に従うのが重要なポイントです。HTMLタグには、それぞれルールや意図が込められています。HTMLタグを正しく使うことで、検索エンジンに対するコンテンツの理解を助けることができます。

HTMLタグの意味に沿ってコーディングすることを「セマンティックなコーディング」ともいいます。セマンティックなコーディングを目指すには、HTMLタグの意味を知ることが重要です。人間は表示されたデザインを見て「ここが見出しかな」「ここが強調されているな」と理解することができますが、検索エンジンは見た目から構造を理解することができません。HTMLを使って正しくサイトの構造を伝えることは、検索順位アップのためには欠かせない作業です。

HTMLタグの勉強をしたい場合、どうする? もし、セマンティックなHTMLコーディングを自力で目指したい人は、HTML5の資格「HTML5プロフェッショナル認定試験」を勉強するのもよいでしょう。私も実際に取得して「こんなタグがあったのか!」と気づきがありました。HTMLタグの意味だけではなく、SEOの基礎的な知識が身につくのでおすすめです。

タグにはたくさんの種類があるので、すべての意味を理解して使い分ける必要はありませんが、SEOの観点から需要なタグを把握して正しく使い分けることでSEO効果を高めることができます。

SEO対策で最低限押さえたいHTMLタグ6つ

SEO効果を最大限に発揮するために、最低限理解して使い分けたいHTMLタグとして、ここでは6つをご紹介します。紹介するのは以下のタグです。

  • <title>タグ
  • descriptionタグ
  • <h>タグ
  • <img>タグ(alt属性)
  • 箇条書きタグ(<ul>タグ<ol>タグ)
  • <a>タグ

これまでHTMLタグのコーディングをあまり意識していなかった…という方や、初心者の方は、ひとまず以下の内容を取り入れてみてください。

<title>タグの最適化

<title>タグとは、サイトやページにタイトルを付けるためのタグです。検索結果の表示画面、ブラウザのタブ、SNSURL共有したときに表示されるテキストを設定します。

titleタグとは

<title>タグの中には、ページの内容を明確に分かりやすく表現することが大切です。ユーザーの目にとまりやすい部分なので、このテキストの内容がクリック率も左右します。また、検索エンジンが検索順位を決めるための判断基準の一つにもなっているので、上位表示を狙いたいキーワードを盛り込むなど、内部施策としてのテクニックも意識することが大切です。

<title>タグの設定方法やSEOに効果的な中身の考え方については、以下の記事を参考にしてください。

titleタグ(タイトルタグ)とは?SEOを意識した最適な文字数と記述方法

descriptionタグの最適化

descriptionタグは、ページコンテンツを100文字程度の文章で表現した要約を設定するタグです。ここで設定したテキストは、検索結果画面などに表示され、ユーザーがそのサイトを見るかどうかを判断する基準となります。

descriptionタグとは

descriptionが検索順位に影響がないのですが、影響がないからと言って未設定にすると、検索エンジンが自動で生成した文章が表示されます。検索エンジンが生成した説明文は、日本語がおかしい文章になりえるので、ユーザーに不自然な印象を与えます。不自然な日本語だとクリックを期待することはできません。 サイト内容を端的に示したdescriptionを設定すると、ユーザーのクリック率を高める効果が期待できます。

正しい記述方法や効果的なテキストの考え方は以下の記事を参考にしてください。

meta description(メタディスクリプション)とは?SEOを意識した文字数と記述方法

見出しを意味する<h>タグを効果的に使う

<h>タグとは、ページの見出しを表現するタグで、ページ構成を伝えるために使われます。<h1>から<h6>まで6種類のタグがあり、適切に理解することで文章にメリハリがつき、読みやすいページになります。

特に、最も上位の見出し<h1>タグは「大見出し」とも呼ばれ、SEOの中でも重要な役割を果たします。重要なキーワードを盛り込むのを忘れないようにしましょう。

見出しタグの適切な設定方法については、以下の記事を参考にしてください。

<h1>~<h6>タグとは?見出しタグのSEOを意識した正しい使い方

画像にはalt属性をつける

alt属性とは、画像を埋め込む<img>タグに設定する画像の代替テキストのことです。画像にalt属性をきちんと設定することで、画像がどういったものかを検索エンジンに補足することができます。

基本的に、画像を使う際は、alt属性を設定するようにしましょう。alt属性を設定することは、コンテンツの評価を高め、画像検索と言ったSEOでも効果的です。

また、視覚障碍者の方にも役立ちます。視覚障碍者の方は、読み上げられた情報を基にコンテンツを理解します。画像にalt属性が付与されていれば、どんな画像が使われているのかを理解することができ、アクセシビリティの対応にも役立ちます。

alt属性の役割や設定方法は以下の記事もご参考ください。

<alt>属性とは?SEOにおける役割と効果的な使い方

箇条書きタグ(<ul>タグ、<ol>タグ)

箇条書きでコンテンツを説明する時は、<ul><ol>タグを使って表記しましょう。箇条書きタグを使ってコーディングすると、強調スニペット(Google検索結果画面の最上部に表示される仕組み)で表示される可能性を高めることもできます。

HTMLで箇条書きをマークアップするには、<ul><li><ol>3つのタグを使って箇条書きを表現できます。

普通の箇条書きを使う場合は、<ul><li>2つを使い以下のように記述します。

<ul>
 <li>1つめの項目</li>
 <li>2つめの項目</li>
 <li>3つめの項目</li>
</ul>

番号付きの箇条書きを使う場合は、<ul><ol>2つを使います。

<ul>
 <ol>1つめの項目</ol>
 <ol>2つめの項目</ol>
 <ol>3つめの項目</ol>
</ul>

箇条書きはユーザーに読み物を読みやすくするためにすることができるので、箇条書きで説明する箇所には上手に取り入れましょう。

<a>アンカーリンクにはキーワードを含める

サイト内にリンクを設置するときには<a>タグで囲み、タグで囲まれたテキストを「アンカーテキスト」と呼びます。アンカーリンクの中に、SEO効果を見込みたいテキストを入れることで、SEO評価を高めることが可能です。

アンカーリンクの埋め込みすぎに注意

アンカーリンクにキーワードを埋め込むことで、キーワードのSEO効果を高めることができますが、スパム扱いされないように詰め込みすぎに注意しましょう。自然な形であればキーワードは詰め込んでも問題ありません。

正しいアンカーテキスト設定については、以下の記事で詳しく解説しています。

アンカーテキストとは?SEOの観点から有効な使い方について

誤用に注意なタグ

ここまででSEO対策として必ず設定しておきたいタグについて解説をしましたが、逆に誤用に注意すべきタグもあります。間違った使い方をしていることで、SEOに悪影響を与える可能性もあります。

よくあるHTMLタグの誤用は、以下2点です。

  • グローバルナビゲーションでのhタグ利用
  • 強調タグの使い方

以下を読んで、もし間違った使い方をしていたら見直しましょう。

グローバルナビゲーションにhタグは使わない

グローバルナビゲーションとは、サイト内で共通して表示されている案内リンクのことです。当サイトであれば、以下の部分です。

グローバルナビゲーションとは

この部分を<h>タグでコーディングしている場合があります。<h>タグの役割は、コンテンツの見出しとしてテキストを構造化することにあるので、ナビゲーションの一部として並べて使うのには適していません。

グローバルナビゲーションを設置する時は、箇条書きの項目で紹介した<ul><li>タグを使いましょう。

<strong>や<em>に注意

本文中のテキストを強調するために太字の設定を行う際、<strong>タグや<em>タグを使う例があります。どれも結果としては太字に表示され、見た目の上ではあまり違いがないように思います。しかし、それぞれのタグが持つ意味合いは違うので、役割を正しく理解してここぞという場面で使うようにしましょう。

<strong>タグは、囲んだテキストが重要であることを示す目的で使います。コンテンツ内の結論など、コンテンツの核となるテキストに使うのが正しい使い方です。<strong>タグ内でさらに<storng>タグを入れ子にすることで、重要性の強さを強調できます。ここぞという部分で使いましょう。重要ではないが太字で表示したいという場合は、<strong>タグではなく<b>タグや<span>タグのCSS調整でマークアップするようにしましょう。

<em>タグは、囲んだテキストを強調する役割があります。重要性を示す役割はありません。ブラウザでは斜体で表現されます。文章のどの部分を強調するかによって細かなニュアンスが変わってきます。単に斜体にしたいだけ(会話文を表現したいときなど)であれば、<i>タグを使いましょう。

おわりに

SEO対策を考えるときには、コンテンツの内容と合わせて適切なHTMLコーディングが重要です。せっかく作成した良いコンテンツの価値を最大限に利用するためにも、内部施策を徹底しましょう。

HTMLタグには沢山の種類があるので、すべてを覚えて網羅しようと思うと初心者には負担となります。ただ、SEO対策という観点で考えると、おさえるべきタグはほんの一部です。まずはこの記事でご紹介したタグについてしっかりと設定をしましょう。

 

このエントリーをはてなブックマークに追加
The following two tabs change content below.
digital-marketing

digital-marketing

デジタルマーケティング研究所では、デジタルマーケティングの施策・広告・技術を、分析・実装・検証して、WEB担当者・マーケティング担当者の方の役立つ情報を発信していきます。
SNSでフォロー

Contact

Webマーケティングに関わる施策全般をワンストップでご提供します。
お気軽にご相談ください。

Webマーケティング最新情報をお届け
東京営業所
東京都新宿区西新宿1丁目6-1 新宿エルタワー3階
電話番号 03-6374-1393 FAX番号 0422-57-2761
大阪営業所
大阪府大阪市北区堂島1丁目5-30 堂島プラザビル10F
電話番号 06-7176-3367 FAX番号 06-7176-3368
Copyright © 2020 DM SOLUTIONS Co.,Ltd. All rights reserved.