WebPの話を交えたSEO対策の心構え

次世代フォーマットWebP

Google PageSpeed Insightsのチェック項目に【次世代フォーマットでの画像の配信】がアラートとして追加されてからしばらく経ちました。
しかしながら、未だにjpegやpngフォーマットのみを使用し続けているサイトが多くあります。

Google PageSpeed Insightsにて対象URLを調査すると、サイトに掲載されている画像が、正常に次世代フォーマット化されている場合、以下のように「合格した検査」として表示されます。

WebP対応は難しくない

デザインレイアウトの見直し、ユーザーの動向分析から導く設計の見直しといった改善作業は、専門的で多くの時間を費やす事になるので、どうしても対応が後手になってしまうのは致し方有りません。
しかしながら、この【次世代の画像フォーマット】の対応は、比較的容易に実現できる改善作業の１つです。
未だに対応していないというサイトが多い理由はなぜなのでしょうか。

今回は、現時点において次世代フォーマットの中でも一番知名度が高く、個人的に扱いやすいと感じているWebPを紹介していきます。

WebPってなんだ？

WebPはJPEGフォーマットと同様に非可逆圧縮フォーマットになりますが、GIFフォーマットにあるようなアニメーションに対応しており、且つPNGフォーマットのようなアルファチャネルが使えるといった性質があります。

また非常に圧縮が強力で、JPEGやPNGの圧縮率を遥かに凌ぐデータが出ています。
つまり、従来のフォーマットよりファイルを軽量化することが出来るので、更に表示速度を改善させることが可能なのです。

WebP導入にあたっての懸念事項

上記のようにメリットしか見当たりません。
にも関わらず、WebPを代表する次世代画像フォーマットの存在は、知ってはいるが実際に導入することに足踏みをされている方が多くいます。

その主な理由としては、以下のような懸念事項が挙げられます。

• 対応していないブラウザがある？
• 順位アップに寄与するものではない？
• 現行の画像フォーマットからどのように変換すればよいかわからない

個人的には、それだけの理由で？と感じてしまいますが、以降で１つ１つ解説していきます。

対応していないブラウザがある

こちらで現在のWebPブラウザ対応状況を閲覧することが出来ます。

WebP image format Image format that supports lossy and lossless compression, as well as animation and alpha transparency. Can I use

私は2019年頃から各所へWebPの導入を始めましたが、利用当初からブラウザの対応状況や順位上昇効果などお構い無しでした。

本日時点の対応状況を見てみると、未対応ブラウザはごく一部です。
SafariもmacOSは未対応ですが、市場の大多数が使用しているiPhoneは対応済みで、IEに至っては利用者がいるかいないかわからない程度のユーザー数なので、気にする必要があるのか疑問です。

また、仮にWebPに対応していないブラウザで訪問された場合は、未対応ブラウザのみJpegやpngを出力してやれば良いのではないでしょうか。

.htaccess 記述例）
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} (?i)(.*)(\.jpe?g|\.png)$
RewriteCond %{DOCUMENT_ROOT}%1%2.webp -f
RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1$2\.webp [L,T=image/webp,R]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>

このような切り替えは、ひと昔前であれば、IEとNetscape(NN,NC)ではHTMLのレンダリング仕様がまったく異なっており、且つWindowsとMac間におけるプラットフォーム間でも大きく仕様が異なりました。
iModeやJ-Phone、ezwebといったモバイル端末の対応も振り分けページがごく普通に導入されていたので、ユーザー環境（環境変数）によって見せ方を変える感覚には抵抗がありません。

Webpを導入する意味を改めて考えてみましょう。
そもそもウェブサイトを運営している以上、前提としてGoogleからの流入確保は避けて通れない道であり、そのGoogleが開発・推奨している画像フォーマットに対応しないのであれば、別のインフラやメディアで勝負するほうが早いのです。

更にいうと、これは画像フォーマットだけの話ではなく、自ら率先して新しい仕組みを導入して、「他を出し抜いてやるぞ」くらいの意識を持って取り組みましょう。
いつの時代もそうですが、新しいものや見慣れないものに拒絶反応を起こす方が多いようで、
「周りがやり始めたら」「よく理解してから」…と、日本人は特に二の足を踏んでしまいがちです。
普及する前に対応しなければ、先行者利益といったイニシアチブは取れません。

他者を真似て、右にならえをしている状態では、他のサイトと同じような作りとなり、質に至っても他と比べて50歩100歩の状態となり、Googleから特別評価されるような箇所はなくなります。

何でもかんでも導入しろと言うわけではありませんが、ご自身でしっかり調査を行った上で、「これは有用だ」と判断できるものに勝負を仕掛けていけばよいのです。

順位アップに寄与するものではないという情報が多い

Googleから「WebP使ってるから順位上げてやろう」というように、ただ単にWebPを導入した事だけで評価される確率は少ないと考えられます。

しかしながら、AMP導入のSEO効果やメリット・デメリットの記事でも解説したように、Googleは「ページの読み込み速度をモバイル検索のランキング要素に使用します」と明言しています。
更にGoogleが自ら提供しているPageSpeed Insightsにおいても、次世代フォーマットに未対応であれば、導入を促すアラートが出るということ、そしてご存知のようにWebPはGoogle社が開発している画像フォーマットであることから、同社が推奨している画像フォーマットが導入されているサイトに対して評価を下げる事は考えにくいのです。

現行の画像フォーマットからどのように変換すればよいかわからない

世の中には便利なフリーソフトが沢山公開されています。
一先ず「WebP フリーソフト」でググってもらえれば、すぐにお目当てのものが見つかるでしょう。
また、WordPressを使用している方であれば、こちらも様々なプラグインがリリースされているので安心です。
ローカルでの変換作業は面倒、且つCMSを導入されていない方は、libwebpのあるサーバ環境で、GDやImageMagickといったライブラリでも入れて、シェルスクリプトで既存イメージを一括コンバートすることがお勧めです。

まとめ

記事タイトルを【WebPの話を交えたSEO対策の心構え】としたのは、WebPを導入するかしないか、といった事ではなく、常に新しいものを検証、導入していこうという心構えです。

手あたり次第、目に付いたものを組み込めといった意味ではなく、Googleの基本コンセプトを理解した上で、いいものを選択していく力をつけましょう。

また、WebPは大規模なサイトにとても適していると思います。
１つ数キロバイトのファイルも、１０００人がアクセスすれば数Ｍバイトに膨れ上がるのです。

負荷対策が適切に行われている状態で利用されるWebPは、トラフィックによる通信量を大きく削減できるといったメリットがあるので、運営者にもその恩恵があります。

それでも、あなたはまわりの対応を待ってから導入を検討しますか？
それとも、あなたが次世代の標準環境を率先して作り上げてきますか？