大阪市中央区 システムソフトウェア開発会社

営業時間:平日09:15〜18:15
MENU

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

株式会社クローバーフィールドの経営理念
著者:YOSHIDA Takayuki
公開日:2018/02/26
最終更新日:2018/02/26
カテゴリー:技術情報

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要素の併用は判断が分かれるところですが、筆者は特に問題がないように思います。

    上に戻る