alt属性、確認していますか？その役割や適切な書き方の解説です。

ブログ記事を書いていると内容を補足するためや、リンク先のイメージを示すために画像を挿入することがあると思います。

画像を挿入時には、alt属性を正しく活用していますか？意外と見落としているケースも少なくありません。

実は読者にも検索エンジンにも有効で、SEO的にも効果を望めます。というわけで、当記事ではalt属性とは何なのか、その役割や適切な記述方法を解説していきます。

alt属性とは

alt属性とは、WEBサイトのページ内に挿入されている画像が何なのかを説明するテキストです。読者は画像を見れば理解できますが、Googleなどの検索エンジン（クローラー）は、あらゆる画像を完全に判別することはできません。

そこでセットされている画像が何を意味しているのかをテキストで伝えるためにalt属性を記述する必要があるのです。検索エンジンに画像の意味を正確に伝えることで、画像検索にもヒットするようになったり、相応なSEO効果も望めます。

また、通信環境やリンク切れなどが原因で画像を表示できない場合も、alt属性に記述しているものが表示されます。画像が読み込まれていなくても読み手に概要を伝えることができます。検索エンジンに対してだけでなく、ユーザービリティの向上にも繋がるわけですね。

ワードプレスでのalt属性の入力方法

alt属性の入力方法を解説していきます。WordPressの投稿内での書き方をエディター別に紹介いたします。お使いのテーマや画像の表示箇所によっては、カスタマイズが必要となる場合もあります。

クラシックエディター

通常のテキストエディターで画像を挿入した際は、以下のような感じで入力します。

<img src="sushi.jpg" alt="お寿司" />

ビジュアルエディター

ビジュアルエディターでは、画像をクリックして鉛筆マークの「編集」を押します。

下記の画面が開くので、「代替テキスト」に入力します。

ブロックエディター

グーテンベルグのブロックエディターでもほぼ同じですね。画像をクリックして鉛筆マークの「編集」を押すと上記同様の画面が展開されるので「代替テキスト」に入力できます。

「メディアを追加」

また下記のように「メディアを追加」を選んだ時点でも画像に代替テキストを入力することができます。ここで入力しておけば、画像を挿入した際にalt属性に反映されます。

【※注意点】
すでに記事内に設置している画像のaltタグには反映されませんので、記事内に設置する前に代替テキストを入力するか、記事内をエディターで直接編集する必要があります。

alt属性の適切な書き方とは

「画像が表示されない場合に、代わりに表示されるテキスト」という意識で記述すれば、大きな間違いは少ないと思いますが、記述方法に気をつける必要があります。下記画像につけるalt属性で説明していきます。

長くなりすぎたり、短すぎないようにする点に注意しましょう。SEO対策を意識して、闇雲にテキストを入力するのは逆効果になりますし、具体性の乏しすぎるのもNGです。

まずは良くない例です。

<img src="sushi.jpg" alt="寿司,sushi,まぐろ,びんとろ,甘海老,サーモン,いくら" />

<img src="sushi.jpg" alt="寿司" />

上記の例が画像の代わりに表示されても、想像しにくいですよね。1つ目は、キーワードを無闇に詰め込みすぎですし、必要とは思えないほど詳細に書かれています。2つ目は、端的過ぎて人によってイメージが異なる場合があります（本文の内容によってはこれで問題ないこともあります）。

何の画像かを具体的かつシンプルに記述する必要があるのですが、最適な一例はこんな感じです。

<img src="sushi.jpg" alt="皿に乗っているいくつかの握り寿司" />

このように記述しておけば、テキストだけでもある程度想像がつきます。多くの人が同じようなイメージを想像できるような文言で記入しておくといいでしょう。

すべての画像にalt属性を設定する必要があるのか？

答えはNoです。

どの記事でもすべての画像に具体的にalt属性を設定しなければいけないわけではありません。装飾目的の画像には意味はありませんし、その場合はalt属性は空白のままで問題ありません。画像が表示されなかった際に記事の内容がわかりにくくなるものに、積極的にalt属性を設定しておきましょう。

設定したalt属性を確認する方法

すでに公開している記事のalt属性は、chromeの検証ツールなどを用いて確認することができます。alt属性を確認したい画像にカーソルを合わせてソースコードをチェックしてみましょう。

デベロッパーツールの使い方は下記を参考にご覧ください。

まとめ

記事をわかりやすくしたり、内容を補足するために挿入した画像が正しく読み込まれない時があります。そういう時に代替テキストであるalt属性が役立つわけです。通信環境が悪くても最低限のテキストが表示されれば、どんな画像が表示されるはずだったのか読者に伝わります。

読者だけでなく検索ボットにも有効です。検索ボットには画像のビジュアルから何の画像かを判断する能力はありません。テキストで記載されているalt属性の情報を元に何の画像かを判断するからです。

alt属性を適切に設定すれば、SEO的にも読者のユーザービリティ的にもいいことしかないので、正しく書いて対策しておくことをお勧めします。