画像alt設定の意外なメリットとWordPressで設定する際の注意点

この記事は約7分で読めます。

alt設定めんどくさいとか言ってんじゃねー!!

画像にはaltをしっかりと設定しなくてはいけません!このことは、HTMLの教科書的なものを読むと、どの本にも書いてあることなのですが、実際自分がWebサイトを見るときに、altを意識することがほとんどなかったので、せいぜい企業のレギュレーションを守るために意識しないといけないことなんだろうぐらいの意識でいました。

そんなわけで、個人でサイトを立ち上げるときは、ほとんどaltを意識することがなかったのですが、いろいろと調べているうちに、どうもそれは誤りだったということがだんだんわかってきました。

この記事では、altを設定することのメリットを改めて見直すのと、Wordpressを利用する際に注意するべき点をお話いたします。

altをしっかりと記述することのメリット

ユーザビリティが高まる

画像にaltを設定する本来的な目的がこれになるかと思います。
画像にaltを設定してあげることで、画像を非表示にしていたり、なんらかの理由で画像の読み込みが遅かったりしても、画像の概要を知ることができます。
また、音声読み上げブラウザで読み上げた際に、画像にaltを設定していることで、画像の概要を音声で伝えてくれるので、ハンデを持った方にも優しいWebサイトとなります。

HTML的にも、画像にはHTMLを設定するのが正しいとされていますので、正しい文法を守っているという意味合いで多少SEO効果もあるのではないかと思います。
(もっとも、最近ではHTMLの文法が検索順位に及ぼす影響はだんだんと減ってきているようですが…)

と、こうしたことが画像のaltに関してよく言われることなのですが、私の中では正直上記のようなことにあまりメリットを感じていなかったので、個人的なサイトであればaltなんて設定しなくていいや!っていう選択肢を取ることが多かったのです。
でも、実際には、他にも以下のようなメリットもあります。

スニペットに抽出される

検索エンジンは、基本的にはスニペット(検索結果画面のタイトルの下に表示される説明文)に、meta descriptionを表示します。
ですが、検索キーワードによっては、検索エンジンの判断で、meta descriptionではなく、ページのコンテンツからよりキーワードにヒットした箇所を表示します。これには、画像のaltも当てはまります。
altにキーワードを入れ込むことで、多少SEO効果がありますよ、というのはよく言われる話ですが、最近ではaltにキーワードを詰め込むブラックハットな手法が流行った影響か、以前に比べて検索順位には影響しずらくなりました。
かといって、適当なaltを設定しているとどうなるでしょうか。以下のソースコードを見比べてみてください。

適当にaltを設定した場合(HTML)

<p>本日はおいしいラーメンを食べました。</p>
<img src="Screenshot_2015-11-01-22-44-05_19818181811321325654965849581321.png" alt="Screenshot_2015-11-01-22-44-05_19818181811321325654965849581321">
<p>気に入ったので明日もラーメンを食べに行きたいと思います。</p>

適切にaltを設定した場合(HTML)

<p>本日はおいしいラーメンを食べました。</p>
<img src="Screenshot_2015-11-01-22-44-05_19818181811321325654965849581321.png" alt="近所の豚骨ラーメン">
<p>気に入ったので明日もラーメンを食べに行きたいと思います。</p>

この状態で、「おいしいラーメン」で検索をした場合に表示されるスニペットを見比べてみましょう。

適当にaltを設定した場合(表示例)

altを適当に入力した場合のSERP表示例

適切にaltを設定した場合(表示例)

altを適切に設定した場合のSERP表示例

画像は「Yahoo/Google 検索結果(SERP)表示最適化ツール」のものを使用させていただいております。

適当にaltを設定した場合は、適切にaltを設定した場合と比較して、かなり表示がおかしな状態で見えるということがおわかりいただけるかと思います。
meta descriptionによってユーザーに訴求しやすいスニペットを使ってクリック率を上げるといったことは、小手先のテクニックが効きにくくなった現在では定石とされています。
そんな中で、こうしたスニペットが表示されてしまうと、それだけでサイトの信頼が落ちてしまいます。

また、検索エンジンは、前後の文脈を大事にする傾向があります。
画像を多く使用しているサイトで、こうした暗号のようなaltがたくさん出てきたら、ワードサラダと判定されてもおかしくありません。

画像検索に引っかかる可能性が高まる

GoogleにしてもYahoo!にしても、画像検索という機能が標準で備わっています。
画像検索といえども、画像から類似の画像を検索したり、イメージした画像を表示させたりといったことはまだまだ先のテクノロジーで、未だにキーワードによる画像の検索が主になるかと思います。
画像のaltをしっかりと設定しておくことで、通常の検索に引っかからなかった、もしくは順位が低かったとしても、画像検索に引っかかって流入を得ることができるケースがあります。

altにおけるいまさらな注意点

こうしたメリットがあるからといって、altは濫用してはいけません。
特に昔流行ったaltへのキーワードの詰め込みは、最もスパム判定を食らいやすい手法の一つですので、絶対に避けましょう。

また、デザインの都合上、水平線とか吹き出しを画像で表現することがありますが、こうしたものには無理にaltを設定する必要はありません。
以下のように、空の要素の記述で問題ないです。

<img src="icon.png" alt="">

altそのものを使用しなかった場合、勝手にファイル名がスニペットに表示されてしまったりするので注意しましょう。

スニペットとして表示された際に、不自然でないかどうかをalt記述のひとつの判断基準とすると良いでしょう。

WordPressのaltはファイル名がデフォルトで使用される

私も愛用するのがWordpressをはじめとしたCMSの類。
こうした、コーディングを効率化するツールを利用するときに、altの状態がどうなっているか確かめることは意外と大切です。

Wordpressであれば、画像をアップロードした際に、「代替テキスト」という入力ボックスが現れますが、ここに入力した値がaltとして設定されます。
ただ、この「代替テキスト」の欄を空白とした場合、デフォルト値としてファイル名の拡張子を除いたものが勝手に入ります。
なので、例えば先ほどのソースコードで出てきた「Screenshot_2015-11-01-22-44-05_19818181811321325654965849581321.png」をアップロードすると、こんな感じの代替テキストがデフォルトで設定されるわけですね。

Wordpressのデフォルトalt出力例

まとめ:面倒でも代替テキストの欄にはしっかりと入力しましょう

altに適切な名前を設定しましょう。そう、私はこんな感じで、今までWordpressのデフォルト設定を利用して意味不明なaltが挿入されたimgタグを量産してきたのです。
知らず知らずのうちに、なかなかいい感じのワードサラダを作ってきていたと思います。

ですが、altがスニペットに表示されたり画像検索に利用されることを知ってしまった以上、もう意味不明なaltを設定するわけにはいきません。

なんということでしょう。

抜け道として、適切な名前の日本語のファイル名をアップロードすることで代替テキストが自動的に適切な名前の日本語になってくれるという裏技的なやり方もありますが、日本語のファイル名はSafariで見ると表示されないという落とし穴があります。
「WP Multibyte Patch」というプラグインを有効化することで、Safariでも表示されるようになりますが、今度はファイル名が1バイト文字に強制的に変換される等、一長一短です。
(ファイル名についても、適当につけるよりは適切な名前を指定した方が検索エンジンには親切です)

やはり、ファイル名は英語でファイルの内容を端的に表し、altに日本語でしっかり内容を書いてあげるというのが最適解になるのでしょうね。

スポンサーリンク

Facebookページに「いいね!」いただければ、このブログの最新情報をお届けします!