画像に関しましては、SEO上取り扱い方が非常に難しいです。デザイン性と読込速度とGoogleへの内容伝達を鑑みた上で、極力SEO面では効果的な設置を行いたいものです。そこで、今回は画像の取り扱い方についてご紹介したいと思います。
とにかく軽く！
画像を使うことで最も厄介なのは表示速度の問題です。ファイルが重たくなり、特にスマホでは(今後のアルゴリズム注力ビジョンとして)表示速度も重要視しています。そこで、以下のサイトをご紹介します。感動するくらい分かりやすく説明されていますので、ぜひご参考ください。
「【画像編】サイト表示速度を高速化するために確認したい１０項目」
一部抜粋し、簡単にまとめますと以下の内容になります。
- サイトの画像容量を軽くする⇒サイトの表示速度が高速化⇒サイト訪問者の早期離脱を防止
- 色の数 × ドットの数 × 色の配置の複雑さ
- 画像を軽くするためにはフラットでシンプルなデザインが良く、JPGよりもPNGが向いている
- <img>タグにはwidth,height属性を記載し実際の画像サイズと合わせるとレンダリングが速い
- CSSスプライト(アイコンやサムネイル画像をあらかじめ１つの画像にする)を活用する
- 高画質写真でもフラットなシンプルデザイン画像でもデータ容量を圧縮することでさらに軽量化
- JPG画像はExif情報(撮影日時、カメラの機種モデル名など)を削除する
特にCSSスプライトは画像による装飾演出時に効果を発揮します。Yahoo!JAPANでもCSSスプライトを活用しています。
テキストで良いものはテキストで！
昔よく見かけていましたが、何行にも連なるテキストを全部画像化し、altにそのまま全文記載しているページもあったりします。見た目も重要かとは思いますが、極力CSS背景による装飾化とWebフォント(表示速度に影響しますが…)等を駆使してテキストで記述することをオススメします。特に内部リンクのテーマ性を高めたいものは画像化することを避けると良いでしょう。
勿論、グローバルナビや見出しを美しくするために画像化し、内部リンクのテーマ性に関してはALTで読み込ませることもアリですし、私もサイト制作時にメニューを画像化することは多々ありますが、altの方がアンカーテキストよりも若干シグナルが弱まる印象は(まだ)感じます。
一応そういった認識を踏まえた上で、デザイナーの判断に委ねるケースが最近は多いです。
altは簡潔に！
alt属性はそもそもナローバンドユーザーに対して、読み込めない画像の代替えテキストとして記載するものです。従て全ての<img>タグでalt属性を記載する必要があります。勿論しっかりと、どういう画像内容かもGoogleに伝達する必要がありますので、画像の題材が分かるような3～4語までのaltを記載するよう心掛けてください。また、画像でリンクする場合は、altが実質上のアンカーテキストになります。
ユーザーにはパッと見えないものだからといって、不用意にSEO施策キーワードを含有しまくるのは絶対NGです。Googleからスパム扱いされる可能性が高いです。しっかりと画像を説明する文言を記載しましょう。
ファイル名もしっかり記載！
画像の内容が分かる説明的なファイル名を使用下さい。日本語名ファイルではなく、ASCII文字コードを推奨します(例：20150804232456.jpg ⇒ fuwafuwa-logo.jpg)。
整理して格納！
GooglebotはHTMLソースの情報から画像の場所を探しに行きます。従って画像ファイルをあちこちに保管したりしていると、その分読み込みに時間がかかってしまいます。ですので、分散して画像ファイルを置くのではなく、1箇所やいくつかのディレクトリでまとめるようにしてください。画像コンテンツが多い場合、画像サイトマップの送信も有効です(参考：「サイトマップに画像情報を追加する｜Googleヘルプ」)。
まとめ：簡潔かつ軽く
先日「SEO 検索エンジン最適化」の「引き算のデザイン、引き算のSEO」を拝読しまして、非常に納得のできる内容でした。勿論同じことが画像でも言えると思います。コンテンツの文字情報とalt属性が同一の画像やalt属性が文章になるような画像は”画像化すべきでない”コンテンツだと考えられます。
無作為に画像を多用するのではなく、簡潔かつ軽量に画像を取り扱うことができれば、ユーザー体験の上でも表示速度の上でも優れたサイトになれるかもしれません。
サイトを構築して、すでに設置してしまった画像を今更差し替えていくなんて途方もない作業かもしれませんが、是非どこかのタイミングで色々と実践してみてください。
