HTMLとCSSは最新だとSEOも効果アリ?ブラウザへの対応も考えよう!

現在運用しているWebサイトをレスポンシブに対応させるには、構造や仕組み以外にもうひとつ確認しておくことがあります。それは、HTMLのバージョンとCSSのレベル。
かなり昔に制作されたホームページの場合、当時の仕様に則っているためHTMLやCSSが古い可能性が高いです。最新のものに対応させるためには、書かれているコードを最新のバージョンに合わせていく必要があるため、一度すべてのコードをチェックする必要があります。
今回は、HTMLのバージョンやCSSのレベルによって具体的に何が変わるのかを説明していきます。

HTMLとCSSってなに?

HTML(エイチティーエムエル)というのは、Webサイトを公開する文書に用いられる言語のことで「hyper text markup language」を略したものです。
ホームページを制作する言語の中で最も一般的に用いられていて、世界中のエンジニアが共通のものを使用しています。

CSS(シーエスエス)はHTMLなどの要素を分かりやすく表示させるために用いられる仕様のひとつで、「Cascading Style Sheets」を略したものです。
スタイルシートとも呼ばれますが、どちらも同じものを指していて、HTML同様世界中で統一された仕様が用いられています。

HTMLのバージョンは宣言で確認できる

まず、今運用しているホームページのHTMLのバージョンについて調べてみましょう。右クリックで「ページのソースを表示」を選択し、ページを構成しているHTMLのコードを確認します。
1行目に「!DOCTYPE html」とだけ書かれていればバージョンは5。もっと複雑で長い場合は5以下のバージョンだと考えられます。

バージョンの違いで「できる」ことが増えた

HTMLを4から5に上げることで「できることが増える」というのはもちろんですが「より簡単にできるようになった」要素が多くあります。
特に、動画や音声データを扱うコードが簡単に書けるようになっていたり、さまざまなAPI(外部から呼び出して使用できる便利な追加機能)が追加されていたりと、エンジニアがページを構成するのにできる幅が非常に広がっています。

バージョンアップで「できない」こともある

HTML4では使えた要素や属性のいくつかがHTML5で廃止されたため、単純にバージョンアップしただけだとエラーを起こしてしまったり、表示されなくなってしまったりする可能性があります。
「できることが増えたんだからとりあえずバージョンアップしちゃえば良いのでは?」と思うのは少し危険なので、一度制作会社の方にも確認してみると良いでしょう。

バージョンアップした方がSEO的にも良い?

レスポンシブデザインやスマホ対応ができていない時点でSEO的に大きくマイナスになっている可能性があるのですが、それ以外にもHTMLのバージョンアップによってSEOにプラスになる可能性が高い要素がいくつかあります。
具体的には、HTML5のバージョンアップで追加されたタグに「header」「footer」「section」「article」「nav」などがありますが、これらのタグの追加によって、ヘッダーなのか、フッターなのか、ナビゲーションなのかと、ページ内の役割を明確に示せるようになりました。

文書構造を示すと何故SEOに有利になるの?

すべての要素に「dev」タグを使って構成しても見た目は変わりません。
ただ、検索を表示させる立場になって想像してみてください。検索エンジンは、世界中のホームページを検索ロボットに調査させ、巨大な図書館のようなものにそれぞれのホームページのデータを保存しています。
そして、ユーザーが検索した時にこの図書館から的確に情報を取り出して表示させるという作業を繰り返しています。そのため、ページの中のどの部分が重要で、どの部分が重要ではないのかを正確に判断する必要があります。

ヘッダーやナビゲーション、フッターなど、ページを構成する要素としては必要でも、ページを理解する上では必要ではないものを分かりやすく整理しておくことで、より正しい情報を検索ロボットに伝えることができます。

CSSも2と3で「できる」ことが変わる

CSSの仕様はバージョンではなくLevelで分けられていて、現在、多くのWebサイトがCSS3に対応できるように書かれています。
そもそもCSSというのはWebサイトをデザインするために用いられるルールブックのようなもので、それに則ってページを表示させているのはGoogle Chromeやsafari、Internet Explorerといったブラウザです。
つまり、CSSのレベルをアップさせるということは、ブラウザに合わせて見せ方を変えていく処理をすることになります。

CSSのレベルで対応ブラウザが変わる

例えば、CSS3に対応しているタグを使ってページを構成した場合、Internet Explorerの古いバージョンではコードが対応していないために表示がうまくいかないことがあります。
ホームページを制作する際に、制作会社と「対応するデバイスやブラウザをどうするか」についてきちんと話し合っておきましょう。

使用率が高いのはsafariとGoogle Chrome

日本でよく使用されているブラウザといえば、SafariとGoogle chromeのふたつです。safariは特にiphoneの普及によって爆発的にユーザーを増やし、現在ではホームページを閲覧しているユーザーの半分以上がsafariというケースも少なくありません。
Google chromeもWindowsのパソコンを中心に多くのユーザーが使用するブラウザとしてその地位を確立しています。

Internet Explorerの使用率が高いのは?

日本で販売されているWindowsの多くは標準ブラウザとしてInternet Explorerを搭載しています。そのため「あまりネットに詳しくない」「とりあえずページが閲覧できればよい」という、普段あまりパソコンを使っていない方はそのままInternet Explorerを使用するケースが多いようです。
そのため、BtoBを考えてホームページを制作している企業はホームページの構成にInternet Explorerへの対応を考える必要があります。

エンジニア泣かせのブラウザInternet Explorer

safariとGoogle chromeは比較的仕様が似ていますが、Internet Explorerはバージョンによって対応していないタグが特に多く存在します。
そのため、エンジニアの方々はおそらく、「許されるのであればInternet Explorerは無視したい」と思っているのではないでしょうか。
専用にコードを書き直し、レイアウトが崩れたりしないように調整をしなければならないのに、そのブラウザからのアクセスは100人のうち数人となると、気持ちとしては当然です。

Internet Explorerの対応を考えよう

そうは言ってもアクセスがそれなりにあれば、対応しない訳にはいきません。
一般的には最新のバージョンか、最新とひとつ前のバージョンまでは対応させるということが多いです。アクセスの状況も加味しつつ、制作会社と話し合っていきましょう。

CSSも最新じゃないとSEO的によくない?

CSSが最新ではないことによって検索エンジンがサイトの評価を下げることはおそらくありません。
ただし、CSSのレベルが低く、最新のブラウザでレイアウトが崩れてしまっていた場合、ユーザーが離脱してしまう確率はアップするでしょう。
離脱が多いサイトは検索エンジンの評価が下がってしまう可能性が高いため、結果的にSEOに影響する可能性が高くなってしまうと考えられます。

まとめ

レスポンシブやスマホ対応はもちろんですが、HTMLのバージョンやCSSのレベルも検索順位を上げるための重要な要素となります。
最新のもので構成されていないホームページを運用している場合、順位が上昇しない理由になっている可能性も否定できませんので、すぐにでも改善しましょう。

この事業についてもっと詳しく知りたい方は、

Webサイト制作へ