SEOに強いホームページを作ろう！HTMLコーディング時に意識すること８つ

本格的なSEO対策となるとWebマーケティングに強い人にお願いするのがよいですが、丁寧なコーディングを心がけることである程度対応することが可能です。
今回は初心者の方にもわかりやすく、コーディングにおける具体的ですぐに実践できるSEO対策を紹介します。
ぜひ、SEOに強いHTMLコーディングを知り、役立ててください！

【もくじ】

1. SEOとは？
2. 検索エンジンの仕組み
3. SEOに強いコーディングを心がけよう！
   1. 01. W3Cに則ったコーディングを心がける
   2. 02. 正しくmetaタグを設定する
   3. 03. 見出しタグを有効的に使う
   4. 04. imgタグにはalt属性を付ける
   5. 05. 疑似要素は飾りに使う
   6. 06. 画像は適切な形式で
   7. 07. タグの意味を考えて使う
   8. 08. 【補足】WordPressで構築するサイトのSEO
4. まとめ

SEOとは？

耳馴染みのない方もいるかもしれません。
SEOとは「Search Engine Optimization」の略で、日本語に訳すと「検索エンジン最適化」です。
wikipediaによると、「特定のウェブサイトが上位に表示されるよう、ウェブサイトの構成などを調整すること。また、その手法の総称。」です。
つまり、検索結果の上位に表示させたいときに行うことですね。
お問い合わせにも直結するので、非常に重要です。コーディング時には気を付けたい部分ですね。

次の項目では、その検索エンジンの仕組みについて簡単に説明します。

検索エンジンの仕組み

検索エンジン（例えばGoogleやYahoo!）は、クローラーというインターネット上のWebページを巡回するロボットを使って情報収集をし、自動で検索データベースを作成します。
クローラーがサイトを巡回してくれないと検索結果の上位に上がってくるどころか、表示すらしてもらえません。
ですので、検索エンジンにわかりやすい・最適なコーディングをすることで、検索エンジンのクローラーに巡回してもらい、より詳しく正確な情報を読み取ってもらうことが重要です！

詳しい内容については、以下の記事をご覧ください。
また、Webサイトがインデックスされている（認識されている）かどうかの確認方法も掲載されています。気になる方はぜひチェックしてみてください。
クローラーとは？SEOに必要な基礎知識とクローリングを最適化する方法

SEOに強いコーディングを心がけよう！

次からはHTMLコーディング時に意識したい実践的な内容を紹介していきます。

01W3Cに則ったコーディングを心がける

W3Cは、HTML・CSSの規格・Webの基準を決めている団体です。
W3Cチェッカーでは、コード内に構文エラーなどがないか確認することができます。
HTML構造が変だったり、閉じタグがなかったりなどの凡ミスがないようにしましょう。

SEOに直接関係するところではないですが、W3Cに準拠するということは、Webの基準に則るということです。
つまりクローラーにわかりやすい構造になるので、SEO対策にもつながるはずです！
W3Cコードチェッカー

また、きれいなHTML構造はクローラーだけでなく、もちろん人間が見てもわかりやすいですね。
後から改修しやすいHTMLはとても素敵です。

02正しくmetaタグを設定する

検索エンジンがタイトルやディスクリプションなどのmetaタグの情報を収集して、検索結果に表示してくれます。
いくつか主要なmetaタグをご紹介します。

タイトルタグ

正確にはmetaタグではないですが、metaタグとまとめて書くことが多いです。
必ずhead内に1つ書かなくてはいけない要素になっています。
検索結果で、大きく見出しとして表示されます。
最もユーザーの目に留まる部分になり、直接にSEOに関係します。
狙った検索キーワードを含めてタイトルを設定しましょう。
狙った検索キーワードを、タイトルの前の方に設置するとより効果的です。
また、タイトルタグは検索結果画面で途切れることがないよう、最大で30文字程度がよいとされています。
※Googleの仕様変更で変わる場合があります。

ディスクリプション

ディスクリプションはページの概要を短く記述するmetaタグです。
検索結果に表示されるため、ユーザーにページの概要をわかりやすく伝えることができれば、アクセスに繋がるかもしれません。

ですが、最近ではGoogleがページの内容から抽出して勝手に表示してくれます。
むしろ自分で設定したディスクリプションは表示されずに、Googleの作成したものが表示されていることがあります。
とはいえ設定しないより、する方がよいはずです。コーディング時には設定しておきましょう。
WordPress化するサイトで「All in One SEO Pack」などのプラグインを使う場合は、プラグインで設定・自動出力できるため、コーディングでのmetaタグの設定は不要な場合があります。

また、目安としてPCは120字、SPは90字程度で設定するとよいとされています。
それ以降は途切れて表示されてしまうことがあるので、重要な内容はタイトル同様、前の方に記述しておくとよいです。

キーワード

そのページがどんなキーワードと関連しているかを記述するmetaタグです。
カンマで区切って複数のキーワードを設定できます。

以前はSEOに効果のあるタグだったようですが、現在ではGoogleがキーワードをサポートしていないため、設定は不要です。
サイトの評価・検索順位を決める要素として見ないようで、設定されていてもいなくても、SEOには関係しないようです。

詳しくは以下の記事をご覧ください。
なぜキーワードがSEOの評価に使われなくなったのか、知ることができます。
meta keywords（メタキーワード）はSEOで不要なのか？

OGPタグ

OGPとは「Open Graph Protocol」の略です。
OGPタグはSNSでシェアされたときに、ページのタイトルやサムネイル、ディスクリプション、URLを表示するための物です。

もしSNSで拡散され（バズ）れば、たくさんのアクセスに繋がります！ぜひ設定したい部分です。

下記のようにOGPタグを記述します。
次の項目から、簡単にタグの説明をしていきます。

og:title

大抵はタイトルタグと同じものを設定することが多いですが、サイト名を含めないページタイトルのみを記述するとよいです。
また、「og:title」はSNSでシェアされたときに表示されるタイトルなので、SNSでは別のタイトルを設定したい場合に有効的です。

og:description

ディスクリプションと同じ内容を設定することが多いですが、ディスクリプションが長い場合、SNSでシェアされるときに文字数の制限に引っかかってしまうことがあるかもしれません。
SNSに合わせて短くディスクリプションを設定したい場合に有効的です。

og:url

OGPを設定するページのURLを設定します。このとき、URLは絶対パス（https://～～）で記述します。

og:type

ページの種類を設定します。
トップページならwebsite、
ブログページならblog、
下層ページならarticleと設定しておきます。

og:locale

国や地域、言語を設定します。
日本ならja_JP、
そのページに他に利用可能な言語があるなら、og:locale:alternateで複数設定することができます。

og:image

設定しておくと上の画像のように、SNSでシェアしたときにサムネイルが表示されます。
このとき、画像のURLは絶対パス（https://～～）で記述します。

また、og:imageが各SNSでどのように表示されるか、以下のサイトで確かめることができます。
ぜひ活用してみてください！
OGP画像シミュレータ

og:site_name

ページのタイトルとは別に、サイト名を設定します。
このページなら、サイト名はWEB制作会社 BRISKです。

metaタグを設定するにあたっての注意点は、1ページごとに設定を変える項目がある点です。
特にタイトルやog:urlは設定間違いのないようにしましょう。

03見出しタグを有効的に使う

見出しタグは、検索エンジンにページの内容をわかりやすくします。
検索エンジンに正しく内容を読み取ってもらえると、狙った検索ワードでの上位表示に繋がります。

また、「Googleが掲げる10の事実」に、「ユーザーファースト（1. ユーザーに焦点を絞れば、他のものはみな後からついてくる。）」があります。
本に目次や章タイトルがついていると読みやすいですよね。見出しタグはユーザーにもページの中身をわかりやすくしてくれます。
Googleはユーザーにとって便利なものを評価してくれるので、見出しタグはGoogleに評価されやすいです。

ときどき、コンテンツタイトルにpタグやdivタグを使ったコーディングを見ます。
もったいないので、見出しタグを有効に使っていきましょう。

見出しタグの順番を正しく使う

見出しタグは基本的に順番に使っていきます。
h3の箱の中に、突然h2が入ってはいけません。階層構造を守って使用します。
階層構造を守ることも、ユーザーの利便性に繋がります。
参考：【HTML】見出しタグの使い方：h1〜h6はどう使い分ける？

また、デザインで都合がいいからこの見出しを使いたい…という場合でも階層構造を守ります。
見出しタグに直接CSSを当てるのではなく、どこでも使えるようにクラスを用意しましょう。

04imgタグにはalt属性を付ける

クローラーは画像内のテキストを読み取ることはできないため、画像にテキストが含まれる場合は、alt属性に画像内のテキストを設定しておきましょう。
設定するとクローラーで読み取ってくれるだけでなく、テキストの読み上げ機能でalt内のテキストを読み上げてくれます。

たとえば、こちらの画像バナーにaltを付けるなら、以下のようにします。

基本的には画像内のテキストをすべてaltに記述するのがよいですが、長すぎる場合は要約してわかりやすく簡潔に設定しましょう。

アイコンや見栄えの為の装飾的な画像であればaltは空欄で問題ありません。また、すぐそばに同じ文言がある場合も、空欄の方がよいです。
この画像にはaltが必要なのかな……と迷ったときは、以下の記事を参考にしてみてください。
もうalt属性で迷いたくない

05疑似要素は飾りに使う

疑似要素に画像やテキストを設定することがあると思いますが、疑似要素で設定したものは検索エンジンで認識しにくいです。
疑似要素は装飾的な要素なため、タイトルなどの重要なキーワードや、テキストが含まれていたり意味のある画像は、設定しないようにしましょう。

06画像は適切な形式で

SEOと直接関係はありませんが、サイトの読み込み速度を早くすることで離脱率を減らすことができます。
読み込み時間が3秒で10%以上、5秒で38%のユーザーが離脱すると言われています。
参考：Webページの読み込み時間、3秒が限界か – 5秒になると直帰率激増

サイトの読み込みを早くするために一番手っ取り早い方法は、画像を軽くすることです。
画像の書き出しを適切に行うことで、画像の容量を減らしましょう！

PNG

PNGは色数の制限もなく、きれいな画像を作成することができます。
可逆圧縮のため、何度も保存し直しても劣化しません。
また、透過された画像はJPGでは白くなってしまうため、PNGで保存します（GIFも透過に対応しています）。

PNGはきれいですが、ファイルサイズが重くなりがちです。
色数の少ない図やイラスト、アイコンなどに使うのがおすすめです。

JPG

色数の多い画像や写真で、透過のないものはJPGで書き出します。
PNGと違い不可逆圧縮なので、保存の度に劣化していく点にご注意ください。

PNGよりも軽いため、大きなサイズの画像や写真に向いています。
ですが大きすぎたり、高画質すぎる写真はWebには必要ありませんので調整しましょう。
サイトが重くなる原因にもつながります。

SVG

ベクター形式の画像で、伸縮で滲みません。
シェイプで作成したアイコンやロゴや、画像化するテキストはSVGで書き出すのがおすすめです。

GIF

透過できて軽いのが特徴です。
アイコンなどで使われていましたが、色数上限があることや、透過があまりきれいでないため、最近ではあまり使われなくなりました。
最近はGIFアニメーションでよく使用されます。

以上が主な画像形式でした。画像形式についてもっと詳しく知りたい方は、以下の記事に詳しく載っていますので、ぜひご覧ください。
”知っているつもり”の拡張子、jpg gif png。画像形式による違いと特徴、ブログでの使い分け方

画像を圧縮する

正しい形式で画像を書き出しても、まだ画像が重たい場合は圧縮しましょう。
劣化させすぎないように注意です。
画像圧縮ツールを2つ紹介します。

tinyPNG

tinyPNG
パンダで有名な、tinyPNGです。
サイト名にはPNGとありますが、JPGも圧縮することができます。
写真を圧縮したときに、劣化が目立つことがあります。

JPGイメージをオンラインで圧縮する

JPGイメージをオンラインで圧縮する
圧縮する際に、サムネイルをクリックすると自分で圧縮率を調節することができるので、自分で細かく調整したい場合にとても便利です。
また、JPGだけでなく、タブを切り替えてPNGも圧縮できます。

07タグの意味を考えて使う

HTMLタグの意味を考えたことはありますか？
HTMLタグの意味に沿ったコーディングをすることを、セマンティックHTMLといいます（セマンティック：「意味の」、「意味論の」）。
どれが見出しか、どれが本文か、どこからどこまでがコンテンツのまとまりか……など要素を明確にすることで、検索エンジンのクローラーが内容を認識しやすくなります。

あまりタグの意味を考えて使っていなかった……という人は、ぜひこの際にセマンティックなコーディングを心がけましょう！
次から主要なタグの意味を簡単に説明していきます。

section

章・節の意味で、ページ内の意味のまとまりの要素に使います。
sectionは装飾目的（横並びのためのコンテナなど）で使用してはいけません。その場合はdivを使用します。

また、section内の見出しタグは必須ではありません。ですが、見出しタグを入れることで、まとまりの内容がより明確になります。
W3Cのコードチェッカーでは、section内に見出しタグがないときに「Warning」が表示されます。

article

論文や投稿記事、ブログのコメントなど、ひとつで意味が成り立つ、独立した要素に使います。
独立した内容なので、こちらも見出しタグを入れて内容を明確にする方がよいです。
section同様、W3Cのコードチェッカーでは、article内に内に見出しタグがないときに「Warning」が表示されます。

nav

主要なナビゲーションに使用します。
同ページで複数回使用して問題ありません。ですが、何個もナビゲーションがあるとややこしいため、グローバルナビゲーションやパンくずに使用するのがよいです。

header

導入部分やナビゲーションを囲うのに使用します。
上の図はこのサイトのヘッダーの範囲です。

footer

コンテンツのフッターに使用します。ページの一番最後に配置することが多いですが、特に位置は決まっていません。
上の図はこのサイトのフッターの範囲です。

ul

箇条書きに使用します。
箇条書きでないコンテンツ（並列でないもの）には使いません。

序列のあるものには、olタグを使用します。

p

paragraph（段落）です。文章のまとまりに使用します。
中身が文章でないのなら、pタグを使うのは望ましくありません。
画像ならfigureタグやdivタグなど、中身の複数入るボックスになるのならdivタグを、見出しならhタグを使うとよいでしょう。

HTMLタグの中身がタグの意味に沿わない内容だと、なんだか気持ち悪いですよね。
クローラーだけでなく、人間も戸惑ってしまって改修しづらいHTMLになってしまいます。
使うタグの意味を理解してコーディングしましょう！

他にもたくさんのHTMLタグがあるので、ぜひ調べてみてください。
参考：HTML5リファレンス

08【補足】WordPressで構築するサイトのSEO

WordPressでは「All in One SEO Pack」などのプラグインを使って、metaタグなどは自動で出力してくれます！
タイトルタグやディスクリプションだけでなく、OGPなどもすべて自動出力されるため、非常に便利です。
以下の記事に「All in One SEO Pack」の設定方法や、WordPressにおけるSEO対策について掲載されていますので、参考にしてみてください。
【WordPress】それで完成？検証で必ずチェックすべき表示崩れとSEO周りの重要ポイント６選！

WordPress化するサイトでも、SEOを意識したコーディングを心がけましょう！

まとめ

以上、SEOに強いホームページを作るために、コーディング時に意識すること8つでした。
SEO対策と聞くと「難しそう」「専門的な知識が必要そう」と少し構えてしまう方もいるかと思いますが、
今回は普段のコーディングから手軽に実践できるものをご紹介しました。
これまでSEOを意識していなかった方も、ぜひこの記事をきっかけにSEO対策の第一歩を踏み出していただけますと幸いです！