当ブログでは、エンジニア経験者の夫婦がそれぞれの経験に基づいた情報を、不定期に発信しております。

【初心者OK】SEO対策における効果的な画像の使い方とは?

こんにちは、ゆめたろうです。

ブログを始めて、ある程度の記事を書き上げた方は、「記事内に画像があった方が見やすくなるし、コンテンツの質も上がる」という事に気付き、すぐに画像を使い始める事かと思います。

確かにその通りで、画像があった方が見栄えもよく、一般的にSEOにも良い効果をもたらすのですが、注意しなければならないことやSEO対策的により良い使い方が存在することも事実です。

という事で、今回は『SEO対策における効果的な画像の使い方』というテーマで、分かり易く解説していこうと思います。

画像が担う役割とは?

授業で教科書を使って勉強したり、パワーポイント等でプレゼンを行ったりする際、『テキストのみが使われている』なんていうケースは、恐らく過去に一度もないのではないかと思います。

 

藪から棒かもしれませんが、『百聞は一見に如かず』ということわざがありますよね。

最近では、Audible等で「本を読む」から「本を聞く」という形に置き換わってきている事もありますので、「読む」と「聞く」の情報量はほぼ同じであると仮定すると…

『百は一見に如かず』となります。
※誤字じゃありませんからね(笑)

 

つまり何が言いたいかというと、『画像にはテキストの100倍くらいの情報量がある』といっても過言ではないという事です。

コンテンツの内容に適した画像を、記事内に幾つか配置するだけで、それだけ情報量が多くなり、良質なコンテンツとなる訳です。

 

では、画像を使いまくれば良いのか?

と言われると、当然そういう訳ではありません。

多く使いすぎると、情報が抽象的になってしまいやすくなりますし、SEO対策において重要な『記事の読み込み速度』を犠牲にしてしまう事に繋がります。

 

では、どのような使い方をすれば、適切にコンテンツの質と読み込み速度のバランスを保ち、且つSEO対策にも強い記事を作り上げる事が出来るのでしょうか?

これからそれを掘り下げていこうと思います。

適切な形で画像挿入しよう

「適切な」と言われると、ピンと来ないかもしれませんが…。

具体的に最適化していく必要がある要素は、下記2点となります。

  • ファイルサイズ
  • ファイル形式(拡張子)

これら2つの要素について、もう少し詳しく解説していこうと思います。

ファイルサイズについて

まずはファイルサイズから。

詳しく解説…とは言いましたが、色々数字を書き綴るよりも、体感して頂くのが一番早いかと思います。

以下にサムネイルを置いてますので、実際に拡大表示して頂ければ良く分かるかと思います。

 

  • 重たい画像のサムネイル(4032*3024ピクセル)

重たい画像の例

 

  • 軽い画像のサムネイル(512*384ピクセル)

軽い画像のイメージ

 

 

いかがでしたでしょうか?

インターネットの回線速度にもよりけりですが、白黒画像であっても、読み込み速度が体感で分かるくらいには違ったのではないかと思います。

そして恐らく、画質にも大きな差は無いように見えたのではないでしょうか?

 

それは、実際にダウンロードする画像データが高画素の物であっても、表示するモニタ側がそれに追いついてないケースが多いからです。

スマホの場合は特に、こういった横長の画像だと、ほとんど違いが分からないと思います。

更に言えば、発展途上国のような、通信インフラの整備が遅れている場所ともなると、スピードの違いをより顕著に感じる事となるでしょう。

別に医療目的で使うような画像でもないので、[画質] < [速度]で記事を構成した方が、SEO的に有利なケースが多いのが現状です。

 

とはいえ、そもそも海外を視野に入れたような記事でもないし、5Gが実用化されるとなると、今までの常識がガラっと変化する可能性は十分にあります。

この辺りの動向は、自分もしっかりと注視しておきたいと思います。

ファイル形式について

画像のファイル形式というと[bmp][jpeg][png]あたりが、一般的に思い浮かぶのではないかと思います。

しかし、サイトの表示速度を計測できるPageSpeed Insightsにて計測した際、これらの形式の画像のみを用いていると、ほぼ確実に『次世代画像フォーマットへ対応した方がもっと早くなりますよ』という監査結果が出るはずです。

 

この次世代画像フォーマットの中でも、お勧めのファイル形式が[WebP(ウェッピー)]となります。

「次世代画像フォーマットってなんか凄そう!!」

と思われる方もいらっしゃるかもしれませんが、次世代とは言いつつも、実際に仕様が公表されたのは2010年と結構前になります。

とはいえ、対応していないブラウザもまだ残っていたりはするのですが、最近ではChrome以外にもFirefox等の主要なブラウザがWebPに対応してきているという背景もあり、今後も対応ブラウザは拡大していくと思われます。

という事で、私自身もなるべくこの[WebP]のファイル形式を使うようにして記事を投稿していたりします。

具体的な変換手順が気になる方はこちらへどうぞ。

※現在工事中です。

Googleクローラーにとって画像データだけでは不親切!?

私達人間にとって画像というものは、見るだけで様々なイメージを膨らませたりすることが出来るものです。

先ほども言ったように、『画像にはテキストの100倍くらいの情報量がある』といっても過言ではないのです。

 

しかしながら、Googleクローラーにとってはそうではありません

画像を風景として認識することは出来ず、クローラーにとっては『1と0』というただのデータでしか無いのです。

当然ながら、画像データそのものには文字のデータを含んでいないため、そういった情報を読み取る事が難しい。

 

では、どのようにすればGoogleクローラーにとっても親切な形で画像を盛り込むことが出来るのでしょうか?

最低限やっておきたいこととしては、以下の2つがあります。

  • 画像のファイル名を分かり易い物にする
  • 代替テキスト(alt属性)を設定する

これらの要素についてもう少し掘り下げていこうと思います。

 

画像のファイル名を分かり易いものにする

これについては、見出しが直感的で分かり易いと思います。

そのまんまで、ファイル名を実際の画像と関連付けてあげる事は、Googleクローラーとって親切な行為であると言えます。

例えば、[20190508.JPG]というファイル名だと、撮影時期を整理したりするのには便利かもしれませんが、Googleクローラーにとっては、このファイル名だと一体何の画像なのかがさっぱり分かりません。

猫の画像なら[Cat.JPG]とか、犬の画像なら[Dog.JPG]という感じで、最低限分かり易いファイル名を付けてあげるようにしましょう。

 

代替テキスト(alt属性)を設定する

これも先ほどと同じ理由で、Googleクローラーにとって『何の画像なのか』を判別するための材料の一つとなります。

極力簡単に説明しようと思いますので、alt属性がどうのこうの…と言った事まではここではお伝えしません。

では、具体的にどんな情報を設定すればいいのか?

その画像を詳しく説明するような表記を設定すればOKです。

 

例えばこんな画像であれば

「あくびをしながら背伸びをする猫」

と言った感じです。

なるべく抽象的な説明にならないように意識して書く事で、クローラーに「どんな画像なのか」を正確に伝える事が出来るでしょう。

設定方法について

それではどうやって設定すればいいのかを詳しく解説していきましょう。

まずはいつも通り画像をメディアに登録すると…

画面右の方に以下のようなテキスト入力欄があると思います。

ここの[タイトル]と[代替テキスト]に設定したいデータを入力すればオッケーです。

タイトルを[bulldog-ball]に。

代替テキストを[黄色いボールで遊んでいるブルドッグ]に変更しました。

その後は更新してあげて、普通に画像を投稿してあげればオッケーです。

非常に簡単ですね!

まとめ

以上、『SEO対策における効果的な画像の使い方』というテーマで解説していきましたが、いかがでしたでしょうか?

細かい作業ではありますが、やっておくことでクローラビリティが向上します。

クローラーから見ても、コンテンツ内容と画像の情報が一貫しているのであれば、より高品質なコンテンツとして評価されることとなるでしょう。

作業的には非常に簡単なので、確実に設定して記事の質をアップさせていきましょう!

 

それでは今回はここまでとなります。

ありがとうございました!

記事はいかがでしたか?

こちらには記事を読んで頂いた方に対して最も適した広告が表示されます。

<スポンサーリンク>


ノートパソコンで画像編集しているイメージ
宜しければフォローして下さると嬉しいです!