【WordPress】ブログで使う画像のalt属性値の記入について

古書に書かれた英文

先日、お世話になっている検索エンジンのBingさんから
『alt属性はちゃんと書きなさいよ!』
と怒られてしまいました。

反省ついでに書き方などを説明させていただきます。

スポンサーリンク

alt属性

alt(オルト)属性と読みます。

ブログで画像を表示させるには「img要素」と呼ばれる命令文を使用します。
image (画像)の略であり、img要素は複数の属性によって構成されています。

その中のalt属性は、「代替テキスト(画像の説明文)」を表します。

例えば上記の画像を WordPress の「メディアを追加」ボタンから呼び出し、
それを記事中に貼り付けた時、

<img ①src=”○○” ②alt=”” ③width=”○○” ④height=”○○” ⑤class=”○○” />

このような構成をテキストで表示することができます。

  1. src属性には”画像のURL”
  2. alt属性には”画像の説明文”
  3. width属性には”画像の幅”
  4. height属性には”画像の高さ”
  5. class属性には”クラス名”

具体的には、それぞれ上記の意味で記述されています。

今回指摘を受けたのは②のalt属性値、つまり
「画像の説明文が入っていませんよー」ということなのです。

WordPress の場合、初期の値は空欄ですので、自分で内容を記述する必要があります。

どうしてalt属性を記入する必要があるのか?

 目の不自由な人が画像のalt属性の値をスクリーンリーダーで読み上げたり、点字に変換して認識することができるようになります。

 画像にalt属性をつけて値に記述することで、テキスト情報として抽出できるようになり、テキスト検索や音声化など、コンテンツを様々な方法で再利用できるようになります。

引用alt属性の良い事例(つけ方・書き方)|情報バリアフリーポータルサイト

alt属性は代替テキストとも呼ばれます。

何らかの理由によって画像が表示されない時や、
目の不自由な人が画像を認識する時などには
alt属性が活用されます。

また、google などの検索エンジンがサイトを見つける時には、
ロボットが使用されています。
そのロボットは人間のように画像を目で認識することはできません。

このような場合に
画像として認識するための、代替となるテキストが必要になります。

alt属性に説明文を記述することで、ロボットに「画像である」ということを
教えることができるのです。

これは、Google画像検索のような画像に特化した検索エンジンに
画像についての説明を伝えることで
画像検索からのページ流入に期待できるという事でもあります。

alt属性とSEO

alt属性は一般的にSEO(検索エンジン最適化)に
大きな影響を与えることはない
とされています。
また、空欄でも問題なく投稿できます。

SEOはユーザビリティやアクセシビリティなど、
ユーザー視点からの使いやすさに重きを置かれています。
その場合にはalt属性の記述が重要視される事もあります。

つまりalt属性を記述することは必須ではないし
SEOに与える影響も大きくはないけれど

特定のユーザーや検索エンジンのためを思って記述しましょう、
という思いやりの注意でもあるんですね。
忘れずに記述するよう心掛けたいです。

説明文の書き方

以下の点に注意して書きます。

使用する画像は、タイトルやコンテンツの内容に沿ったものを選ぶ
どのような画像なのかをわかりやすく、簡潔に伝える
多数のキーワードを乱用すると、サイトがスパムとみなされることがある

適切ではない例:

<img src=”puppy.jpg” alt=”” />

適切な例:

<img src=”puppy.jpg” alt=”子犬” />

最適な例:

<img src=”puppy.jpg” alt=”持ってこいをするダルメシアンの子犬” />

次のような記述は避けてください。

<img src=”puppy.jpg” alt=”子犬 犬の赤ちゃん 小さな子犬 レトリーバー ラブラドール ウルフハウンド セッター ポインター ジャックラッセル テリヤ ドッグ フード ドッグフード 安い 子犬の餌” /

参照画像-Search Console ヘルプ

補足として装飾を目的とした画像にはalt属性を記述する必要はありません。
(例:アイコン画像やラインマーカーなど)

中には説明が難しい画像もあると思います。
その際はこちらのサイトを参考にしてみてください。
alt属性の良い事例(つけ方・書き方)|情報バリアフリーポータルサイト

実際に書いてみる

先ほどの画像を例に記述していきます。

お皿に乗ったうさぎさんカットのりんご

<img src=”画像URL” alt=”お皿に乗ったうさぎさんカットのりんご” />

こうして記述してあげることで、
検索エンジンやユーザーによりわかりやすくなりました。

WordPress でalt属性を入力するには、

サイドバーの「メディア」→「ライブラリ」から画像ファイルを選択。
「メディアを編集」画面内、代替テキストの欄にalt属性値を記入します。

メディアを編集画面内の代替テキスト欄

または記事作成画面で「メディアを追加」ボタンから
「メディアを挿入」画面へ

ファイルを選択すると右側に詳細が表示されますので、
代替テキストの欄にalt属性値を記入します。

代替テキスト欄にチェック

反映を確認するには

記入したalt属性がきちんと反映されているかを
確認するにはいくつかの方法があります。

Google Chromeブラウザを使用されている方には、こちらを。
サイト画像の“alt”属性を可視化する「Google Chrome」拡張機能「Alt & Meta viewer」

また、使用しているテーマが「Simplicity2」の場合、こちらを参考にしてみてください。
サイトSimplicityの「Alt属性値をキャプション表示」機能について

alt属性を記入し忘れた時の対処法

記入漏れを防ぎたいという方には
こちらのプラグインがおすすめです。
サイト【WordPressプラグイン】画像に「代替テキスト(alt属性)」をつけ忘れた時の対処方法「Media Library Alt Fields」

過去記事ですでに何十枚、何百枚と画像を使用しており、
修正が大変すぎる…という方はこちらのプラグインを試してみてください。
サイトSEOの為に画像のaltを一括管理するWPプラグインSEO Friendly Images

ちなみに私は全部で70枚ほどある画像のうち、
メディアライブラリと記事中のalt属性を全て手作業で入力し直してました・・・

10記事程しか投稿していない現時点で気付いたので
良かったですほんとに。

ご覧いただき、ありがとうございました。

スポンサーリンク
レクタングル大




レクタングル大




シェアする

フォローする