皆さんこんにちは、Endorphinsのマーケティングロールのイトマンです！
昨今はスマートフォンのカメラも高性能となっているため、気軽に写真を撮影してWebサイトにアップできるようになり、個人で作るWebサイトでも写真をたくさん使った華やかなサイトが増えてきました。
そこで今回は画像がSEOに関してどのような影響を与えているのかをまとめましたので、ぜひWebサイトの表示が遅いと悩んでいる方や、画像を多用している人に読んでいただければと思います。
また、現在悩んでいない方でも、定期的にコンテンツ配信を考えている方にとっては画像の扱いは大切になりますのでぜひ確認してみてください！
目次
画像のSEOとは
SEOとはSearch Engine Optimizationの略で、ユーザーが検索を行った際に上位に自社サイトを表示させるための施策のことを指します。
これはwebサイト内の文章はもちろん、画像による影響を受けるのですが、その影響は直接的なものと間接的なものの2つに分けることができます。
直接的な影響
上記図のように、オーガニック（自然）検索時のキーワードに応じた画像の結果、もしくは写真自体による検索時の結果が上位表示されるかどうかに影響があります。
また、キーワードによっては皆さんが普段使いしている「すべて」の項目にも一部が表示されます。
例）「富士山」と検索をすれば、富士山の画像や動画の検索結果の一部が「すべて」に表示されます
ここを普段は意識されていない方で、自社サイトが画像SEO的にどうなっているのか気になる場合には以下の手順で確認をしてみてください。
＜手順＞
・権限を持つGoogleアカウントにて「Google Search Console」を開く
・「検索パフォーマンス」にて「検索タイプ：画像」を選択する
（日付については必要に応じて変更を行う）
・表示された「クリック数」や「表示回数」、「平均掲載順位」を元に画像SEOの有効度を判断する
＜画像の評価を上げるには＞
Googleから公式に言及がありますが「ユーザーの利便性を最優先に考慮してページを作成する」ことが大切です。
以下の項目が公式より紹介されています。
・内容にあった画像を使用するなど適切なコンテキストを提供する
・画像を最適な場所に配置する
・重要なテキストについてはテキストでしっかりと表示し、画像に埋め込まない
・有益で質の高いサイトを作成する
・あらゆる端末（特にモバイル端末）に対応したwebサイトを作成する
・画像用に優れたURL構造を作成する
より詳しい内容については下記のリンクのGoogle検索セントラルにて確認してみてください。
間接的な影響
こちらは実際に画像がどのくらい貢献をしているかではなく、画像によって他の要素が影響を受けていないかを確認することになります（他に悪影響を与えるため、画像自体の評価にも一部影響があります）。
特にwebサイトの表示速度への影響は大きく、「表示速度が遅い→ユーザーの離脱率が上がる→webサイト自体の評価が下がる」の負の連鎖に入ってしまいます。
自社サイトについて直接的・間接的のどちらも関係ない場合には、急ぎの対応は必要ありません。
将来的にコンテンツをどんどん増やしていく際に間接的な部分を気をつけていただければと思います。
画像SEOに有効な5つの施策
直接的な面ではGoogleの公式から色々なヒントが紹介されていますので、ここでは間接的に影響がある「webサイトの表示速度」を改善する方法についてまとめていきます。
なお、実際のwebサイトの表示速度が気になる場合にはGoogleが提供している「PageSpeed Insights」で確認をしてみてください。
＜5つの施策＞
１：掲載媒体にあったサイズを利用する
２：適切なフォーマット（拡張子）を利用する
３：Lazy -Loading（遅延表示）を利用する
４；Webサイト上で画像のサイズを明示的に指定する
５：メタデータを最適化する
掲載媒体にあったサイズを利用する
PCのディスプレイで表示する画像のサイズとスマートフォンで表示する画像のサイズは当たり前ですが異なります。
ディスプレイ向けに準備した高解像度の写真をスマートフォンの表示に直接流用するのは、画像データの重さを考えると無駄が増えてしまいます。
１枚程度であれば微々たる範囲かもしれませんが、1つのページに写真は多く利用されていますので累計するとかなりのデータ量です。
この対策として活躍するのが「レスポンシブ対応」です。
表示される媒体のサイズに応じて元の写真の解像度を変えるようにすることで、無駄の少ないwebサイトを作成することが可能です。
適切なフォーマット（拡張子）を利用する
| 名称 | 拡張子 | 色数 | 圧縮方法 | 透過 | アニメーション |
|---|---|---|---|---|---|
JPEG | .jpg（.jpeg） | 1670万 | 非可逆圧縮 | 不可 | 不可 |
PNG | .png | 1670万 | 可逆圧縮 | 可 | 不可 |
GIF | .gif | 256色 | 可逆圧縮 | 可 | 可 |
WebP | .webp | 1670万 | 非可逆圧縮 | 可 | 可 |
画像の拡張子に関してWebサイト制作においてよく利用されているのは「JPEG（ジェイペグ）」・「PNG（ピング）」・「GIF（ジフ）」の3つです。
それぞれに特徴・強みがあり、使い分けることて無駄なデータ容量を使わなくてよくなります。
しかし、今後は上記3つの代わりとして「WebP（ウェッピー）」と呼ばれる、Googleが開発した画像ファイル形式の利用も視野に入れることをお勧めします。
JPEGと同じ非可逆圧縮でありながらPNGのように透過処理が可能で、GIFに変換することなくアニメーション利用しても十分に軽いという、いいとこ取りの拡張子になっています。
また、これだけ便利になっているにも関わらず、ファイルのデータサイズはJPEGやPNGと比べると軽くなっています。
これほど優秀なのになぜ世間にあまり広まっていないのか。これは、次世代の拡張子を導入する際に必ず生じる弱点である「対応ブラウザの少なさ」があげられます。
ただしこの弱点も最近ではほぼ払拭しているため、今後はどんどん利用が進んでいくと思われます。
※IE以外の「Chrome」「Edge」「Safari」といった主要ブラウザで利用ができるようになっていますので、ほぼ問題ありません。
Lazy -Loading（遅延表示）を利用する
画像などが必要になる直前でデータの読み込みを開始する「Lazy-Loading」という手法が有効的です。
図のように、現在ユーザーが閲覧しているエリア（青色）にいる際に次のエリア（黄色）のエリアの読み込みを行います。
この時、その次のエリア（薄いベージュ）はまだ読み込みは開始されないため、データのダウンロード量を抑制することができます。
もちろん、ユーザーが黄色のエリアまで閲覧が進むと薄いベージュのエリアも読み込みを開始します。
こうすることで、ユーザーに過度なストレスを与えることなく、webサイトの表示スピードの向上をすることが可能です。
特に、ページに訪れた最初の段階で全てのデータを読み込む必要がない点がユーザーファーストとして優れています。
なお、少し前まではJavaScriptを用いてしか表現できなかったLazy-Loadingですが、最近はHTML・CSSのみで簡単に実装できるようになっています。
Webサイト上で画像のサイズを明示的に指定する
ユーザー視点ではなわかりにくいですがwebサイト上では以下のように処理が行われています。
1：画像を読み込む
2：読み込んだ画像のサイズを初めてwebサイト側が認識
3：webサイトの表示サイズに合わせて画像のレイアウトを調整
そこで事前に「width」・「height」でサイズを指定しておくことで、webサイト上に無駄な作業をさせずに済み、表示速度の向上に繋がります。
１枚程度であれば大きな差があるわけではありませんが、枚数が増えるにつれて少しずつ影響が大きくなりますので、コンテンツを多く発信する予定の方は最初から整えておくことをお勧めします。
メタデータを最適化する
デジカメなどで撮影したデータにはEXIFと言って「撮影機器の種類」から「焦点距離」などの情報が含まれています。
これらのデータは撮影した人には必要な情報かもしれませんが、webサイトで閲覧するユーザーからすれば必要のないデータになります。
こういった不必要なメタデータを削除することで、1つ1つの写真への影響は少ないかもしれませんが、大量に写真を利用しているwebサイトではかなりの分量を削減することが可能です。
なお、メタデータを削減する方法はいくつもありますがGoogleが提供している「Squoosh」は、上で紹介した「WebP」の作成などにも使えるためお勧めです。
（おまけ）CDNを活用する
webサイトを作成する上での施策では無いためおまけとしていますが、webコンテンツを配信する仕組みでwebサイトの表示遅延を解決する方法もあります。
その1つにCDN（Content Delivery Network）というものがあり、利用をすることでサーバーを分散させることができるためアクセス集中による表示速度の低下を防ぐことが可能です。
もちろんメリットがある一方でデメリットもありますので、利用しているwebサイトの特性に合わせて活用するのかどうか判断をするといいでしょう。
画像SEOの施策でWebPを利用する際の注意点
拡張子「WebP」を導入する場合には気を付けておくべき点が1つあります。
すでに作成しているwebサイトに使っている写真などをWebPに変換して軽量化する場合、拡張子が変わることで写真のURLが変わってしまいます。
例）JPEGの犬の写真をWebPに変更して差し替えた
(JPEGの写真) example.com/dog.jpg ⇨ (WebPの写真) example.com/dog.webp
webサイト上の見た目の画像は変わっていなくても、検索エンジンからするとURLが変わってしまったため画像が変わったと認識してしまいます。
そうなると、これまでその画像で蓄積してきたコンテンツのパワー（SEO）が一旦リセットされてしまいます。
そうならないためにも、webページをリニューアルした際などに行う「リダイレクト」設定を画像でも行うようにしておきましょう。
なお、これから作成するwebサイトにWebPの画像を最初から活用する分には、リダイレクトの必要はもちろんありません。
まとめ
今回は画像のSEOについてすぐに活用できる施策も含めてまとめました。
画像1つ1つは些細なデータかもしれませんが、その積み重ねでユーザーに利便性をもたらすのか、不便さをもたらすのかが決まります。
まとめて作業をすることは大変だと思いますので、日々のコンテンツ作成作業の際にぜひ活用してみてください。
