画像SEO：検索エンジン向けに画像を最適化する

新しいブログ記事を書いているときでも、商品ページを作っているときでも、自分のページに画像が必要かどうか迷うことがあるでしょう。答えは常に「はい」です。画像はページに命を吹き込み、ウェブサイトのSEOに貢献します。しかし、ご心配なく。適切な画像がどこにあるのか、SEOのために最適化する方法はすぐに見つかります。さっそく始めましょう！

常に画像を使用する

画像を正しく使えば、読者はあなたの記事をより理解しやすくなります。あるいは、あなたが提供する製品やサービスについて、より良いアイデアを得ることができます。百聞は一見にしかず」ということわざは、Googleには当てはまらないかもしれません。しかし、1,000の退屈な言葉にスパイスを加えたり、図表で言いたいことを説明したり、ソーシャルメディアへの投稿をより魅力的なものにしたりする必要があるときには、確かに当てはまります。

書く記事や作るページに画像を追加して、より魅力的なものにするのだ。さらに、検索の状況が急速に変化し、テキストだけに頼らなくなっている今、ビジュアルをページに加えることはSEOにプラスになる。数年前にGoogleが発表した検索の未来像でも明らかなように、ビジュアル検索は今でも非常に重要な位置を占めている。しかし、AIをはじめとするマルチメディアの発展が進む中、画像（および動画）を最適化することで、検索エンジンにとっても人にとっても、あなたを見つけやすくなります。画像を最適化することで、トラフィックを増やすことができるのです。

適切な画像を見つける

画像SEO：この画像は「私たちの会社へようこそ」と言っているのではなく、「ある会社へようこそ」と言っているのです。
ストックフォトよりもオリジナル画像、つまり自分で撮影した写真を使う方が常に良いでしょう。チームページには、実際のチームの写真が必要です。この右の男や他のストックフォトの友人ではありません。

記事には、そのテーマに関連した画像が必要です。もしあなたがYoast SEOのコンテンツ分析で緑色の弾丸を得るためだけにランダムな写真を追加しているなら、それは間違っている。画像は記事のトピックを反映しているか、記事内で説明する目的を持っている必要があります。また、関連するテキストの近くに画像を配置するようにしよう。メイン画像やランキングを狙う画像がある場合は、それをページの上部付近に置くようにしよう。無理矢理感がなく、それが可能であれば。これには単純な画像SEOの理由がある。関連するテキストを含む画像は、最適化されたキーワードでより上位に表示されます。しかし、画像SEOについてはこの記事の後半で説明する。

代替画像

ウェブサイトで使えるオリジナルの画像がない？ユニークな画像を見つける方法は他にもあります。Flickr：例えば、クリエイティブ・コモンズの画像を使用できるCreative CommonsやUnsplashは素晴らしい画像ソースです。クリエイティブ・コモンズの画像を使用する場合は、制限事項を確認し、元の写真家の名前を明記することを忘れないでください。素晴らしい画像の入手先については、ブログ記事で紹介しています。明らかなストックフォトは避けましょう。どうしてもストックフォトを使いたい場合は、より本物らしく見えるものを選びましょう。しかし、何を使うにしても、人が写っている画像はストックフォトのように見えがちであることに気づくだろう。あなたが自分で撮影した写真でない限り、（私たちの意見では）それが常に最善のアイデアです。

写真の代わりとなるのは、イラストやグラフであることは明らかです。もしご興味があれば、専属イラストレーターのErwinがイラストの作り方について楽しい記事を書いています。また、最近ではアニメーションGIFも非常に人気があるので、佳作としてあげるべきだろう。

Google Imagesにアクセスすると、フィルター、メタデータ、そしてアトリビューションまでついていることに気づくだろう。これは、Googleが画像の中身と、その画像がより大きな文脈の中でどのように位置づけられるかを、ますます把握していることを示している。

記事で使用する画像の準備

写真であれ、イラストであれ、図表であれ、適切な画像を見つけたら、次のステップはウェブサイトでの使用に最適化することです。画像を追加する前に、いくつか考えておかなければならないことがあります：

正しいファイル名を選ぶ

そう、私たちは真剣です。画像のSEOはファイル名から始まります。画像を見なくても、その画像が何であるかをGoogleに知ってもらいたいのです。ですから、画像のファイル名にはキーワードを使いましょう。ノートルダム寺院に関する記事を書いていて、パリのノートルダム大聖堂から昇る日の出を写した画像を使う場合、ファイル名はDSC4536.jpgにすべきではありません。適切なファイル名はnotre-dame-paris-sunrise.jpgです。そうすることで、写真（そしておそらくあなたの記事）の主な主題がファイル名の先頭に来るようになります。

正しいフォーマットを選ぶ

画像の場合、正しいフォーマットは存在しません。画像の種類やどのように使いたいかによります。簡単に言うと、以下のことをお勧めします：

大きな写真やイラストにはJPEGを選びましょう。比較的ファイルサイズが小さく、色や鮮明さにおいて良い結果が得られます；
画像の背景の透明度を保持したい場合はPNGを使用します；
JPEGやPNGの代わりにWebPを使うこともできます。JPEGやPNGの代わりにWebPを使えば、ファイルサイズが小さくても高品質の結果が得られます。Squooshなどのツールを使って画像をWebPに変換できます。
ロゴやアイコンにはSVGを使いましょう。CSSやJavaScriptを使えば、SVG形式の画像を管理できます。例えば、画質を落とさずにサイズを変更することができます。

閲覧者の多くが特定のブラウザやデバイスを使用していることがわかっている場合は、CanIuse.com で希望のフォーマットがそれらのブラウザでサポートされているかどうかを確認してください。適切な名前とフォーマットを選んだら、次は画像のリサイズと最適化です！

画像のSEO対策

読み込み時間は、ユーザーエクスペリエンスと SEO 全体にとって重要です。サイトが高速であればあるほど、ユーザーや検索エンジンがページを訪問しやすくなります。画像は読み込み時間に大きな影響を与えます。特に、巨大な画像を本当に小さく表示するためにアップロードした場合。例えば、2500×1500ピクセルの画像を250×150ピクセルのサイズで表示した場合。

たとえかなり小さく表示されたとしても、画像全体を読み込む必要があります。ですから、表示したいサイズに画像をリサイズしてください。WordPressは、画像をアップロードした後、自動的に複数のサイズで画像を提供することで、これを支援します。残念ながら、ファイルサイズが最適化されるわけではありません。ですから、画像をアップロードするサイズについて考えてみてください！

レスポンシブ画像を使う

これもSEOには欠かせません。WordPress 4.4でデフォルトで追加されたので、WordPressを使用している場合は自動的に行われます。画像にはsrcset属性を設定し、画面の幅ごとに異なる画像を表示できるようにしましょう。

ファイルサイズを小さくする

画像SEOの次のステップは、拡大縮小された画像が圧縮されていることを確認することです。そうすることで、可能な限り小さなファイルサイズで提供することができます。WordPressがアップロードした画像を圧縮してくれることは知っておいて損はない。しかし、残念なことに、この自動圧縮だけでは十分でないことが多い。

もちろん、画像をエクスポートして画質のパーセンテージを試すこともできる。しかし、私たちは可能な限り高品質の画像を使用することを好みます。特に、最近は網膜やそれに類似した画面が普及していることを考えると。

EXIFデータを削除するなどして、画像のファイルサイズを小さくすることもできます。ImageOptimのようなツールや、Squoosh、JPEGmini、jpeg.io、Kraken.ioのようなウェブサイトの利用をお勧めします。

画像を最適化したら、Google PageSpeed Insights、Lighthouse、WebPageTest.org、Pingdomなどのツールでページをテストすることができます。

記事に画像を追加する

Googleは画像に何が含まれているかを認識する能力が向上しているとはいえ、まだその能力に完全に頼るべきではありません。すべては、あなたがその画像のコンテキストを提供するかどうかにかかっています！その方法については後述します。

画像の使用準備は整いましたが、ただ記事のどこかに放り込むだけではいけません。前述したように、関連するテキストコンテンツの近くに追加することは非常に役立ちます。画像がテキストに関連するように、テキストも画像に関連するようにすることで、ユーザーとGoogleが好むものになります。

キャプション

画像のキャプションは、ページ上の画像に付随するテキストです。この記事の画像を見ると、それぞれの画像の下にあるグレーのボックス内のテキストがキャプションです。なぜキャプションが画像SEOにとって重要なのでしょうか？なぜなら、人は記事をスキャンするときにキャプションを使うからです。人はウェブページをスキャンするときに、見出し、画像、キャプションをスキャンする傾向があります。1997年にさかのぼりますが、ヤコブ・ニールセンはこう書いています：

「スキャンを促進する要素には、見出し、大きな文字、太字、強調テキスト、箇条書きリスト、グラフィック、キャプション、トピックセンテンス、目次などがある。

すべての画像にキャプションをつける必要がありますか？いいえ。SEOのために画像を使用するかどうかを決めてください。私たちは、訪問者にとってキャプションがあることが意味のある場合にのみ、キャプションをつけるべきだと考えます。訪問者のことを第一に考え、画像SEOのためだけにキャプションを付けないようにしましょう。

altテキスト

altテキスト（またはaltタグ）は画像に追加するもので、何らかの理由で画像が訪問者に表示されない場合に、説明のためのテキストを配置します。ウィキペディアより良い表現はありません：

「読者がウェブブラウザの画像をオフにしていたり、視覚障害のためにスクリーンリーダーを使用していたりして、画像が利用できない場合、代替テキストによって情報や機能が失われないようにします。

altテキストは、ウェブサイトのアクセシビリティを高めるためにあります。ですから、使用する画像には必ずaltテキストを追加してください。また、適切であれば、そのページのSEOキーワードを含めることも検討しましょう。すべての画像のaltテキストにキーワードを詰め込んではいけません。最も重要なことは、検索エンジンと人々の両方がその画像を理解できるように、画像に何が写っているかを説明することです。画像に関連する情報が多ければ多いほど、検索エンジンはその画像を重要視します。

ただし、すべての画像にaltテキストが必要なわけではないことに注意してください。むしろ、altテキストはコンテンツの一部と考え、意味のあるところに追加すべきです。例えば、純粋に装飾のための画像であれば、altテキストは必要ありません。この場合、altテキストは読者に何の価値ももたらしません。一方、例えば、先月アイスクリームを検索した人の数など、統計的な画像を使用する場合は、altテキストに反映させる必要があります。altテキストに関するガイダンスは、W3の記事を参照してください。

タイトルテキスト

画像にカーソルを合わせると、タイトルテキストが「ツールチップ」として表示されるブラウザがあります。Chromeは意図したとおりにタイトルテキストを表示します。画像のタイトルテキストも似たようなもので、タイトルを使う人の多くは単にaltテキストをコピーしています。しかし、altテキストを完全に削除する人も増えています。なぜでしょうか？Mozillaの見解はこうです：

“タイトルには、主にスクリーンリーダーのサポートが非常に予測不可能であるという事実に基づく、多くのアクセシビリティ上の問題があります。” “ほとんどのブラウザは、マウスでカーソルを合わせない限り、タイトルを表示しません（したがって、例えばキーボードユーザーはアクセスできません）。

このようなサポート情報は、画像に添付するのではなく、記事本文に記載する方がよいでしょう。

画像の構造化データを追加する

ページに構造化データを追加すると、検索エンジンが画像をリッチな結果として表示するのに役立ちます。Googleによると、構造化データは上位表示には役立ちませんが、画像検索でより詳細なリストを表示するのに役立ちます。しかし、それだけではありません。たとえば、サイトにレシピがあり、画像に構造化データを追加している場合、Googleは画像にこの画像がレシピに属していることを示すバッジを追加することもできます。Google画像は、以下のタイプの構造化データをサポートしています：

製品
動画
レシピ

画像検索で画像をリッチに表示させたい場合、Googleにはいくつかのガイドラインがあります。ひとつは、構造化データのプロパティとして画像を指定する場合、その画像が実際にそのタイプのインスタンスに属していることを確認することです。さらに、画像はimage属性を持ち、クロール可能でインデックス可能でなければなりません。これらはすべてGoogleの構造化データ一般ガイドラインで確認できます。

OpenGraphとTwitterカード

先に、ソーシャルシェアのために画像を使用することについて述べました。ページHTMLのセクションに、以下のような画像タグを追加してください：

このようにします。

<meta property="og:image" content="http://example.com/link-to-image.jpg" />

これで、Facebookでの共有に画像が含まれるようになります（OpenGraphはPinterestなどでも使用されます）。

Yoast SEOにはソーシャルセクションがあり、ソーシャル投稿を設定したり、プレミアムバージョンではプレビューすることもできる。プレミアムユーザーは、Zapierインテグレーションを利用してソーシャルメディアプラットフォームへの投稿を自動化することもできる。投稿に使用したオリジナル画像のように、必ず高画質の画像を使用してください。ソーシャル・プラットフォームでは、より高画質で大きな画像を使用することが多いからです。正しく設定したのに正しい画像が表示されない場合は、URLデバッガーでFacebookのキャッシュをフラッシュしてみてください。Twitter CardsもTwitterと同様で、プラグインによって生成されます。

XML画像サイトマップ

もしあなたがウェブ開発者なら、XML画像サイトマップについて疑問に思うかもしれません。私はこれをXMLサイトマップの画像と表現したい。Googleはこれについて明確にしています：

さらに、Google image extensions for sitemapsを使用すると、ページで使用可能な画像に関する詳細情報をGoogleに提供することができます。画像サイトマップの情報は、Googleが他の方法では見つけられないかもしれない画像（例えば、あなたのサイトがJavaScriptコードで到達した画像など）を発見するのに役立ち、Googleにクロールしてインデックスしてほしいサイト上の画像を示すことができます。

時々、XML画像サイトマップについて質問されることがあります。私たちのプラグインでは生成しませんが、Googleのアドバイスに従い、ページや投稿のサイトマップに含めています。投稿サイトマップを下にスクロールすると、すべての投稿に画像を追加していることがわかります（そのための列があります）。XMLサイトマップに画像を追加することで、Googleが画像をインデックスしやすくなるので、画像SEOのためにも必ず追加しましょう。

画像CDN経由で画像を配信する

CDNは、最も一般的なサイトスピードの最適化の1つです。CDNを提供する企業の中には、画像専用のCDNを用意しているところもあります。画像CDNは、画像を最適化し、可能な限り速く訪問者に届けるという基本的なタスクを中心に構築されています。画像CDNを運用することで、画像の配信を何倍も何十倍もスピードアップすることができます。

画像CDNでは、画像の変換、最適化、配信を行うことができます。何がいつ読み込まれ、どのように動作するかを決めることができます。例えば、PNG画像はすべてその場でwebpに変換する必要があります。画像CDNには、処理を微調整するためのオプションがたくさんありますが、多くの場合、ほとんどのサイトに最適なデフォルト設定があります。

Sirv、Cloudinary、Imagekitなど、多くの画像CDNから選ぶことができます。また、Cloudflareのようなプラットフォームでは、画像のリサイズ、再フォーマット、提供方法を決定することができます。

画像SEO：まとめ

画像SEOは多くの要素の総和です。Googleは日々、画像内の要素を認識する能力を高めているため、画像とその要素がSEOだけでなく、優れたユーザーエクスペリエンスにも貢献していることを確認することは理にかなっている。グーグルを馬鹿にするのは愚かなことだ。

記事に画像を追加する際には、以下の12の点に留意しよう：

テキストにマッチした画像を使用する
画像のファイル名は適切なものを選ぶ
画像の寸法が表示されている画像サイズと合っていることを確認する。
可能であればsrcsetを使う
読み込みを速くするためにファイルサイズを小さくする。
ページのスキャンを容易にするため、必要に応じてキャプションを追加する。
画像のaltテキストを使用する。タイトルテキストは不要です。
画像に構造化データを追加する
画像にOpenGraphタグとTwitter Cardタグを追加する。
XMLサイトマップで画像を使用する
CDN経由で画像を配信する
できる限りのコンテキストを提供する

SEOやユーザーエクスペリエンスに貢献するだけでなく、画像はコンバージョンにおいても重要な役割を果たします。ですから、あなたのサイトの画像SEOの重要性を過小評価しないでください！