第21回SEO女子コラム「画像とSEOの関係について」

ネットの中の画像

サイト上に画像を表示させるには、画像をネット上へとアップロード、その後専用のタグを使いHTMLに記述をする必要があります。
サーバーなどにアップロードされた画像はそれぞれアップロードされて場所を示すURLがあるので、そのURLをタグを使って呼び出してあげることで、画像をサイトに表示させることが出来ます。
使用するタグは下記のようなタグです。

<img src="http://beginner-seogirl.com/uploads/sleepgirl.jpg" width="300" height="200">  <!-- HTMLの場合 -->
<img src="http://beginner-seogirl.com/uploads/sleepgirl.jpg" width="300" height="200" />  <!-- XHTMLの場合 -->

このタグは「imgタグ」と呼ばれています。
このimgタグに「height」と「width」の属性をつけることで、表示させる画像の大きさを決めることが出来ます。もともとアップロードした画像がちょうどいいサイズなら大丈夫ですが、本来表示させたいサイズより大きい物、小さい物を使用しているなら、この属性が重要です。大きさを指定しておくことで、レイアウトが崩れない思った通りの大きさで表示をさせることが出来ます。

もう一つ重要な属性が「alt属性」です。
altは画像が表示されない時に代わりに表示される代替テキストを記述する属性です。何らかのエラーや、画像が表示できないブラウザを使っている人がその画像を見た時に、どのような画像がそこにあるのかをテキストで示しておけば、理解してもらいやすいですよね。そのための属性です。

<img src="http://beginner-seogirl.com/uploads/sleepgirl.jpg" width="300" height="200" alt="ここに記述">  <!-- HTMLの場合 -->
<img src="http://beginner-seogirl.com/uploads/sleepgirl.jpg" width="300" height="200" alt="ここに記述" />  <!-- XHTMLの場合 -->

このalt属性ですが、実はGoogleはテキストコンテンツの一部として扱っているんです。Googleのキャッシュにも、きちんとテキストとして認識されています。
また、クローラが画像の中身までしっかりと理解をするようになったのはつい最近のことなので、依然としてどのような画像が貼られているのか理解するのにaltの代替テキストや前後の文章、画像のファイル名などを参考にします。クローラーに正しい情報を伝えるためにも、alt属性は重要な属性となります。

alt属性の代替テキストはより画像の内容が伝わりやすくないといけません。そのためにも、画像と一致した内容を記述する必要があります。いくつか例を上げながら見ていきましょう。

この画像にaltをつけていきます。まずこの画像はどんな画像に見えるか書き出していきましょう。

• 髪の長い女の子
• スマホを持っている
• 布団の上で眠っている
• 2冊本があり、一冊は広げてある
• 部屋の中にいる
• 部屋着を来ている

こんな感じでしょうか。しかし、この情報全てを詰め込もうと思うと…
「とある部屋の中、部屋着を着た長い髪の女の子が、2冊ある本のうち一冊を広げた状態のままスマホを片手に布団の上で寝落ちている。」
長いです。非常に長いです。確かに写真の詳細は伝わりますが、ここまで必要でしょうか？

ここで確認したいのが「画像の前後の文章」です。この前後の文章から、その画像を使って何が伝えたいのかを読み取ることが出来ます。
この画像は一番上で使っていたので、その前後の文章を抜き出すと…

と書きました。前半で頑張ると言っているにもかかわらず、後半に休憩を必要としていることを考えると、画像では「頑張りたいのにそうじゃない何か」を見ている人に伝えている事になります。
以上を踏まえると、「髪が長い」や、「部屋着を着ている」といった情報は特に必要無さそうじゃないですか？
前後のも加えて、改めてaltを考えましょう。

これはどうでしょうか！画像の内容とも一致していますし、文章にしても可笑しくありませんよね。

このようにaltは画像の内容と一致していて不自然でないものにする必要があります。したがって、キーワードの羅列や、詰め込みすぎも良くありません。画像が見えないクローラーやユーザーのためにも、わかりやすい記述を目指しましょう。

…というわけで、一番上の画像のaltは「スマホを持ったまま勉強中に寝てしまった女の子」にしています！

画像とコンテンツ評価

サイトコンテンツはSEO対策としてもとても重要なものです。
テキストや画像等のメディアはサイトのメインコンテンツになり、それが充実した内容だと検索エンジンにも評価されます。
今回はどんなコンテンツが評価されるのか、そしてサイトの画像によるSEOの効果について調べてみました。

本題に入る前にコンテンツ評価について詳しく調べました。
コンテンツ評価にはサイトのレイアウトなどの問題もありますが今回はテーマに沿っていないのでそれは抜きで解説します。
まず、検索エンジンが評価するコンテンツの条件は下記の通りと言われています。

• サイトのテーマに沿ったコンテンツが記載されている
• 初めて訪れたユーザーも理解しやすい内容が記述されている。
• 他のサイトよりもユーモア性のある内容である。

実際、検索エンジンからサイトを訪れたユーザーが、世の中に溢れかえったような内容を求めているというのはあまり聞きません。
たとえ面白くとも既出ネタばかりだとユーザーも飽きてしまいますし、継続してサイトを見ようとしなくなります。
この為、コンテンツ評価をされているサイト＝オリジナリティやユーモア性がありユーザーが継続して訪れる（役に立つ）サイトだといえます。

コンテンツ評価の基準について知った所で、次は画像の評価に関して調べてみました。
私は今まで、検索エンジンはテキストコンテンツをメインで評価し、画像への評価はほんのおまけ程度だと思っていました。
なので、テキストコンテンツがしっかり入ってるけど画像はテーマに合っていないような…という時もあまり気にせずスルーしていました。
ですが今回調べるとサイトの優先度を量る際には画像も評価され、テキストコンテンツがしっかり入っているだけではよくないことが分かりました。

さて、画像にも気を使ったほうが良いことはわかりましたが、じゃあどんな画像が良いかと言われると悩みますよね。
今回はフリー素材サイトの画像と有料素材サイトの画像で比べてみます。
例えば、私はSEOの画像を探しているとします。
フリー素材サイトで調べると適した画像がパソコンをしている画像しかない！というパターンが殆どです。（確かにSEOを画像で表すのは難しいです）
有料素材サイトを見てみると検索エンジンの画面をもじっていたりしてSEO対策をしていることを表すわかりやすい画像が出てきます。
お金をかけて良い画像にしたところで検索順位がどう変わるかわからないよ！という人は「無料でいいや」となってしまうと思いますが、実は無料と有料との違いは大きいんです。
なぜなら、検索エンジンは良い画像・悪い画像を見分ける事が出来るから！

検索エンジンが画像を見分けるメカニズムはこちら。

• 画像の文字から言語も判断している。
• 人物の顔も認識し、表情までも読み取っている。
• どのような行為をしているかも判断出来る。
• 人物の喜怒哀楽・その量なども判別可能。
• それぞれのテーマに合っているかも読み取れる。

つまり、検索エンジンは最終的に画像をテキストに落としこむ事が出来、それらを全て言語化する事も可能なのです。
もちろん無料の画像でテーマにしっかり沿っているなら問題ありませんし、無料の画像を使ってサイトを盛り上げるのもダメという事ではありません。
ただ、画像素材もキーワードやテーマを考慮しお金をかけて良い画像を選ぶことで検索エンジンにも有益な情報を与える事が出来ます。
今後SEOを考慮するならサイトの画像も見直すのもいいかもしれませんね。