目次
SEO対策とHTMLの関係
SEO対策上HTMLの構造を整えることは、ユーザーと検索エンジンの双方にとっても良いことと言えます。
検索エンジンのクローラーにとっては、クローラーが文章構造を正しく把握することを可能にします。ユーザーにとっては、読みやすい文章を作成することにつながります。
また、セマンティックなHTML（＝文章の意味に沿ったHTMLの記述のこと）を記述することは、コンテンツの土台を形成する段階に当たるため、SEO対策をする上でも重要な工程であると言えます。
今回の記事の内容紹介
今回の記事では、SEO対策に効果的なHTMLの記述方法をご紹介します。
まずSEO対策を行う上で正しいHTMLの記述方法について解説し、その後、重要なHTMLタグをご紹介します。
ご興味のあるところからご覧頂けます。
１：HTMLの正しい記述はSEO対策の土台を作る
webサイトのSEO対策を行う際、正しいHTMLを記述することが重要です。
というのも、正しいHTMLを記述することによって、検索エンジンがページを正しく評価してくれるようになります。
また正しいHTMLを記述することによって、コンテンツが読みやすくなるため、ユーザーにとってもメリットが大きいです。
総じて、HTMLを正しく記述することによって、検索エンジンからは正しく評価されるようになり、ユーザーにとっても読みやすいコンテンツとなります。
２：クローラーに文章構造を正しく伝える
クローラーに文章構造を正しく伝えるためには、HTMLを正しく記述することが重要です。
適切にHTMLタグを使うことによって、コンテンツの文章構造をクローラーに正しく伝え、ページが正しく評価されるようになり、検索結果上位に表示してもらいやすくなります。
具体的には、タイトルタグ（<title></title>）や見出しタグ（<h1></h1>）などの設定が挙げられます。
このように、タイトルや見出しの設定などの本文の最適化を行うことによって、コンテンツの階層構造が明確になり、検索エンジンにコンテンツの意味を正確に伝えることが可能です。
★クローラーの動きについては「【解説】Googleのクローラーの動きを解説！クローラーの仕組みから対策方法を解説！」でご紹介しています。
３：SEO対策で覚えておきたいHTMLの重要タグ
コンテンツ作成では、適切にHTMLタグを使用することが重要です。
SEO対策を行う上で覚えておきたいHTMLの重要タグをご紹介します。
３.１：検索結果に表示される記事名「title」タグ
SEO対策において、titleタグは最も効果的なHTMLタグです。
titleタグは、クローラーやユーザーに対して、記事の概要を明示し、認識してもらう役割があります。そのため、検索順位を決めるための重要な役割を果たします。
また、設定した文言は検索結果に表示され、ブラウザのタブにも表示されます。つまり、ユーザーとサイトの最初の接触点となり、重要な設定箇所の一つと言えます。
titleタグを使用する際には、なるべく30文字前後に抑えることや、対策キーワードを含めることがSEO対策にとって重要です。
３.２：titleタグと共に検索結果に表示される「description」タグ
descriptionタグは検索結果の記事タイトル下に表示される、記事の説明文です。
記事タイトルと一緒に検索結果に表示されるため、ユーザーがその記事をクリックするかの判断材料となります。
検索結果からユーザーにクリックしてもらうためには、descriptionタグにユーザーの興味を惹く文言を設定することが重要です。
３.３：文章の見出し構造を作る「H1〜H6」タグ
Hタグを使用して見出しを明示することで、クローラーやユーザーに各項目のテーマを伝えることが可能です。
H1タグが一番重要度が高く、H2、H3となるにつれて重要度が下がっていきます。一番重要度が高いため、H1タグがタイトルとして使用されることもあります。
H4タグの中にH2タグを入れるなど、重要度を逆転させてしまうと、HTML構造を無視したサイト設計とクローラーから評価されてしまうため注意が必要です。
３.４：記事同士をつなぐ「a」タグ
aタグを使うことによって、リンクの設定をすることが可能です。
クローラーは基本的に、ページ内に設置されている内部リンクを辿ってクロールしていきます。
そのため、関連性の高い記事同士をリンクでつなぐことによって、クロールの促進（＝クローラビリティの向上）になり、SEO対策にも良い効果が期待できます。
また、同じサイト内の内部リンクだけでなく、他のサイトの外部リンクを設置することも可能です。
３.５：箇条書きなどのリスト構造を表す「ul」「ol」タグ
ul（unorder list）タグやol（order list）タグは、中にliタグを使うことによって、リストタグとも呼ばれる箇条書きを表すタグです。
ulタグは黒点、liタグは数字の箇条書きとなります。
リストタグで記載した内容は、クローラーが認識しやすくなるため、SEO効果が期待できます。
また、適切にリストタグを使えば、リスト形式の強調スニペットに採用されやすいです。
３.６：文章中に表を作成する「table」タグ
tableタグを使うことによって、文章中に表を作成することが可能です。
中にtbodyタグ、trタグ、tdタグを使うことによって、表を作成します。
適切にtableタグを使えば、検索結果のスニペットや表組み形式の強調スニペットに採用されやすくなるSEO効果があります。
３.７：類似ページの評価を、その代表的なURLへと集約する「canonical」タグ
canonicalタグは、URLの正規化を行うときに使用するタグです。
検索エンジンは、重複したコンテンツがあるとコピーコンテンツと判定し、評価を下げてしまいます。
canonicalタグを使うことで、商品詳細ページなどの重複したコンテンツがあるときに、基準となるページをクローラーに伝えることが可能です。
適切にcanonicalタグを使うことによって、同じようなコンテンツがある場合でも、検索エンジンが正しくページを評価し、基準となるページに評価を集中してくれます。
３.８：キーワードを管理する「keyword」タグ
現在はkeywordタグのSEO的な効果はありません。しかし、記事のキーワード管理の面では使い方はまだあります。
例えば１記事に対し、１つのキーワードをターゲットとする場合、そのキーワードを記載しておけば、キーワードの管理面でわかりやすくなる可能性があります。
keywordタグは現在ではSEO対策に効果はありませんが、設定することによって自社の中でキーワード管理がしやすくなることがあります。
★Google公式「Google はウェブ ランキングにキーワード メタタグを使用しません」
３.９：画像に説明をつける「alt」属性
alt属性は、imgタグにつける画像の代替テキストです。
ブラウザで画像が表示できないときに、画像の代わりにalt属性で設定されているテキストが表示されます。
また、音声ブラウザなどで音声で読み上げられる際にも、画像の部分はalt属性で設定したテキストが読み上げられます。
さらにalt属性の設定が、クローラーの画像内容を認識する助けとして効果があるようです。
４：セマンティックなHTMLの記述順序
セマンティック（＝文章の意味に沿ったHTMLの記述のこと）なHTMLの記述は、以下の順序で行います。
①文章内容を下書き段階で構造化する
まずは文章に内容を構造的に考えていくことから始めます。これは最初に見出しのみ考えるなど、大きなところから考えていくことがおすすめです。
また、この段階ではHTMLの記述のことは考慮せず、あくまで文章に構造を持たせることを意識します。具体的には大見出し・中見出し・小見出しの構成を考えます。
②構造化した文章に対し、「H1〜H6」タグを当てはめる
コンテンツのタイトルにはH1タグ、大見出しにはH2タグ、中見出しにはH3タグ、小見出しにはH4タグというように、HTMLの構造を見出しにより構造化します。
③箇条書きや表部分があれば、「ul/ol」タグ、「table」タグを当てはめる
コンテンツ内に情報をまとめるための表がある場合は、tableタグで表構造を表します。
また、リスト形式の箇条書きなどはul/olタグを使います。
④通常の文章には「p」タグを当てはめる
通常の文章に関しては、pタグを使います。また、文章の中には太字にしたりして強調する部分もあると思います。その部分に関してはbタグなどで太字にしましょう。
★HINT：コーディング前にデザインが提供されている場合★
web制作では、コーディングの前にすでにデザインがあるはずです。
その際にはいきなり何も考えず、デザインをコーディングに起こしていくことは避けた方がいいです。基本的には以下の手順でコーディングを考えます。
①デザインを見ながら、HTMLでの構造化を考える
デザイン上で見出しなどの文章構造を確認し、HTMLの構造をどうするかを考える時間を持ちましょう。さらに、共有部分は同じコードにするなどブロック化すれば、コーディング時間の短縮になる可能性もあります。
②HTMLを書いていく
実際にHTMLを書いていきます。ここでは見出しなど共通するパーツでは、クラス名を同様にするなど工夫をし、CSS記述の手間を減らしましょう。
HTMLを事前に検討することは、コーディングの手間を減らすことにつながる可能性がありますので、時間をかけて考えていきましょう。
５：セマンティックなHTMLの記述は、SEO対策の土台を作る
セマンティックなHTMLは、SEO対策の土台を作ります。
それは、
①検索エンジンに正しい文章構造を明示し、
②ユーザーに文章の明示的な構造を示すことで可読性が上がり、
③ライターにとっては構造的な文章作成への誘因
となります。
現在のクローラーはHTMLの構造が多少乱れていても、内容を判別する能力を持つと言われていますが、SEO対策の土台を作り、競合と同じ土俵に立つ基礎として、HTMLの記述はSEO対策の土台を作る役割を果たすと考えられます。
逆に、HTMLの基礎的な部分で競合に差をつけられると、コンテンツに集中することができません。
６：まとめとして
ここまで、以下の内容をご説明しました。
１：HTMLの正しい記述はSEO対策の土台を作る
２：クローラーに文章構造を正しく伝える
３：SEO対策で覚えておきたいHTMLの重要タグ
４：セマンティックなHTMLの記述順序
５：セマンティックなHTMLの記述は、SEO対策の土台を作る
今回は正しいHTMLを記述することによるSEO効果について解説し、その後重要なHTMLタグをご紹介しました。
SEO対策を行う上では、正しくHTMLを記述することは必須です。
クローラーに正しくコンテンツの内容を認識してもらうために、タイトルや見出しの設定などの本文の最適化を行う必要があります。また競合に差をつけられず、内容面に集中するためにもHTMLの記述に気をつけましょう。
7：御社のお悩み、相談してみませんか？
今行っているSEO対策に、意味がないと感じていませんか？
「新しいブログ記事を書いているのに、全然ユーザーが集まらない。。」
「SEO対策をしているのに、思ったように検索順位が上がらない。。」
Technogramでは、専門家サポートのもとSEO対策の戦略立案や分析、実施を支援します。
さらに、日常のweb分析のサポートからサイトのリニューアルなど、幅広くweb領域のご支援をすることが可能です。
SEO対策について話を聞いてみたい、またはwebの分析・改善について話を聞いてみたいという方は是非、お気軽にご相談くださいませ！