HTMLコーディングのルールをどこまで厳密にするか悩んでいる人も多いのではないでしょうか。こだわればこだわるほど、外注の場合は費用が高くなり、内製化できている場合は社内工数がかかると思います。
そこで今回は最低限押さえて欲しい、SEOで効果的なHTMLコーディングのタグについて解説していきます。
制作会社に依頼をする発注者や制作会社の方には、最低限押さえて欲しいタグとして理解をして頂きたいと思います。
SEOに効果的で最低限押さえて頂きたいコーディングとは、HTMLの文法に沿った正しい用途でタグを使うことです。
HTMLにはバージョンがあり、今の最新はHTML5で1つ前はHTML4となっています。HTML4とHTML5では、タグの推奨用途が異なるものもあるので、HTML5でコーディングする場合は、HTML5のタグ用途で正しく使うことが求められます。
正しいコーディングは、検索エンジンのコンテンツ理解に役立ちます。理解されやすいサイト構成（検索エンジンに伝わりやすいサイト構成）にするためには、正しいコーディングの知識が必要です。
外注先の制作会社や社内の制作部隊に対して、サイトの品質を管理する指標になるのがW３C標準のコーディングです。
W3CとはHTMLやCSSの規格を決めている団体で、Webサイトを作る上ではW3Cの決めた標準を守るべきとされています。正しいHTMLやCSSの書き方をするためには、守らなければならない基準です。
W3C標準のコーディングを行うことは、HTMLの正しい使い方を理解する上で役に立ちます。Webサイトを表示するブラウザもW3Cの基準に従う仕様になっているので、W3C標準のコーディングを行うことで表示崩れも防げます。
この基準を満たしているかどうかを判断するためには、以下のサイトが使えます。
エラー状況も表示されるので、その内容に従ってサイト改善をすればW3Cに基づいたコーディングができます。
W3Cは正しいコーディングを目指すための指標となりますが、W3Cの得点を100点にすることが絶対条件ではありません。検索順位を上げるためには、サイトコンテンツの質の方がはるかにSEOに影響するからです。W3Cの基準にこだわりすぎて工数をかけすぎると、費用対効果が悪いので、ある程度までにしておきましょう。本記事でご紹介しているのは「ある程度の基準となるタグ」になりますので、要所を押さえて工数をかけず取り組むことができれば効率的にSEO効果を高めることができます。
コンテンツのSEO効果を最大限に発揮するためには、HTMLタグの用途に忠実に従うのが重要なポイントです。HTMLタグには、それぞれルールや意図が込められています。HTMLタグを正しく使うことで、検索エンジンに対するコンテンツの理解を助けることができます。
HTMLタグの意味に沿ってコーディングすることを「セマンティックなコーディング」ともいいます。セマンティックなコーディングを目指すには、HTMLタグの意味を知ることが重要です。人間は表示されたデザインを見て「ここが見出しかな」「ここが強調されているな」と理解することができますが、検索エンジンは見た目から構造を理解することができません。HTMLを使って正しくサイトの構造を伝えることは、検索順位アップのためには欠かせない作業です。
HTMLタグの勉強をしたい場合、どうする？ もし、セマンティックなHTMLコーディングを自力で目指したい人は、HTML5の資格「HTML5プロフェッショナル認定試験」を勉強するのもよいでしょう。私も実際に取得して「こんなタグがあったのか！」と気づきがありました。HTMLタグの意味だけではなく、SEOの基礎的な知識が身につくのでおすすめです。
タグにはたくさんの種類があるので、すべての意味を理解して使い分ける必要はありませんが、SEOの観点から需要なタグを把握して正しく使い分けることでSEO効果を高めることができます。
SEO効果を最大限に発揮するために、最低限理解して使い分けたいHTMLタグとして、ここでは6つをご紹介します。紹介するのは以下のタグです。
これまでHTMLタグのコーディングをあまり意識していなかった…という方や、初心者の方は、ひとまず以下の内容を取り入れてみてください。
<title>タグとは、サイトやページにタイトルを付けるためのタグです。検索結果の表示画面、ブラウザのタブ、SNSでURL共有したときに表示されるテキストを設定します。
<title>タグの中には、ページの内容を明確に分かりやすく表現することが大切です。ユーザーの目にとまりやすい部分なので、このテキストの内容がクリック率も左右します。また、検索エンジンが検索順位を決めるための判断基準の一つにもなっているので、上位表示を狙いたいキーワードを盛り込むなど、内部施策としてのテクニックも意識することが大切です。
<title>タグの設定方法やSEOに効果的な中身の考え方については、以下の記事を参考にしてください。
descriptionタグは、ページコンテンツを100文字程度の文章で表現した要約を設定するタグです。ここで設定したテキストは、検索結果画面などに表示され、ユーザーがそのサイトを見るかどうかを判断する基準となります。
descriptionが検索順位に影響がないのですが、影響がないからと言って未設定にすると、検索エンジンが自動で生成した文章が表示されます。検索エンジンが生成した説明文は、日本語がおかしい文章になりえるので、ユーザーに不自然な印象を与えます。不自然な日本語だとクリックを期待することはできません。 サイト内容を端的に示したdescriptionを設定すると、ユーザーのクリック率を高める効果が期待できます。
正しい記述方法や効果的なテキストの考え方は以下の記事を参考にしてください。
<h>タグとは、ページの見出しを表現するタグで、ページ構成を伝えるために使われます。<h1>から<h6>まで6種類のタグがあり、適切に理解することで文章にメリハリがつき、読みやすいページになります。
特に、最も上位の見出し<h1>タグは「大見出し」とも呼ばれ、SEOの中でも重要な役割を果たします。重要なキーワードを盛り込むのを忘れないようにしましょう。
見出しタグの適切な設定方法については、以下の記事を参考にしてください。
alt属性とは、画像を埋め込む<img>タグに設定する画像の代替テキストのことです。画像にalt属性をきちんと設定することで、画像がどういったものかを検索エンジンに補足することができます。
基本的に、画像を使う際は、alt属性を設定するようにしましょう。alt属性を設定することは、コンテンツの評価を高め、画像検索と言ったSEOでも効果的です。
また、視覚障碍者の方にも役立ちます。視覚障碍者の方は、読み上げられた情報を基にコンテンツを理解します。画像にalt属性が付与されていれば、どんな画像が使われているのかを理解することができ、アクセシビリティの対応にも役立ちます。
alt属性の役割や設定方法は以下の記事もご参考ください。
箇条書きでコンテンツを説明する時は、<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>タグで囲み、タグで囲まれたテキストを「アンカーテキスト」と呼びます。アンカーリンクの中に、SEO効果を見込みたいテキストを入れることで、SEO評価を高めることが可能です。
アンカーリンクにキーワードを埋め込むことで、キーワードのSEO効果を高めることができますが、スパム扱いされないように詰め込みすぎに注意しましょう。自然な形であればキーワードは詰め込んでも問題ありません。
正しいアンカーテキスト設定については、以下の記事で詳しく解説しています。
ここまででSEO対策として必ず設定しておきたいタグについて解説をしましたが、タグの使い方やコーディング時に気を付けたいポイントがあります。
まず、よくあるHTMLタグの誤用を以下2点、紹介します。
以下を読んで、もし間違った使い方をしていたら見直しましょう。
グローバルナビゲーションとは、サイト内で共通して表示されている案内リンクのことです。当サイトであれば、以下の部分です。
この部分を<h>タグでコーディングしている場合があります。<h>タグの役割は、コンテンツの見出しとしてテキストを構造化することにあるので、ナビゲーションの一部として並べて使うのには適していません。
グローバルナビゲーションを設置する時は、箇条書きの項目で紹介した<ul><li>タグを使いましょう。
本文中のテキストを強調するために太字の設定を行う際、<strong>タグや<em>タグを使う例があります。どれも結果としては太字に表示され、見た目の上ではあまり違いがないように思います。しかし、それぞれのタグが持つ意味合いは違うので、役割を正しく理解してここぞという場面で使うようにしましょう。
<strong>タグは、囲んだテキストが重要であることを示す目的で使います。コンテンツ内の結論など、コンテンツの核となるテキストに使うのが正しい使い方です。<strong>タグ内でさらに<storng>タグを入れ子にすることで、重要性の強さを強調できます。ここぞという部分で使いましょう。重要ではないが太字で表示したいという場合は、<strong>タグではなく<b>タグや<span>タグのCSS調整でマークアップするようにしましょう。
<em>タグは、囲んだテキストを強調する役割があります。重要性を示す役割はありません。ブラウザでは斜体で表現されます。文章のどの部分を強調するかによって細かなニュアンスが変わってきます。単に斜体にしたいだけ（会話文を表現したいときなど）であれば、<i>タグを使いましょう。
SEOで意識してほしいHTMLタグや誤用されやすいタグを解説しましたが、よりSEOに強いコーディングを求めるなら表示速度を意識したコーディングを行うとよいでしょう。なぜなら、表示速度はSEO順位を決めるアルゴリズムの1つだからです。
コーディング次第で、ページの表示速度が遅くも早くもなるので、コーダーと事前に連携しておくべきでしょう。ページの中身によって表示速度を意識したコーディングポイントは変わりますが、一般的に表示速度を意識したコーディングポイントは以下の4つが挙げられます。
表示速度とSEOに関する記事は下記でも紹介しておりますので、表示速度とSEOの意識がなかった方は併せてご確認ください。
⇒ページ表示速度が遅いとSEOに影響があるのか？改善方法とは？
HTMLの文法に沿った正しいコーディングをすることは、検索エンジンに対するコンテンツの理解を助けることにつながります。単にHTMLコーディングを行えばいいというわけではなく、コンテンツのSEO効果を最大限に発揮するためにHTMLタグを正しく使うことが重要です。
最低限コーディングしておくべきHTMLタグは、<title>タグ、descriptionタグ、見出しタグ、画像のalt属性、箇条書きタグ、アンカーテキストの設定です。何を始めればいいか分からない方も、まずはこの6つを理解しましょう。
HTMLを確認するには、ページのソースコードを表示して確認することができます。もしくはHTMLコーディングのチェックツールを利用して文法をチェックする方法があります。
今されているサイト運用の仕組みによって異なります。例えばWordPressのエディターで設定できる場合は、タグ知識があればいつでも修正できるでしょう。
HTMLタグには沢山の種類があり、コンテンツの内容と合わせて適切なHTMLコーディングをしなければいけないため初心者の方には負担になるかもしれません。また、コンテンツの効果をより最大限に活かすには、併せて内部施策を行うことが重要です。もしHTMLコーディングの書き方が分からない場合は、サイト診断可能な当社のSEOコンサルティングサービスにご相談ください。
SEO対策を考えるときには、コンテンツの内容と合わせて適切なHTMLコーディングが重要です。せっかく作成した良いコンテンツの価値を最大限に利用するためにも、内部施策を徹底しましょう。
HTMLタグには沢山の種類があるので、すべてを覚えて網羅しようと思うと初心者には負担となります。ただ、SEO対策という観点で考えると、おさえるべきタグはほんの一部です。まずはこの記事でご紹介したタグについてしっかりと設定をしましょう。
SEOを意識したHTMLタグを用いることや表示速度を意識したコーディングは、どこの制作会社もできるわけではありません。SEOに必要なコーディングは、作成するページごとに指示が異なりますので、SEOに知見がある会社に任せるのが推奨です。私は前の会社で色々な制作会社に任せたこともありますが、SEOを意識したコーディングの提案を受けることはありませんでした。
当社はSEOコンサルティングとWEB制作サービスの2つを持ったWEBマーケティング会社です。Webサイト制作時にSEO要件を見たいしたい場合は当社に是非ご相談ください。
ビジネスの成功に必要なコミュニケーション戦略を策定する中で、重要な位置づけになりうるのがSEOです。サービス認知に悩みを抱える多くの企業は、…
サイト運営に欠かせないのが「サーバー」です。サーバーがサイトの命運を左右する、と言うサイト運営者もいるほど、サーバー選択は重要度の高い要素と…
構造化データとは、HTMLの文字列を検索エンジンに理解してもらうためにタグ付けを行ったものです。構造化データにはさまざまな仕組みや書き方があ…
「WordpressはSEOに強い」 漠然と、こういったイメージをお持ちの方も多いと思います。 しかし、「Wordpressで作成したサイト…
Web制作をするにあたって、WordPressを使ってサイト構築をしている担当者も多いと思います。更新や管理がスムーズにでき、かつSEO対策…
ページ内リンクとは、htmlソースに<a>と</a>にURLが記載されたタグのURLリンクです。リンク箇所は<…
今話題のAIによるコンテンツ自動生成機能も！SEO対策に本当に必要な機能だけを搭載した使いやすさとコストパフォーマンスに優れたWeb集客支援ツールです。
Webマーケティングに関わる施策全般をワンストップで
ご提供します。
お気軽にご相談ください。
Webマーケティング最新ニュースのレポートや無料セミナーの先行案内が届く、お得なメルマガ配信中！
検索順位で1位まで上げるためのSEOポイント8つ
EEATとは？コンテンツ評価を高める12のSEOポイント
成功確率アップ！BtoBのコンテンツマーケティング施策とは
YMYLとは？該当するジャンルとSEOにおける対策のポイント8つ
SEO内部施策とは？重要な項目16選【セルフチェックリストつき】