SEO対策に強いホームページを作るコツ～基本的なHTMLコーディングを徹底解説
webサイトを運営した経験のある方であれば、誰しも一度は「SEOコーディング」という言葉を聞いた事があるでしょう。ネットで調べてみたけど専門用語が多すぎて何を言っているのかよくわからない、と感じている方も多いのではないでしょうか。
Webサイトを運営する以上、どのサイトであってもSEO対策は重要なテーマになります。
特に商品やサービスの周知を狙っているサイトの場合には、サイトやページを検索エンジンの上位に表示していくためには、SEO対策は必須の知識になってきます。
本記事では、SEOコーディングについての基礎知識や、具体的な実践方法を、簡単かつ徹底的に解説していきます。
この記事を読めば、SEOコーディングの基礎知識が身につき、専門知識がなくても個人でSEO対策をすることが出来るようになるでしょう。
SEOとは？
SEOとは「Search Engine Optimization」の略で、日本語に訳すと「検索エンジン最適化」という意味になります。
もう少しわかりやすく説明すると、特定のウェブサイトが検索結果画面の上位に表示されるようにウェブサイトの構成などを調整することです。
例えば、「SEO コーディング」とGoogleで検索すると、SEOコーディングに関するサイトが検索サイト上に一気に表示されると思いますが、その検索結果の中で特定のサイトを、その検索結果の上位に持ってくる技術になります。
1番上に出てくるサイトと10番目に出てくるサイトでは、当然ユーザーの流入数に差が出てきます。同じ内容のサイトでも、検索結果の上位に表示されるサイトの方が閲覧数が伸びやすいのです。
閲覧数が伸びれば、そのサイトが狙っているサービスの周知もしやすくなるのは当然のことなので、サイトを検索画面の上位に持ってくる技術はサイト運営上非常に重要な技術になるのです。
それでは、次は検索エンジンの仕組みについて簡単に説明します。
関連記事：【早見表つき】SEO対策の外注費用・料金相場は？SEO対策を外注するメリットや外注先の選び方も
検索エンジンの仕組みを理解しよう
検索エンジン（ex.Google、Yahoo!）は、ある特定の検索をかけると、クローラー(インターネット上のWebページを巡回するロボット)が自動で情報を収集し、その結果をふまえて検索データベース(ユーザーが普段見ている検索結果の一覧)をネット上に作成します。
つまり、あるサイトを検索結果の何番目に表示するのかは、クローラーが判断している事になります。
クローラーにとってサイトの内容が分かりやすく、きつ好まれやすいサイトを作成し、より詳しく正確な情報を読み取ってもらった上で、できる限り検索画面の上位に持って行ってもらうこと、これがSEOのポイントであり、検索エンジンの基本的な構造になります。
関連記事：回遊率とは？ サイトの回遊率を上げるポイントと具体的施策９選
関連記事：pdcaは古い！？pdcaに代わるものを解説します
SEOに強いHTMLコーディングのコツ
“HTML”とは、「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略で、様々な文章やデータを、コンピュータが読み取れるようにタグ付けする言語の事を指します。
そのサイトやコンテンツが持っている内容を、検索エンジン(クローラー)に的確に認識させSEO効果を存分に発揮するためには、コーディングをする際にHTMLタグのルールを忠実に守ることが重要なポイントになってきます。
というのも、HTMLタグには、それぞれルールやそれに伴う意図があるため、設定する際にルールに準じる必要があるからです。
闇雲にタグ付けするのではなく、特定のルールを理解した上で効率よくSEO対策を施しましょう。
W3Cに則ったコーディング
W3Cとは、HTML・CSSの規格・Webの3つの基準を定めている団体の事を指します。
つまり、 W3Cはwebサイトを運営する上での基本ルールになりますので、”W3Cチェッカー等”を使用し、コード内に構文エラーなどがないか確認するようにしましょう。
W3Cに準拠するということは、それはつまりWebの基準に則ってサイトを運営するということです。こうすることでクローラーにとって非常にわかりやすいサイト構造になるため、非常に有効なSEO対策になります。
また、ユーザーにとっても、整理されたHTML構造であればサイト自体が非常に見やすいものとなり、快適度が上がるため、まとまったPVも期待できると言えるでしょう。
なお、W3Cチェッカーとは、閉じタグのエラーや見出し構造、階層がおかしいなど、HTMLを細かくチェックができるサービスの事を指します。
エラーのチェックを人力で行うとどうしても時間がかかってしまうため、自分で修正するのに加え、このサービスを併用することで、作業効率を上げるよう心掛けましょう。
SEO対策におけるmetaタグの設定
metaタグとは、Webサイトの情報を記載するタグのことです。これを設定することで、サイトの具体的内容を検索エンジンやブラウザに正確に伝えることができます。
以下、主要なmetaタグをご紹介していきます。
Titleタグ
厳密にはmetaタグではないですが、関連タグということでご紹介いたします。
Title(タイトル)タグとはいわゆる検索結果の表示画面に分かりやすく書かれている記事のタイトルの事で、大きく見出しとして表示されることになります。
最も閲覧者の目に留まる部分になり、直接SEOに関係する部分でもあります。
検索キーワードを絞ったうえで、なるべくユーザーの目に留まりやすいようなタイトルを設定しましょう。
狙った検索キーワードは、できるだけタイトル前方に設置するようにし、また、文章が検索結果画面の途中で切れることがないようにするのが効果的です。最大でも30文字程度で設定しましょう。
※検索エンジンの仕様変更で変わる場合があります。
descriptionタグ
ディスクリプションタグは、ページの概要を短く説明するmetaタグの事を指します。
検索結果の画面に表示されるため、ユーザーの興味を引くような概要を記述することが出来れば、それが直接アクセスに繋がることになるでしょう。
例えばGoogleであれば、各ページからその内容を抽出して自動で概要を表示する機能が備わっています。
もちろん、自動生成された概要でも問題ありませんが、サイトの内容を1番理解しているのは自分自身であるため、より閲覧者の目を引く概要を記載できるのであればご自身で記載した方がよいでしょう。
目安になる文字数は、PCであれば120字程度、SPであれば90字程度を目安に設定しましょう。
keywordsタグ
特定のページの内容に関して、カンマで区切って複数のキーワードを記述するmetaタグの事を指します。
現在、Googleがキーワードをサポートしていないため、SEO対策には不要の設定項目になります。
OGPタグ
「Open Graph Protocol」の略で、SNS等でシェアされた際に、ページのタイトルやサムネイル、ディスクリプションやURLを表示するためのmetaタグの事を指します。
ここ数年でSNSによる拡散からサイトのアクセス数が爆発的に伸びるケースが非常に多くなっていますので、このタグはしっかり設定しておきたいところです。
見出しタグの有効活用
見出しタグを正確に設定することで、検索エンジンにページの内容を正しく読み取ってもらいます。そうすることで、狙った検索ワードで検索画面の上位表示に繋がりますので、見出しは適当に設定するのではなく、階層構造をしっかり理解し、常にユーザーの視点に立って読みやすい記事の構成を心がけましょう。
「Googleが掲げる10の事実」の一つにもあるように、Googleはユーザーにとって利便性の高いものを評価してくれる傾向にあります。
常にユーザー視点を心がけることが有効なSEO対策に繋がります。
alt属性
クローラーは画像内に設定されたテキストを読み取ることはできません。
そのためページ内に画像が含まれる場合、alt属性に画像内のテキストを設定しておく必要があります。
設定しておくと、テキストの読み上げ機能でalt内のテキストを読み上げることができるようになります。
テキストを記述する際には、クローラーが正しく認識してくれるように、できるだけ内容はコンパクトにまとめて記載するようにしましょう。
ただし、画像が単にアイコンである場合や、見栄え重視の装飾的意味での画像であれば、altには特に記載する必要はありません。また、すぐ側に同じ文言がある場合も、空欄の方のままの方が良いでしょう。
疑似要素は飾りで使用
疑似要素とは、要素のうち特定の一部分にスタイルを適用できる方法になります。
HTMLの要素を疑似的にCSSで作成するため、HTMLを操作せず、コーディングも変更することなく要素を追加することができます。
擬似要素自体はたくさんありますが、実際に使用する疑似要素は、「::before」や「::after」になるでしょう。
疑似要素はあくまでも装飾的な要素である意味合いが強いため、タイトルを含む重要なキーワードや、テキストが含まれているような特定の意味のある画像に対しては、疑似要素は設定しないようにしましょう。
画像のリサイズ
ページ内の画像を適切なサイズに圧縮することで、サイト自体の読み込み速度をあげ、ユーザーの離脱率を減らすことができます。
読み込み時間が3秒かかると約1割、5秒かかると約4割以上のユーザーが離脱すると言われています。
画像サイズを適切に変更することで、サイトからの離脱率を減らすことを心がけましょう。
ただし、画像を圧縮しすぎて、画質を劣化させすぎることがないよう注意が必要です。いくら画像の読み込みが早くても、そもそも画像が粗かったら意味がないですからね。
画像圧縮ツールでおすすめなのは、pngやjpg画像を最適化し圧縮してくれる、パンダがトレードマークのフリーのWebサービス「Tiny PNG」でしょう。
圧縮しても、画像の劣化がほとんど見られない優れたフリーサイトになりますので、まだ圧縮ツールを使用したことがない方はまずはこちらのツールを試してみましょう。
li(リスト)タグの有効活用
リストタグは、主に箇条書きリストを作る際に使用するmetaタグになります。
ページ内で何か箇条書きで説明する際は、このリストタグを有効活用する事でユーザーに快適な読みやすさを提供するだけでなく、クローラーにも正確に読み込んでもらえるようになるため、より検索サイトの上位画面に表示される可能性が高くなります。
また、強調スニペットに採用されやすくなり、多数のユーザーの流入が見込まれます。
なお、強調スニペットとは、ユーザーの検索に対し、その質問およびそれに内包する潜在的な質問に対する明確な回答を、webサイト上の信頼性の高いページから抽出し、Google検索結果の上部に強調して表示する仕組み（特別なボックス）のことを指します。
この強調スニペットに採用されれば、「検索1位」よりも上の通称「0位」に表示されるようになるため、より多くのユーザーの流入が期待できます。
強調スペニットに採用されることは、SEO対策をする上で非常に重要なポイントの一つになるでしょう。
WordPressとSEOについて
WordPressでは、特定のプラグインを使用する事でmetaタグなどは自動で出力してくれるように設定されています。
本記事で紹介したほとんどのmetaタグに対応してくれるため、SEO対策に不安がある方は、WordPressを使用して、サイトを構築する事をお勧めします。
関連記事：SEO資格おすすめ6選！難易度・メリット・必要性を徹底解説
SEO対策に効果的なHTMLコーディングのポイント
ここまで実際にサイトを構築する際に使用する技術について紹介してきましたが、ここからはHTMLコーディングをする際に押さえるべき3つのポイントについて紹介していきます。
セマンティックコーディング
セマンティックコーディングとは、サイトのページ内に記述されたメタデータを、ある一定の規則に従って付与することで、検索エンジンに正確な内容を伝えるためのコーディングになります。
header（ヘッダー）、footer（フッター）、nav(ナヴ)、article(アーティクル)がそれに当たります。
これらの定義を正確に行うことで、ページの構造が明確になり、検索エンジンに理解してもらいやすくなります。
また、ユーザーの検索キーワードやページ内の提供情報との一致率が高まり、SEO効果ももたらす事になります。
構造化データマークアップ
構造化データマークアップとは、検索エンジンにテキスト情報やサイト内のコンテンツ情報を正確に理解してもらうための記述方法になります。
記述方法には、Microdata（マイクロデータ）や、JSON-LD（ジェイソン・エルディ）が挙げられるでしょう。
どちらかに優位性があるわけではなく、どちらも検索エンジンに正確に内容を把握してもらえるため、好みでどちらを使うか決めて問題ありません。
また、構造化データマークアップを行う事で、検索結果画面にリッチザルトが表示されるようになり、ユーザーは検索結果に表示されているページに回答があった事を知ることができるため、クリック率が上昇しやすいとされています。
なお、強調スニペットとの違いについて、リッチリザルトはあくまでも通常の検索結果のスニペット部分を拡張するだけで、表示される順位が0番になるようなことはありませんので、強調スニペットに採用される方がSEO対策上は優位であると言えるでしょう。
コアウェブバイタル対策
コアウェブバイタルとは、UX（ユーザーがサイトを通じて得る体験）の質を計測するための指標のことで、つまり直接的なサイトの評価を指します。
コアウェブバイタルには3つの指標があり、それらを満たすことがSEO対策には重要となります。
・LCP（Largest Contentful Paint）：ページの読み込み速度、2.5秒程度が理想
・FID（First Input Delay）：初回入力遅延、ユーザーが初回操作を行なってから応答が発生するまでの遅延時間、100ミリ秒以内が理想
・CLS（Cumulative Layout Shift）：ページを読み込んだ際のページ内レイアウトのずれの有無、0.1秒未満が理想
以上3つの指標に適合するようにするためには、適切なHTMLコーディングとCSS構造を意識することです。
対策自体は色々とありますが、1番重要なポイントは、ユーザー優位のサイトを構築することで、結果的に検索エンジンの上位表示に繋がっていくという考え方です。
できる限りユーザーが快適にwebサイトを使用できるよう、常に見やすいサイトの構築を心がけましょう。
まとめ
いかがでしたでしょうか。
SEOコーディングと聞くとプログラミングなどの専門的な知識が必要そう・・・と身構えてしまう方もいるかと思いますが、本記事でご紹介した方法であれば、専門的な知識が全くなくても、誰でも手軽にＳＥＯ対策をする事ができます。
SEO対策はサイト運営の基本中の基本です。
これまでSEOをまったく意識していなかった方も、本記事をきっかけにSEO対策の第一歩を踏み出していただければ光栄です。