ノウハウ

SEO対策に効果を発揮する、HTMLのコーディング規約について徹底解説！

2023年6月2日

Webサイト制作を行う上でHTMLコーディングは欠かせない作業のひとつです。

最近はノーコードツールの発達により、エディター上でコードを書かなくてもWebサイトを制作することができるようになりました。しかし、コーディングをまったく知らないでノーコードツールを用いても、カスタマイズする際に思ったような作業を行えないこともあります。また、SEOに効果的なコーディングを考えた場合には、しっかりとHTMLのコーディング規約を遵守した上で制作に取り掛からないと、Webサイトやページの上位表示をするのが難しくなるのも事実です。

この記事では、SEO対策に効果を発揮するHTMLのコーディング規約、またそれに付随したcssのコーディング規約について見ていきたいと思います。

1 コーディングとは何か？
- 1.1 きれいなコードはSEOにも効果的
2 HTMLのコーディング規約について
3 cssにもコーディング規約がある
4 マムズラボについて
- 4.1 プロジェクト実績
- 4.2 お問い合わせ先

コーディングとは何か？

コーディングとは、プログラミング言語を使用してソースコードを記述する作業をいいます。コーディングはプログラミングと混同されがちですが、それぞれには大きな違いがあります。

プログラミングはプログラム制作全般で行う設計やテスト・デバッグ作業・修正作業などを表すのに対し、コーディングはWebサイト制作でブラウザ上にデザインを表示させる、ソースコード記述作業を指すのです。

またプログラミングを行う人は「プログラマ」といいますが、コーディングを行う人は「コーダー」と呼ばれる点でも違いを表しています。なお、コーディング作業では主にHTMLのほか、cssやJavaScriptなどが使用されます。

きれいなコードはSEOにも効果的

コーディング作業は単にWebサイトが表示されればよいというものではありません。自社のサイトが検索上位に表示されるようにするために、Googleのような検索エンジンにサイトの内容を正確に把握してもらう必要があります。

そのためには、検索エンジンに好まれるコードを記述していくことが非常に重要です。

間違った記述内容はもちろんのこと、今では推奨されていない昔のコードを記載してみたり、同じ結果を表示するにしても非常に長いコードを書いてしまったりすれば、SEO上不利になることは否めません。きれいなコードを書くことはSEO的にも非常に効果が高くなるため、HTMLコーディング規約を把握しておくことが、結果としてSEO対策を施したWebサイト制作につながります。

なお、コーディング規約は必ず守らなければならないものではありません。コーディング規約にこだわるあまり、作業に支障が出てしまうなどのマイナス面が出てしまうようであれば、多少コーディング規約が遵守できなくても仕方ないと割り切ることも必要です。

HTMLのコーディング規約について

Webサイト制作においてコーディングが担う役割は非常に重要です。

そのため、通常のWebサイト制作では、「コーディング規約」というHTMLコーディングを行う上で守るべきルールを設定し、そのルールに沿ってページ制作を実行していきます。コーディング規約を設定する理由としては、管理や確認しやすくすること以外にも、品質を一定に保つこと、コミュニケーションコストが軽減されることが挙げられます。コーダーごとに記述内容が異なってしまえば、確認作業にも時間がかかりますし、メンテナンスも大変です。とくに人が作成したコードを解読する際に、可読性の低いコードが記述されているとコミュニケーションコストが無駄にかかります。

そうならないためにも、HTMLコーディング規約が必要なのです。

では、実際にはどのようなコーディング規約が設定されているのでしょうか。ここからは一般的なHTMLコーディングにおける規約についてくわしく見ていきたいと思います。

W3C基準に沿ったコーディング

W3Cとは「World Wide Web Consortium」の略で、Web技術の標準化を提唱する非営利団体のこと。HTMLやcss、Web基準を決定するなどW3Cが勧告する規格はWeb標準と称され、Webサイトの品質を高めるためには、W3C基準に沿ったコーディングを行うことが推奨されています。

バージョンはHTML5

HTMLコーディングを行うにあたっては、現在のHTMLのバージョンとなるHTML5によるコーディングが求められます。HTML5では、シンプルなタグによるコーディングが可能で、要素名に大文字と小文字を混在させることができるものの、小文字のみで要素名を記述することが推奨されています。

例)
<div>
This is a pen.
</div>

DOCTYPE宣言を行う

DOCTYPE宣言は、HTMLがどの定義によって記述されているかを宣言するものです。通常はDTD（Document Type Definition）をHTML冒頭に記載します。このDOCTYPEは省略もできますが、その場合ブラウザの互換モードで表示され、レイアウト崩れが起きてしまう可能性があります。そうならないためにも、しっかりと宣言しておきましょう。

HTML5の場合は、<!DOCTYPE HTML>と冒頭に記載します。

見出しタグh1～h6の順番には注意

見出しタグとは、ページ内で見出しを構成するhタグのこと。見出しタグがあることによって、どのようなページ構造になっているか検索エンジンにわかりやすく伝える役目を果たしています。

hタグは「h1」「h2」「h3」「h4」「h5」「h6」と6つのタグがあり、数の小さいhタグのほうが上位階層となりますが、正しい順番で記述することが重要となります。たとえば、h3を記述した後にh2を記述するのは構造上よくありません。

pタグの使い方

pタグは「Paragraph」のpを意味し、段落を指定するためのタグとなります。<p>～</p>で囲まれた部分がひとつの段落を構成しています。pタグ使用時に注意する点として、見出しタグを<p>～</p>の中に入れこまないようにしましょう。

例)

<h2>これは正しい例です</h2>
<p>This is a pen.</p>

HTML内にスタイルを記載しない

HTMLコーディングにおいて、cssによる装飾はもはや必須の作業です。通常cssファイルはHTMLのファイルと別に生成するのが一般的ですが、特定ページの作業をする際によくありがちなのが、HTML内に直接スタイルを記述してしまうことはないでしょうか。cssをHTML内に直接書いてしまうと、メンテナンスがしにくくなるだけでなく、本来反映されるべきcssが反映されないなど作業に不都合が生じることが出てきます。

そうならないためにも、HTML内にスタイルを記載することは極力避けましょう。

無駄なタグは使用しない

HTMLコーディングを行うにあたり、できるだけシンプルなコードで記述することがSEO上効果的である点は先に述べた通りです。そのためには、できるだけ無駄なタグを使用しないことが重要です。

とくに覚えたてのタグなどは使用したくなることもあるでしょうが、不用意な記述は避けるようにしましょう。

フォントサイズについて

Webサイト制作では、テキストのフォントサイズもデザイン要素として重要な役割を果たします。

Googleが読みやすいフォントサイズとして推奨しているのは16pxで、多くのWebサイトはこの16pxを基準に作成されています。なかには、デザイン面を優先したサイトで14pxや12pxなど小さいフォントが使用されているものもありますが、視認性が悪くなるため避けるのが無難です。

最近では、デバイスによっても見え方が異なることを考慮し、「em（親要素に対し相対的なサイズにて表示する）」を使用してフォントサイズを指定する機会が増えています。

cssにもコーディング規約がある

cssは、HTMLに記載されたコードをブラウザ上で表現される際にどのように見せたいかを定義する言語をいいます。

cssの使用によって、見た目や操作性の良いWebサイトデザインができるだけでなく、無駄なコーディングをできるだけ避け、フォントやボタン・表などの共通パーツの装飾を1度の記述にて定義することが可能です。HTMLにコーディング規約があるのと同様、このcssにもコーディングにおける規約があり、それらを遵守することでより無駄のないコーディングを可能にします。

ここからは、cssのコーディング規約についていくつか紹介していきます。

<h3>{ の位置に注意</h3>

cssを定義する際には

セレクタ {
プロパティ：値;
}

などの基本形式を遵守して記述を行っていきます。

その際に、「{ }(波括弧)」の一に注意しましょう。セレクタを記述した横に左側の波括弧を置き、改行してからプロパティ要素を記述します。

改行した際には、半角スペースで先頭を揃えましょう。最後に改行して右側の波括弧を記述するとcssの記述は終了です。同じ行にまとめて記載することもできますが、視認性が悪く修正しにくい欠点もあり好みが分かれます。

丁寧に改行することで問題箇所を把握しやすくしたり、メンテナンスしやすくなりますので、複数人でコーディングを行う場合には、ルールを統一したりしておくとよいでしょう。

id・classの名前の付け方に注意

cssのidやclassの命名については、具体的に意味のあるものにしておき、第三者が編集する場合でもわかるようにしておくのがベストです。たとえば、連番で管理するからといって「01」「02」等をidやclassに使用してしまうと、何を意味しているかがわからなくなってしまいます。またidやclassは不用意に長くしないことも重要です。綴りミスによりcssが適用されない原因にもなりますし、管理が大変になります。

他にも、「-(ハイフン)」と「_(アンダーバー)」を使用する場合は、どちらかに統一するか厳密なルールを決めるなどするとよいでしょう。

!importantはできるだけ使用しない

cssコーディングを行う際に、「!important」を記述することがよくあります。

この「!important」を使用した場合、cssの優先順位が最上位となるため、思ったようにcssが反映しない場合に記述してしまう人も結構いるのではないでしょうか。「!important」は使用頻度が少ないうちはそれほど問題になりませんが、多用してしまうとどのスタイルが現在適用されているのかがわからなくなり、収拾がつかなくなることがあります。「!important」は非推奨とされることが多いため、むやみやたらに使用しないようにしましょう。

まとめ

以上、SEO対策に効果を発揮するHTMLやcssのコーディング規約について紹介しました。

最近はWordPressのようなCMSを利用する機会も増えており、HTMLやcssを一から記述することが以前に比べて少なくなりつつあります。しかしページのカスタマイズを行う際は、どうしても直接コーディングすることが多いものです。その際にしっかりとコーディング規約を遵守したソースコードを記述できなければ「ページのカスタマイズを行った結果、検索順位が下がってしまった」ということにつながりかねません。

HTMLやcssのコーディング規約は大きくルールが変わるものではないため、最低限のルールを理解し、SEO対策を考慮したコーディングを記載できるよう本記事の内容を参考にしてみましょう。