SEOにおける「コーディング規約」を考える

みなさん、こんにちは。コミュニケーションプロダクツ事業部の鶴田です。
前回は構造化データのマークアップ、そして前々回は表示速度についてお話しました。
今回はSEOにおけるコーディング規約の話をしたいと思います。

※SEOにおける、といいましても、SEO自体がユーザー体験やコンテンツありきの話ではあるので、そもそもSEOにおけるコーディング規約、という言葉自体ちょっとおかしな部分かもしれませんが、今回はあえてわかりやすくするために入れさせて頂きました。

「コーディング規約」というと、普通は「プログラミングする上でのルール決め」といった意味合いがありますが、今回はそういった細かいタグの書き方の注意点やルールの書き方といったものではなく、SEOを考えたときに準拠したいコーディングの考え方をいくつか簡単にご紹介したいと思います。

JavaScriptは慎重に扱うこと

数年前までJavaScriptはSEOにとってあまり推奨されていない言語でした。というのも、クローラーが自動でサイトを見る処理(レンダリング)と実際にWEBブラウザを通して実行されるJavaScriptの処理を一致させることが困難で、どうしても機械(クローラー)と人(ブラウザ)とで見え方が変わってしまっていた背景がありました。

ここ最近ではクローラーによるレンダリング技術も向上し、クローラーと人とで見ることが出来る内容はほぼほぼ同じのものとなっています。

ただ、進化しているとは言いつつも、まだまだ処理に時間がかかったり、完全に内容を処理できていなかったりするのも実情です。そのため、JavaScriptを使う際は、どういった処理をJavaScriptにさせるか、本当にJavaScriptでないと出来ないものなのかは、十分に考慮する必要があります。

JavaScript関連でその他よく話題に上がるのがリダイレクトです。
リダイレクトとは、今いるWEBページから他のWEBページへ自動で転送する処理のこと。
それこそ以前は JavaScriptによるリダイレクト(location.hrefを用いた処理)は明確に非推奨とされていましたが、現在は代替手段としてGoogleもサポートしています。

実際に現場のWEB担当者の方に話を聞くと、サーバーサイドで設定するためのファイルを触れる権限がない、どういったシステムで動いているかわからない、制作会社に依頼しないといけないがコストがかけられない、といったお話はよく聞きます。こうした運用上、抗えない壁というのも往々にしてあるので、そうした場合はうまくJavaScriptのリダイレクトも使っていくとよいでしょう。

ただし、リファラー(転送元のページ)がうまく取得できなかったり、SEO上のページの評価の引き継ぎやインデックス(Googleの検索に表示される)に時間がかかったりする、という問題もあるので、基本は.htaccessなどを用いてサーバー側でのリダイレクトを行えるように調整を行うのがベストです。

モバイル対応はレスポンシブが基本

現状、SEOを考えたときのモバイル対応としては、レスポンシブWEBデザインを採用することがベストプラクティスとなります。

レスポンシブ

レスポンシブ以外のモバイル対応として、
ダイナミックサービング : PCサイトとスマホサイトのURLが同じでソースが違う
セパレートタイプ : PCサイトとスマホサイトのURLが異なり、ソースも違う
の形式がございますが、スマートフォンサイトの評価を元にインデックスされるモバイルファーストインデックス(MFI)を考えたときに、レスポンシブ形式が一番対応や管理が楽というのが大きなメリットです。(楽というよりなにもする必要がありません)

モバイル対応は、パソコンで見たときとスマホで見たときにコンテンツの差分を少なくするというのが基本です。テキストや画像やリンク、構造化データ、titleやdescriptionやcanonicalなどのmetaデータが該当します。もちろん、デザインやUI・UX上一部のメニューやリンクを非表示にするケースがありますが、基本的にスマホとパソコンで内容に差が出ないようにするのが理想です。

レスポンシブでの対応であれば、そもそもHTMLソースが同じになる仕組みのため、差分自体が発生しないので、特別な対応やMFIに向けて頭を悩ませることがなくなります。Googleもレスポンシブを明確に推奨しているため、とくに理由がない場合はレスポンシブでの対応を行いましょう。

画像は綺麗さと軽さを考える

画像のコーディングに関しては、いかに綺麗な画像のまま軽量化できるか、がポイントとなります。

画像を軽くする方法は前回のブログでも少し触れましたが、余計な情報を取り除いて圧縮処理を行ったり、新しい画像のフォーマットを取り入れてみたり、CSSスプライトを取り入れてみたり、CDNを取り入れてみたりと手法は様々ですが、綺麗なまま、というのが案外難しいものです。

綺麗なまま縮小させる方法として、ロゴやアイコンのような画像であれば「SVG」というフォーマットがおすすめです。
SVGというのはベクター画像(拡大縮小しても画像が荒くならない画像)のため、非常に使い勝手のよいフォーマットです。アイコンのような画像をPNGやJPGでそのまま拡大縮小すると、境界線がギザギザになってしまったり、なんとなく画像がボヤけてしまったり、という問題がある場合がございますが、SVGですと拡大縮小による画質の変化が起こらないため、綺麗なまま画像を表示させることが可能です。

また、SVGファイルはその汎用性もメリットの一つです。
SVGファイルをテキストエディタで開くと下図のようにコードによって生成されているのがわかります。

サイトのパーツ複製や新たに作成する時、いちいち画像編集ソフトを立ち上げて、というのもなかなか億劫ですよね。
SVGなら、このソースコードを編集するだけで色違いのアイコンが簡単に作れます。

現状はほとんどのブラウザで対応していますが、未対応のブラウザも一部存在しますので、そうしたブラウザには代替画像を表示させる、といった裏側の細かい準備も忘れずに対応をしていきましょう。

いかがでしたでしょうか？

JavaScript、モバイル、画像について簡単に見ていきましたが、そのほかにも正規化や構造化データなど細かい点で注意する点は多々あります。

素晴らしいコンテンツ作る、というのがSEOの前提ではありますが、その素晴らしいコンテンツを正しくGoogleに評価してもらうには、こうした細かいコーディング上の注意が必要です。
サイトを自ら運用している方は、ぜひ一度見直してみてはいかがでしょうか？