SEO初心者がまずやるSEO対策5/画像最適化
WEBページを作成する上でSEOを考慮するならば、高品質コンテンツの作成が求められます。高い品質のページ作りを追求する際には、価値が高い情報を提供することはもちろんですが、サイト訪問者にとって、見やすいページになっているかを考えることが大切です。
そこで重要性を持つのが画像データの存在です。ページのテキスト間に挿入することで、テキストで解説している内容の理解促進につながるほか、読者にとって箸休め的な効果もあります。高品質コンテンツを目指す際は、画像を最適化することを検討してください。
画像最適化とは
画像最適化とは、画像データのファイルサイズや形式といった要素をWEBページの掲載などに適した状態へと編集することです。画像編集する際、具体的には下記のような点を見直します。
- ファイルサイズ
- 画像サイズ
- 解像度
- 画像形式
ファイルサイズとは
ファイルサイズとは、ファイルに含まれる情報量のことでファイルが持つ容量を指します。容量の単位は2進法で表記されるのですが、下記のような種類があります。
- B(バイト)
- KB(キロバイト)
- MB(メガバイト)
- GB(ギガバイト)
一般的なWEBページで利用される画像データの場合は、キロバイトといった単位の容量を持ちます。ただし、イラストレイターやフォトショップといったツールを利用して生成させた本格的な画像データの場合は、ギガバイト以上の容量を持つこともあります。そしてこうした大きなファイルサイズの画像データをWEBページに掲載するときは、最適化してサイズを小さくする必要があります。
画像サイズとは
画像サイズとは、画像そのものの寸法のことで、ピクセルの総数を指します。そもそも画像データは、ピクセルと呼ばれる色情報で形成されているのですが、これは画像を構成する最小単位の画素を指します。具体的には、下記のようにサイズを計算します。
- 画像サイズ = 横に並ぶピクセル数 × 縦に並ぶピクセル数
また、ピクセルは下記のような単位で数えられます。
- px(ピクセル)
解像度とは
解像度とは、ピクセルの密集度、またはピクセルの大きさを指します。画像データの枠組みがあるとして、そこにどのサイズのピクセルが並んでいるかといったことが解像度によって決められています。要するに、画像データの見え方としては下記のようになります。
- 解像度が高いほど、ピクセル数が多くなって鮮明な画像に見える
- 解像度が低いほど、ピクセル数が少なくなって粗い画像に見える
なお、解像度は下記のような単位で数えられます。
- dpi(ディーピーアイ):1インチあたりのピクセル数
画像形式とは
画像形式とは、ファイルデータとして保存するときに使用される記録方式のことです。画像形式によってファイルに保存されるデータが異なりますので、それぞれファイルサイズに差がでます。WEBサイトに掲載する場合は、ファイルサイズを小さく抑えたいので、一般的には下記のような形式が用いられます。
- JPG(ジェイペグ)
- PNG(ピング)
- GIF(ジフ / ギフ)
- BMP(ビットマップ)
- WebP(ウェッピー)
画像を最適化する重要性
通常、WEBページ内の情報が増えれば増えるほど、ページの読み込み速度が遅くなります。そしてサイト訪問者がWEBページを開く際に、ページが表示されるまでにかかる時間が増えると、ユーザビリティが低下します。その結果、ページの利用にストレスを感じた訪問者はバックブラウザしてしまいます。
そこで、膨張したWEBページ内のデータ容量を減らす必要があります。画像データは、WEBページ内のコンテンツのなかでも容量面で大きなウェイトを占めますので、ファイルサイズをできるだけ小さくして、ページにかかる負荷を減らすことが求められます。
そのため、WEBページに画像データを掲載するに、一般的には画像を圧縮したり形式を変換してファイルサイズを調整します。ファイルサイズを小さくすることで、WEBページやサーバーにかかる負担が減少します。画像のファイルサイズを抑えることで、サイト訪問者がWEBページを開くための読み込み時間が短縮されます。WEBページの読み込み時間が短いと、サイト訪問者が快適にページを閲覧できます。ページ読み込み時間の短縮は、SEO効果に直結するだけでなく、サイト訪問者によるサイト内回遊や滞在時間の伸びにもつながります。
WEBページに画像を掲載する利点
WEBページに画像データを掲載すると、下記のような利点があります。
- テキストに対する理解が深まる
- ページ滞在時間が伸びる
- Google画像検索にインデックスされやすくなる
テキストに対する理解が深まる
WEBページのなかでも、とくに情報ページの場合はテキストが多くなりがちです。そこでテキスト内容を補完するようなイメージ画像を掲載しておくと、サイト訪問者としてはテキスト内容に対する理解を深めやすくなります。
ページ滞在時間が伸びる
WEBページに画像データを掲載すると、一般的にはページ滞在時間が伸びると言われています。これは、サイト訪問者がテキストを流し読みする際に、画像データが視界に入ると、一瞬だけクロールする手が止まる傾向にあることが要因です。このようにページ内の環境を整えてあげることで、コンテンツ品質が高まりSEO効果を得られやすくなります。
Google画像検索にインデックスされやすくなる
Google検索エンジンには、画像検索する機能があります。画像検索には、画像データがインデックスされます。そのため、WEBページに画像データを掲載してインデックスしておくと、画像検索で情報を探す検索ユーザーのページ流入が見込めます。
Google画像検索の仕組みとは?活用方法から検索方法までを解説
WEBページに画像を掲載する方法
WEBページに画像を掲載する方法は下記のとおりです。
- 素材を用意する
- 画像を最適化する
- 画像ファイル名を決める
- サーバーにアップロードする
- HTMLファイルに画像URLを記す
1.素材を用意する
まず画像データの素材となるデータを集めます。素材を取得するための一般的な手法としては、下記のようなものがあります。
- 画像編集ソフトで生成する
- 撮影やスクリーンショットで写真を撮る
2.画像を最適化する
次に、取得した画像データを最適化していきます。まず画像データが適したファイル形式になっているか確認してください。とくに、画像編集ソフトで生成したメインビジュアルやバナー画像といったものはファイルサイズが大きい形式になっていることがありますので注意してください。
画像を適切なファイル形式に変換したら、圧縮ソフトやサービスを利用してファイルサイズを小さくしてください。
3.画像ファイル名を決める
画像を作成したら、ファイル名を決めます。このときのファイル名は、WEB掲載時に画像ファイルのURLとして表示されます。そのため、画像と関連性が高い単語を英数字で入力してください。
4.サーバーにアップロードする
次に、用意した画像をサーバーにアップロードします。アップロード方法はさまざまありますが、ワードプレスのCMSを例に出すと、パソコン上からアップロード画面にドラッグ・アンド・ドロップ(Drag And Drop)するだけでアップロードが完了します。
ここまでくると、画像データのURLが発行されますのでコピーして控えておいてください。
5.HTMLファイルに画像URLを記す
最後に、WEBページに画像URLを貼り付けます。具体的には、HTMLファイルに画像表示するためのタグを書き込みます。画像データを掲載するためには、下記のようなタグを利用します。
上記の「src」の部分に画像データURLを、「alt」に画像データの説明文を記入します。
Google検索エンジンと画像データの関係性
Google社は、検索エンジンの検索結果を表示するためのアルゴリズムとして、テキストだけでなく画像データの存在も重要視しています。そのため、Google検索エンジンと画像データは密接な関係性があります。Googleは画像データを利用した下記のようなサービスを展開しています。
- Google画像検索エンジン
- Googleレンズ
- WebP
Google画像検索エンジン
Google画像検索エンジンとは、キーワード検索した際に、インデックス済みの画像データのなかから関連性が高いものをピックアップして検索結果に表示するサービスのことです。Google画像検索エンジンの使い道は人それぞれですが、主に下記のような目的で利用されています。
- 特定の画像データを探しているとき
- 解説内容をイメージ図で確認したいとき
Google画像検索エンジンの利用方法は簡単です。Google画像検索にアクセスするだけで、画像データをキーワード検索できます。
Googleレンズ
Googleレンズとは、画像データを用いてインデックス済みの別の画像を検索する検索エンジンの機能です。画像検索エンジンとGoogleレンズの違いは、前者が検索するためにテキスト(キーワード)を入力するのに対して、後者では画像を利用する点です。
Googleレンズは画像データを基に画像データの検索を可能としますので、類似画像を探すといった使い道があります。そもそもGoogleレンズでは画像データに含まれる中身を解析できますので、下記のようなこともできます。
- 検索に使う画像内に含まれるテキストの翻訳
- 検索に使う画像内に含まれる建物のマップ検索
さらに、Google社は、Googleレンズにマルチサーチという機能を2023年2月に全世界で提供を開始しました。現在では、「画像+テキスト」で検索することも可能となっています。
WebP
WebP(ウェッピー)とは、Googleが開発した新たな画像形式のことです。JPEGやPING、またGIF形式の強みを取り入れたもので、下記のような特徴を持ちます。
- 非可逆圧縮
- 透過対応
- アニメーション
さらに圧縮率が高く、ファイルサイズも小さく抑えることが可能です。これにより、既存の画像形式と比較すると、機能性が高く、かつWEBページ表示が速くなるといった利点があります。
その一方で、WebPが新たな画像形式という理由で、当初は対応しているWEBブラウザが限られていました。いかにWebPが優れた画像形式であっても、画像表示できないのであればサイト訪問者のユーザビリティを損ねます。こうした背景から、これまでは普及しづらい環境にありました。ただし2023年現在では、下記のような主要ブラウザで対応していることから、今後は主流になる画像形式と考えられています。
- Microsoft Edge(マイクロソフトエッジ)
- Firefox(ファイヤーフォックス)
- Safari(サファリ)
- Google Chrome(グーグルクローム)
次世代画像フォーマットWebPとは?WebPの作り方と使い方を解説
画像検索結果にインデックスさせるポイント
画像検索結果に画像データをインデックスさせるためには、下記のようなポイントを抑える必要があります。
- 優れた画像データを作成する
- WEBページのテーマに関連性を持たせる
- altタグを入れる
- 画像サイトマップを使う
優れた画像データを作成する
Google検索エンジンの基本的な考えとして、ユーザーに価値ある情報をインデックスするというものがあります。そのため、画像検索エンジンにインデックスさせるためには、WEBページ同様に高品質の画像である必要があります。
WEBページのテーマに関連性を持たせる
掲載するWEBページと無関係の画像データは、コンテンツとしての価値が低いとGoogleに判断されてしまう可能性があります。そのため、必ず「ここに画像を掲載する意図や狙い」を検討の上で画像を掲載してください。
altタグを入れる
画像データをインデックスさせるためには、検索エンジンに「なんの画像なのか」を理解させる必要があります。そこで利用されるのが、HTMLのalt(オルト)属性と呼ばれるものです。そもそも画像を掲載するためには、画像URLをHTMLファイルに書き込む必要があります。
この記述で、WEBページに画像を掲載すること自体は可能です。しかし、このimgタグの中に、alt属性を追加してあげることで、検索エンジンに対して画像データの説明文をテキストで提供できます。
ただし、alt属性に長文を書き込んだり、キーワードを詰め込むといったことをすると、検索エンジンにスパム行為と判断される危険がありますので注意してください。
画像サイトマップを使う
WEBサイトのサイトマップと同じ要領で、画像サイトマップを用意すると、検索エンジンに画像データの存在を認知させられます。とくに、ECサイトを運営している場合は、各商品の画像を検索結果に出すことがコンバージョンに直結しますので重要な施策です。画像サイトマップを作成する際は、下記のようなコードの例を参考にしてください。
<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″
xmlns:image=”http://www.google.com/schemas/sitemap-image/1.1″>
<url>
<loc>http://example.com/sample.html</loc>
<image:image>
<image:loc>http://example.com/image.jpg</image:loc>
</image:image>
<image:image>
<image:loc>http://example.com/photo.jpg</image:loc>
</image:image>
</url>
</urlset>
画像最適化のよくある質問
画像最適化に関する、よくある質問をまとめています。
Q:画像の最適化は、なぜ必要なのですか?
Answer)WEBページに掲載する際に、ページ表示速度を落とす要因になるためです。
画像データは、WEBページ内のコンテンツとして容量面で大きなウェイトを占めます。画像データのファイルサイズを小さくすることで、サイト全体のページ表示速度の向上につながります。
Q:画像サイズとファイルサイズの違いとは?
Answer)「サイズ」という単語が指す対象が異なります。
画像サイズとは、画像に含まれるピクセルの総数のことで画像ファイルの縦横の長さを指します。一方、ファイスサイズとは、画像ファイル自体の総合的な容量を指します。
Q:ファイルサイズを小さくする方法は?
Answer)画像ファイルの形式を変更する、または圧縮ツールで容量を減らします。
画像ファイルを生成するための形式にはさまざまな種類があります。なかには、画像ファイルが大きくなりがちな形式と画像データを小さくできる形式があります。このほか、画像ファイルを圧縮するツールやサービスがありますので、こういったものを利用して画像ファイルサイズを小さくします。
まとめ
SEOとWEBマーケティングの東京SEOメーカーTOPへ戻る