画像に関するライティング2:猫でもできるWebライティング17

Webサイトに掲載した画像は、検索エンジンにある程度自動で解析されています。Webサイト管理者や運営者がより能動的に画像についての情報を検索エンジンに知らせる方法について考えます。
HTML文書で画像を表示するにはimg要素を用います。img要素にはalt属性があり、alt属性はHTML4以降は必須の属性とされています。alt属性はalternative、つまり代替する内容を指示する役割があります。alt属性を指定しておくと、画像が表示されなかったときなどに指定したテキストが表示されます。
img要素において、alt属性に近い役割を持つtitle属性も使うことができます。title属性は補足情報を指定することができますが、多くのブラウザではtitle属性があるとツールチップとして表示してくれます。なお、title属性はalt属性よりも多くの要素に使うことができます。
alt属性、title属性にはテキストを指定することができますが、このテキストの内容は検索エンジンの解析対象です。にもかかわらず、alt属性、title属性の内容については見出しのライティングほどは注力されていない場合が多いのではないでしょうか。画像の枚数が増えるとたしかに面倒ではありますが、特にalt属性については手を抜かず設定したいところです。一方で、装飾のために用いる画像にはalt属性にテキストを入れないほうが良さそうです。
前述したようにalt属性は画像が表示されなかったときに表示されるテキストを指定できます。その内容は、ある程度詳しい方がよいでしょう。たとえば猫の写真について、「猫」と入力するのと「おもちゃで遊ぶ猫」と入力するのと、どちらがより良いのかは自明です。一方で、一時期SEOのためにalt属性にたくさんテキストを詰め込む手法がとられましたが、検索エンジン側ですぐに対応が施され、今ではスパムと認定されます。過剰に文章を書くのはNGです。
画像には「キャプション」をつけることもできます。画像のキャプションはfigure要素とfigcaption要素を使って実装します。figcaption要素はalt属性と同様、画像の内容を説明するのに使うことができます。alt属性には長い文章を入れるべきではないので、長くなる場合はキャプションを使ったほうが良さそうです。alt属性とfigcaption要素の併用は判断が分かれるところですが、筆者は特に問題がないように思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)