Wordpress

WordPressで画像を表示させる時のaltタグの設定

更新日:

ふと気になって検索したところなるほど!と思ったので備忘録。
これまでAltタグは画像にマウスを乗せた時に表示される説明文、と勘違いしていたのですが、いろいろ調べるうちにそうではないことがわかったので豆ブロ上でシェアします。



画像をどうやってテキストで説明するか

たとえば下の画像(写真)をどのようにテキストで説明すればいいでしょうか?

上海外灘の夜景

写真→どこの写真?

夜景→どこの夜景?

わたしだったら「上海外灘の夜景」または「上海外灘から見た東方明珠付近の夜景」とでもつけようかな、という写真です。

Altタグとは

altは英語のalternative(代替可能な)から来ており、画像がどのような属性を持っているのかを説明します。なお、このタグは画像にのみ使われるタグで、画像を表示させる際には必須のタグです。Wordpressで画像をアップする際にも自動的にこのタグがつけられています。

Altタグが持つ2つの主な役割

(1)この画像がどのような画像なのかを説明する(画像検索対象になる)
(2)画像がなんらかの理由で表示されない、またはユーザー側が画像の表示をオフにしている時に代わりに表示するテキスト

本来は音声読み上げリーダー(iPhoneのVoiceoverやらくらくホンなどのように画面に表示されている内容を音声に変換するリーダーソフト)に読ませる内容を設定する、という意味合いが強かったのですが、最近はGoogle画像検索にかかりやすくするSEO観点の面からaltタグが注目されています。

確かにGoogleは人間ではありませんから、画像を見るだけはどのような内容を表すのか簡単には判断できません。(機械が画像を判断する技術はすでにあるとは思いますが)
ですので、画像をアップロードする人がこれは「○○」という画像ですよ、という情報提供をすることで検索エンジンは画像の内容を判断しやすくなります。

中にはわざと画像表示をオフにしている人もいる

実際このようなユーザーは画像表示をオフにしていることが多いです。

(A)ブラウザ読み上げソフトを使っている人(視覚障害者に多い)
(B)データ通信量の節約を目的としている人

Altタグの本来の役割は画像が表示されない時に表示させる説明文

しかしSEOに効果があるからといって、altタグに画像とまったく関係ない検索用キーワードを入れたり、キーワードを羅列するのは考えものです。もしあなたが読み上げソフトを使っていたとして、読み上げた内容が実際の画像とまったく異なっていた場合、無駄なメモリと時間を使うことになります。また、最近ではGoogle側もキーワードの羅列などの不自然な文章についてはSEO目的とみなし、画像検索の対象から外しているとも聞きます。

WordPressでのAltタグ設定方法

WordPressで画像をアップする際のAltタグ設定方法はとても簡単です。
ちなみに前回の記事で紹介したWordpress for Androidアプリで画像をアップロードする場合にはAltタグには自動的に”image”という文字列が入ってしまうので、必要に応じて変更する必要があります。

代替テキストを設定するとAltタグに反映される

Wordpressで代替テキスト(Altタグ)を設定する

画像を表示させる際にaltタグは必須の要素で、Wordpressで画像をアップする際には「代替テキスト」を設定すればOKです。

代替テキストに何を書いたらいいの?

文字が書いてある画像だったらその文字を、風景写真だったらどこで撮ったどんな風景、という内容を短い文章で入力するといいでしょう。目を閉じて説明文を聞くだけでどんな画像かイメージできるような文章がいいです。

また、装飾用に画像アイコンを使っていて、画像自体に意味がない(伝えたい内容が特にない)場合はここは空欄にします。(そうすれば読み上げソフトでは読まれません)

まとめ: Altタグの説明文をちゃんとつけることでユーザーにも検索エンジンにもやさしくなる

アクセシビリティの高いサイトを作るために必要なのはサイト運営者としてとても大事なこと。検索エンジンが内容を理解しやすいサイトは自然と上位表示されるので、検索経由のサイト流入も自然と増えます。また、Google Adsenseなどのコンテンツ連動広告を利用している場合は検索エンジンにわかりやすいサイトを作ることでより適切な広告が表示され、おのずとクリック率も上がります。

というわけで、人にも検索ロボットにもやさしいサイトづくりを一緒に目指してみませんか?

 

忍者_豆ブロ記事下(左)_170507

忍者_豆ブロ記事下(左)_170507

豆ブロ人気記事

Wix.comのテンプレート一例 1

企業サイトを作る際に担当者はいろいろなサービスを比較検討しているはずです。最近Facebook広告によく登場するWix.comが企業サイトに向いているのか、Wordpressユーザーという視点で見ていきたいと思います。

呼称の洗濯を間違えたゆえに微妙な空気が流れる二人 2

【人気記事】ビジネス韓国語で相手をどう呼ぶかは非常に重要な問題。「○○씨」=○○さんではないことに注目。

【画像】Panasonic ジェットウォッシャー 携帯用 海外用 外箱と本体 3

水で食べかすを吹っ飛ばすジェットウォッシャー。すっきりできておすすめです。韓国でも買えますよ。

-Wordpress
-, ,

Copyright© 枝豆ポッドキャスト放送局 , 2017 All Rights Reserved.