[say name="" img="https://bryog.com/wp-content/uploads/2020/09/vodman.jpg" ]SEO 対策として画像を「WebP」に変換しようと思うんだけど、WordPress ではどうすれば良いの？[/say]
と困っている人もいるでしょう。
そこで、この記事では下記の内容を解説していきます。
この記事で分かること
[box class="box3"]
- 画像を「WebP」に変換する方法
- WebP を WordPress に読み込む３つの方法
- 未対応のブラウザに対応する方法
[/box]
SEO 対策の１つとして、最も分かりやすいのは画像を圧縮することなんですが、改善を進めていくと「WebP」というフォーマットに突き当たると思います。
ただ「WebP」を導入するには問題がいくつもあって、なかなか踏み切れない人もいるんじゃないでしょうか。
ということで、WordPress サイトで WebP に画像変換させて表示させるまでの手順を紹介します。
次世代フォーマットの「WebP」とは
「WebP（ウェッピー）」は、グーグルが推奨する画質を落とさずにデータ容量を少なくした画像の次世代フォーマット。
「SEO 対策」をしている人なら分かると思いますが、サイトの速度を計測した時に改善方法として次世代フォーマットを利用するように言われると思います。
次世代フォーマットとして挙げらているのは、
[box class="box3"]
- JPEG2000
- JPG XR
- WebP
[/box]
など。
グーグルが 2010 年から提供を始めたのが WebP とあって、「Page Speed Insights」で計測するとやたら WebP への変更を求められます。
それだったら、フォーマットを変更しようとする人は多いと思うのですが、これらの次世代フォーマットには大きな問題があります。
それは、「ブラウザによっては表示されない」という問題。
次世代フォーマット対応状況
| JPEG2000 | JPG XR | WebP | |
|---|---|---|---|
| Chrome | × | × | ○ |
| Safari | ○ | × | △ |
| IE | × | ○ | × |
| Edge | × | ○ | ○ |
| Firefox | × | × | ○ |
[say]この記事では、未対応のブラウザではどう対応するのかも、後でちゃんと解説します！[/say]
追記：WebP が Safari に対応予定
[box class="box3"]
Safari 14 から Beta 版として WebP をついに対応すると発表がありました。ただ、正式のリリースで対応するかはまだ未定です。
>> Safari 14 Beta Release Notes
[/box]
さらに追記：Safari ブラウザの一部で WebP に対応
[box class="box3"]
OS 版 Safari と Big Sur 搭載の Safari では WebP が標準対応となりました。
ですが、それ以外のバージョンで見られている場合には、以前と同様に画像が表示されません。
[/box]
フォーマットを「WebP」に変換する方法
JPG や PNG のフォーマットになっている画像を「WebP」に変換するには、オンライン上で変換できるツールがとても便利です。
有名なところとして「Syncer」などがありますが、個人的にはグーグルが提供しているWEBツール「Squoosh」がおすすめ。
フォーマットを「WebP」に変換できることはもちろんなのですが、同時に画像圧縮や大きさの変更も可能となっています。
「Squoosh」の使い方はこちらの記事で紹介しているので、ぜひ参考にしてみてください。
[box class="box3"]
画像圧縮アプリ「Squoosh」が万能すぎる！【使い方とデメリットを紹介】
[/box]
「WebP」を「WordPress」にアップロードする３つの方法
画像のフォーマットを「WebP」に変換したら、「WordPress」にアップロードします。
ただし、デフォルトではこの作業ができません。
追記：WebP が標準対応に
[box class="box3"]
[/box]
いつも通りアップロードしてみると分かりますが、「セキュリティ上の理由によりこのファイル形式は許可されていません。」というエラーが表示されます。
実は、「WordPress」は「WebP」に限らず通常ではアップロードできないフォーマットがたくさんあります。
そのため、「WebP」をアップロードできるように設定する必要があります。
設定方法は、この３つ。
[box class="box3"]
- FTPでアップロード
- プラグインを使ってアップロード
- PHPに追記してアップロード
[/box]
どの方法でもアップロードはできるので、好きな方法を選ぶと良いでしょう。
方法①：FTP でアップロード
あくまで「WordPress」がフィルターをかけて「WebP」をアップロードできないようにしているだけなので、サーバー側にアップロードすれば可能です。
アップロードする場所
[box class="box3"]
/wp-content/uploads
[/box]
年月の細かいファイルがさらにある場合もありますので、その時は直近の月のファイルにアップロードしてください。
方法②：プラグインを使ってアップロード
FTP を触るのは面倒だという人は、WordPess の場合プラグインを使って「WebP」をアップロードすることもできます。
WebP 対応になるプラグイン
[box class="box3"]
[/box]
「WP Add Mime Types」は日本の方が作ったプラグインということで、日本語対応になっています。
そのため、国内での利用者が一定数います。
「PJW Mime Config」と「Disable Real MIME Check」はもう何年も更新されていないのでオススメはしないですが、念の為紹介しておきました。
この中で、唯一知っている人が多いと思うのが「EWWW Image Optimizer」。
画像を自動で圧縮してくれるプラグインとして有名なので、使っている人も多いはず。
実は、「EWWW Image Optimizer」にも「WebP」に対応する設定が付いています。
EWWW Image Optimizerで「WebP」に対応させる手順
紹介している他の３つは基本的に有効にすれば「WebP」をアップロードできるようになるはずですが、「EWWW Image Optimizer」の設定は「.htaccess」を触ります。
まず、「EWWW Image Optimizer」の設定画面にアクセスしたら、タブの中から「WebP」を探してクリックします。
次に「JPG、PNGからWebP」と書かれているボックスにチェックを入れ、「変更を保存」を押します。
そして、「Basic」というタブに移ってから１番に下に表示されているタグを全てコピーします。
「リライトルールを挿入」を押すと自動的にタグが「.htaccess」へ記述されるようになっていますが、エラーが出てしまうので手動で行った方が良いです。
そして先ほどコピーしたタグを「.htaccess」に貼り付ければ、設定は完了です。
「.htaccess」に貼り付ける時は、必ず一番上、つまり #BEGIN WordPress より上に貼り付けましょう。
「リライトルールを挿入」を押してはいけない理由は、一番下に挿入されることによるエラーが出る場合があるからです。
「EWWW Image Optimizer」の場合には、この設定が完了すれば JPG と PNG の画像をアップロードするだけで自動的に WebP フォーマットの画像も生成してくれるようになります。
しかも、「WebP」に対応していないブラウザだった場合にはアップロードした元画像を表示するようにもなっているので、かなり便利ですね。
[say]wpXサーバーでは、システムの理由からそもそも「EWWW Image Optimizer」が使えないのでご注意を。[/say]
方法③：PHPに追記してアップロード
自動で「WebP」に変換してくれる「EWWW Image Optimizer」で十分だと思う人も多いかもしれませんが、プラグイン嫌いの人の場合には PHP に追記する方法がおすすめです。
何も難しいことはなく、functions.php に以下のコードをコピペすれば「WebP」がアップロードできるようになります。
WebP 未対応のブラウザに対応させる方法
「EWWW Image Optimizer」を使ってしまえば WebP 未対応のブラウザの対応も自動でしてくれますが、FTP や PHP の追記ではあくまで「WebP」の画像をアップロードできるようにしただけにすぎません。
そのため、WebP 未対応のブラウザでページを閲覧された時にどうするかが問題となってきます。
そんな時は、「piture要素」を利用します。
「piture 要素」は、表示するのに適切な画像がなかった場合には img 要素の画像を表示するという性質があります。
img 要素には未対応ブラウザ用に JPG や PNG の画像を指定して、WebP 画像は対応ブラウザで表示させるように source タグで指定します。
つまり、下記のコードをコピペして使ってください。
「WebP」画像をアップロードするようにしましたが、未対応ブラウザのために圧縮した JGP や PNG もアップロードして表示できるようにしておくことになります。
AMP では picture 要素が未対応
上記のコードを使うことでブラウザによってフォーマットの切り替えができるようになりますが、1 点だけ問題があります。
それは、HTMLフレームワークの「AMP」を導入する場合、picture 要素が使えないので上記の方法で切り替えることができません。
なので、どのブラウザでも見られるように JPG や PNG だけにするか、もしくは未対応ブラウザの人には申し訳ないけど WebP 一択にするかの選択が必要となります。
当サイトでも両方を表示させる措置をとっていましたが、Core Web Vitals がランキング要因に含まれることから、本文に使う画像は基本的に WebP だけに切り替えました。
さいごに：画像を WebP に変換して SEO 対策しよう
以上で、WordPress サイトで WebP に画像変換させて表示させるまでの手順を紹介しました。
今後「WebP」が全てのブラウザで対応してくれればラクなんですが、最初から IE の人は無視するっていう選択も無きにしも非ずって感じですかね。
表示速度を改善したくて頑張っている人は、ぜひ次世代フォーマット「WebP」に対応してみてください。
