›SEOで注意したいHTMLタグの使い方【コーディングのポイント】SEOで注意したいHTMLタグの使い方【コーディングのポイント】2022年07月26日HTMLを正しく使うことは、SEOにおいて重要な要素です。本コラムでは、そもそもHTMLがなぜSEOの観点で大切なのかを解説した上で、SEOで注意したいHTMLタグの使い方を15個(8タグ)ご紹介します。SEOに即したHTMLコーディングについて知りたい方はぜひご覧ください。href=””>HTMLのチェックに便利なツール基本的なSEOの設定が可能なホームページ作成ソフトSEOにおけるHTMLの重要性SEOの観点から見たとき、HTMLは「Googleなどの検索エンジンに、ページの内容を正しく理解・評価してもらう点」で重要です。そもそもHTMLとは、Webページ内の要素の意味合い・位置づけをタグづけるためのものです。ページ内に文が複数並んでいるときに、それらを「大見出し」「段落」などとマーキングすることができます。関連記事ホームページをHTMLで作成する手順をゼロから解説【テンプレートも紹介】そして、Googleなどの検索エンジンは、ページの内容を生の文章だけでなくHTMLの形式で処理します。「この文は大見出し」とHTMLでタグづけした場合、検索エンジンもそれに沿って解釈することになります。したがって、コンテンツの内容を検索エンジンに適切に伝えるには、HTMLを正しい状態(文章の内容と合致している状態)にすることが大切です。逆に言えば、不適切なHTMLでページを構成した場合、せっかく質が高い文章であっても正しく評価してもらえないリスクが発生してしまいます。SEOで注意したいHTMLタグの使い方HTMLにはたくさんのタグが存在しますが、SEOの観点で特に注意して使いたいものを8種類解説します。<title><title>はページのタイトルを定義するタグです。あなたのWebサイト上ではなく、Googleなどの検索結果に表示されます(その他、ブラウザのタブなどにも表示されます)。「なんというタイトルのページか」はそのページの内容を表す重要な要素なので、<title>はSEOへの影響度が高いタグです。<title>を使う際は、以下の4つのポイントを押さえることをおすすめします。対策キーワードを含める対策キーワードは左に寄せる文字数を意識するGoogleによる書き換えを考慮する対策キーワードを含める対策ワードで上位表示するには、「そのワードの背景にある検索意図と、ページの内容が一致していること」が重要になります。対策ワードをタイトルに含めることは、対人間・対検索エンジンの両方の観点で、「このページはそのワードに応えるページです」と示す有効な手段です。そのため、対策ワードは<title>の中に含めるようにしましょう。自然な文になっていることが必要条件なので、むやみにキーワードをタイトル内で乱用することは避けてください。Indexingという検索意図への合致をページ全体でなく特定の一部分で評価する仕組みも存在しますが、「対策」という観点では、狙っているワードがあるのであればそれを<title>に含めない理由は無いでしょう。対策キーワードは左に寄せる対策キーワードはタイトルの左(文頭付近)に寄せることがおすすめです。前提として、検索結果でのクリック率が高いコンテンツの方が、そうでないものよりも検索エンジンからの評価が高くなりやすいです。(当然ながら)検索結果は横書きで表示されるため左にある語の方が早く目に入りやすく、その分クリック率が高くなる傾向があります。したがって、対策ワードは左に寄せることが効果的です。文字数を意識する長すぎるタイトルは、検索結果で後半部分が省略されることがあります。具体的な表示文字数は閲覧環境(PC、スマホなど)などによって変わるため一概に言えませんが、おおむね30文字程度までであれば表示されることが多いです。そのため、タイトルを考える際は、後半部分に重要な要素ができるだけ来ないようにした方が無難です。純粋に、検索結果で後ろの方が省略されても伝わるようなタイトルづけをおこなうことが大切です。ページごとに固有の内容にするWebサイト上で異なるページとして存在しているということは、基本的にその内容も異なるはずです。(※)そして、<title>はページの内容を簡潔に表すべきものなので、必然的にページごとに固有の内容にすることが前提になります。逆に言えば、ページの内容が異なるにもかかわらず<title>が重複していたら、その<title>はページ内容を正しく表せていない可能性が高いです。※場合によっては同じ内容のページを複数公開することも考えられますが、その際に注意したいHTMLについてはcanonicalの章で解説します。<description><description>はページの概要文を定義するタグです。検索結果でタイトルの下に表示されます。<title>と違って検索順位への直接的な影響はありませんが、間接的には影響するため、重要な要素の一つです。<title>の章でも述べた通り、検索結果において高いクリック率を保つことはSEO上ポジティブで、なおかつ<description>はクリック率に影響する要素です。そのため、検索順位に間接的な影響を与えるタグだと考えられます。ポイントは<title>の章でも挙げた「対策キーワードを含める」と「ページごとに固有の内容にする」になります。「対策キーワードを含める」については、<description>の場合は検索結果で検索語と対応する箇所が太字になる仕様があります。これにより検索者の注意を引きやすくなるため、「対策キーワードを含める」ことは効果的だと考えられます。<h6>はページ内の見出しを定義するタグです。<h1>が大見出しで、番号が大きくなるほど小さな見出しとして扱われます。このタグのポイントは下記の3つです。<h6>を使うに当たっては、「<h1>の配下に<h2>」「<h2>の配下に<h3>」というように階層構造を守る必要があります。「<h1>の配下に<h3>がある」のように順番が飛んでしまったり、「<h2>の配下に<h1>がある」のように逆転してしまうと文法的に誤りなのでご注意ください。<h1>にはページのタイトルを入れる<h1>は前述した通りページの大見出しです。検索エンジンがページの内容を把握する上で影響度が高い要素になります。基本的に<h1>にはページのタイトルが入るべきです。サイト名」が基本形です。逆に言えば、<h1>には<title>からサイト名部分を引いた内容が入ります。一方で、<h1>にヘッダーのロゴを割り当てるWebページも一般的に見受けられます。これはHTMLとしては間違いではありませんが、SEOの観点では避けた方が無難だと筆者は考えています。ロゴは「サイトの運営者自体」あるい「サイト全体」を表すものであって、「各ページの内容」を示す要素ではないからです。中には、例えばコーポレートサイトのトップページの<h1>にロゴを指定するなど「ロゴが持つ意味とページの主題が一致する」ケースも存在しますが、基本的に<title>のメイン部分と一致させることがおすすめです。複数使う場合は注意点が増える(sectionごとに1つでなければいけない)のと、ページの大見出しが複数あることはページのテーマを理解しづらくさせる可能性があるため、シンプルにページごとに1つずつというルールで運用することがおすすめです。セクショニング要素HTMLには、「このエリアはヘッダー」「このエリアはサイドバー」のように、ページ全体における特定エリアの位置づけを指定するタグがいくつかあります。以下に例をいくつか挙げます。<header><footer><section><nav><aside>ヘッダーやフッターなどの大枠の要素は、昔は<div>というタグで実装されていました。<div>は「意味を持たない箱」だと捉えていただけるとよいと思います。現代のHTMLには上述したような各エリアの専用のタグが存在しますので、これらを適切に使うことが重要です。<div>自体は現代でもレイアウトを組む上で実務的に不可欠なタグです。ヘッダーやフッターなどのセクション的な意味を持つエリアでは専用のタグを使うべきということであって、全般的に<div>を使わない方がよいという意味ではまったくありません。<img><img>は画像を掲載するときに使うタグです。このタグのポイントは下記の3つです。alt属性をつけるwidth属性、height属性を指定するalt属性をつけるalt属性とは、画像を説明するテキストを定義するものです。alt="画像を説明するテキスト">SEOの観点から見たaltの重要性は、主に、検索エンジンが画像の内容を理解しやすくなる点にあります。昨今のGoogleは画像を解析してその内容を理解することができますが、どの程度正確にそれが行われるかはケースバイケースです。そのため、altを使ってテキストによる説明を付与することが大切になります。画像がリンク切れなどで表示されない場合は、altに指定しているテキストが代わりにWebページ上に表示されるため、利便性の担保にも繋がります。加えて、スクリーンリーダー(視力に障害がある方が使う、画面の読み上げソフト)はaltのテキストを読み上げます。altを指定していないと、画像のファイル名などを読み上げてしまい不便を強いてしまうため、注意が必要です。width属性、height属性を指定するwidth属性、height属性とは、画像の横幅と縦幅を定義するものです。height="画像の縦幅">この属性を使うメリットは、ページの読み込み時のコンテンツの移動を防げることです。これだけでは何のことかよくわからないと思いますで、順を追って解説します。Webページが表示されるときは、最初にページのHTMLが読み込まれた後に、画像などのデータが読み込まれます。そのため、例えば2つの文に挟まれた画像がある場合、画像が読み込まれたタイミングでそれに押されて下の文の位置が変わってしまうことがあり得ます。読んでいる最中に突然文の位置が変わったら不便ですよね。そこで、画像が表示されるよりも前に、「ここにこういうサイズの画像が入る」と領域だけ確保しておいて、その下にある要素の位置が移動しないようにすることが効果的です。それを可能にするのが、width属性、height属性なのです。そのため、これらを<img>につけておくことは重要だと考えられます。<a><a>はリンクを作成するためのタグです。下記のように、リンク先のURLを指定するhref=””を伴って記述します。href="リンク先のURL">アンカーテキスト</a>このタグのポイントは、アンカーテキスト(リンクとして表示される文言)を下記のようにすることです。遷移先のページ内容を予想できる文言にする自然な形でキーワードを含める(1を守れば、基本的に、おのずと2も守れます)というのも、アンカーテキストは、検索エンジンやページの閲覧者がリンク先のページの内容を理解する材料になります。抽象的な文言を使用して「検索エンジンもページ閲覧者も、遷移先のページ内容を予想できない状態」にしてしまうと、純粋に利便性が損なわれますし、SEOとしても望ましくありません。抽象的でNGな文言の例としては「こちら」などが挙げられます。ページのURLも基本的には分かりづらいので避けた方がよい場合が多いですが、URL自体を情報として表示すべきケース(引用元として明記したいなど)では問題ありません。遷移先の内容を予想できる文言にしていれば、おのずとそこに(遷移先のページで)対策したいキーワードも含まれるはずです。基本的にはページタイトルを使えば条件を満たすため問題ありません。文章内にリンクを入れるときなどはリンク文言を短縮する必要が生じると思うので、そういった場合には上記のポイントを押さえていただくのがおすすめです。<q><bloclquote><q>や<bloclquote>は引用を表すタグです。<q>は文中に引用を差し込む場合、<bloclquote>は文を丸ごと引用として表示する場合に使います。下記のように、出典元を示すcite=””を伴って記述します(cite=””で指定した出典元は、ページ上には表示されませんが、検索エンジンには伝わります)。<p>引用文が入ります引用文が入ります引用文が入ります引用文が入ります引用文が入ります引用文が入ります引用文が入ります引用文が入ります引用文が入ります引用文が入ります。これらの引用系のタグのポイントは、純粋に、引用のときはこれらを使用することを忘れないことです。いうのも、引用のためのタグが存在することを知らないと、引用であるにもかかわらずHTML上は引用ではないものとして記述してしまうことになり、検索エンジンから「他のサイトのコンテンツを不当にコピーしている」と評価されてしまうリスクを否定し切れません。そのため、<q>や<bloclquote>を使い、引用としての掲載であることを明示するようにしましょう。href="">はURLの正規化をおこなうためのタグです。URLの正規化というと専門的に聞こえると思いますが、要するに、内容が重複しているページがある場合に、「このページが正規のページです」と検索エンジンに示すことです。それが必要かというと、内容が同じページが複数ある場合、明示的に正規のページを指定していないと、検索エンジンがあなたの意図と異なる方のページを検索結果に表示させてしまったり、被リンクの評価が分散してしまったりするなど、デメリットが生じうるからです。「被リンクの評価分散」について補足です。基本的にGoogleは、他のサイトからリンクを貼られていることをポジティブに評価します。その上で、同じ内容のページが2つあり、例えばそれぞれに10本ずつのリンクが貼られていた場合、本来であれば1つのページで20本の被リンクを持つページとして評価を受けることができたはずなのに、10本分の評価しか得られないことになります。それに対して、canonicalで正規化をおこなうと、正規以外のページへのリンクは正規のページの評価に集約されるため、ページ自体が2つあっても、リンク評価が分散されてしまうことを防げます。canonicalは外部のサイトに対しても有効です。そのため、自社サイトのコンテンツを他社のサイトにも掲載してもらいつつ、検索結果には自社のページの方を出したい場合は、他社の該当ページから自社のページに対してcanonicalを貼ってもらうことが有効です。canonicalはGoogleからは「命令」でなく「ヒント」として解釈されるため、canonicalの指定と異なる検索結果になる場合も存在します。HTMLのチェックに便利なツールHTMLのチェックに便利はツールを2点ご紹介します。ConsoleはGoogleが提供する無料の分析ツールで、Googleへのインデックス状況のデータを得ることができます。Googleへの「インデックス」とは、あなたのホームページがGoogleの検索結果に登録されることです。Consoleを使うことで、どのページがどのワードでどれくらい表示・クリックされているかなどが分かります。ConsoleはHTMLのチェックのためのツールではありませんが、ページに何か技術的な問題があるときはエラーメッセージが通知されるため、参考にできます。HTMLに限らずSEOにおける様々なデータを取得できる非常に有用なので、ホームページを運用する上ではぜひ導入したいツールです。META情報抽出」や「見出し(hタグ)抽出」があります。URLを入れるだけで、そのページの<title>、<description>や<h1>~<h6>を自動で即座に抽出できます。本コラムで解説したように<title>や<h1>~<h6>などはSEO上の重要性が高いタグなので、こういったツールを使って「正しく設定されているか」を確認するのは有益です。基本的なSEOの設定が可能なホームページ作成ソフトここまでSEO観点でのHTMLタグの効果的な使い方を見てきました。コーディングの専門家ではない方が、このような注意点を守りながらホームページのHTMLを構築することは難易度が高い部分もあるかもしれません。そのような場合、基本的なSEOの設定が可能なホームページ作成ソフトを使うことも選択肢に入ると思います。HPという初心者向けソフトは、<title>や<description>、<a>、<img>などを管理画面から簡単に設定できます。「専門知識が無いけどSEOに配慮したホームページを作りたい」という方は、ぜひチェックしてみてください。\とりあえずHPの詳細は↓をクリック/canonicalなど、一部本記事で解説した項目で未対応のものがあります。ホームページについてこんなお悩みありませんか?業者に頼らず自分で簡単に作成・編集したいHPにかかる費用を抑えたい独立・開業に伴いHPを開設したいその悩み、解決できます!詳しくはこちら気軽につくれる、素敵なホームページ「とりあえずHP」とりあえずHPは、素敵なホームページを気軽につくることができるホームページ作成サービスです。「メールを送る」程度のパソコンスキルがあれば、驚くほど簡単にホームページを作成することができます。業種ごとに作り込まれたテンプレートデザインや文章のサンプルもあるので、ホームページづくりにあまり時間が割けない人にもおすすめ。大切な時間をホームページ作成に費やすのではなく、本業に集中させることができます。Webのマーケティング(CRO・SEO)の知見とクリエイティブ(デザイン・コーディング)のスキルの両輪を活かし、クライアントの成果向上のための取り組みに尽力。「ビジネスとデザインの統合」をテーマに活動。音楽系企業にて新規事業開発を担当した後、デザイン業界へ転身。WEB領域に強いデザイナーとしてキャリアを積み重ねる。著書に「経営者のためのウェブブランディングの教科書」「ウェブ担当者1年目の教科書」(共に幻冬舎)。2015年、2016年グッドデザイン賞受賞。サイト運営:株式会社smallweb個人・中小企業を中心に2万人以上が利用している初心者向けのホームページ作成ツール「とりあえずHP」を開発・提供。10年以上にわたりホームページ作成ツールを運用してきたノウハウに基づき、ホームページの作り方や運営の仕方、インターネットの基礎知識などについて、初心者向けにわかりやすく解説することを目的に当サイトを運営。