画像58枚のうち16枚、altが空でした。個人ブログの画像SEOを39分で直した話【実装ログ】

58枚中16枚、alt属性が空だった。

Google画像検索からの流入も、スクリーンリーダーでの読み上げも、そこで止まっていた。

直すのに39分。今日はその話を、正直に書きます。

先に立場を明かします。うちは記事の画像に、必ずアイキャッチだけは設定する運用にしていました。「アイキャッチさえ入れておけば、画像のSEO対応は十分」。そう思い込んでいました。実際は違いました。

なぜアイキャッチを設定してもaltが空になるのか

alt属性とは、画像が何を表しているかをテキストで説明する情報です。ブラウザに表示される画像そのものとは別に、HTMLの中に img alt=”…” という形で埋め込まれています。

WordPressのメディアライブラリには、画像ごとに代替テキスト欄があります。アップロード時にここへ入力すれば、記事内のどこで使ってもaltは自動で入ります。問題は、その欄を毎回埋めていたわけではなかったことでした。

24記事・画像58枚を1枚ずつ確認した話（実装ログ）

疑って、直近24記事を開き、本文中の画像を1枚ずつChrome DevToolsの要素検証で確認しました。手作業です。58枚中16枚、alt属性が空欄でした。

16枚は全部、記事内で普通に表示されています。読者が記事を読む分には、何の問題もありません。壊れているのは、検索エンジンと読み上げソフトから見たときだけでした。

空だった16枚に共通していた1つの操作

16枚を見比べて、共通点が1つありました。全部、パソコン画面のスクリーンショットを、エディタにドラッグ&ドロップでそのまま挿入した画像でした。

メディアライブラリから選んで挿入した画像は、代替テキスト欄を必ず通ります。入力を忘れても、欄が空のままアップロード画面に残るので気づけます。ドラッグ&ドロップは、その欄を素通りしたまま公開できてしまいます。うちは効率を優先して、この挿入方法を多用していました。

altが空だと何を失うのか（検索と読み上げ、両方で）

Google画像検索は、altのテキストを手がかりに画像の内容を理解します。空なら、その画像は検索結果に出てきません。

スクリーンリーダーを使う読者には、画像の代わりに「image」とだけ読み上げられます。何が写っているか、伝わりません。16枚分、この2つを同時に失っていました。

直すのに何分かかったか（正直に）

作業自体は単純です。メディアライブラリで該当画像を開き、代替テキスト欄に内容を書く。これだけです。

16枚分で、入力作業は21分でした。ただし、どの画像が空かを24記事から洗い出すまでに18分かかりました。合計39分。ここでも、原因の切り分けの方が入力作業より時間を食いました。

今日チェックすべき2つのポイント（自分のブログで）

この記事を読んだら、5分でいいので自分のブログを確認してください。

• Chrome DevTools（右クリック→検証）で画像を選ぶ：alt=””になっていないか見る。空欄なら一目で分かります。
• ドラッグ&ドロップで挿入した画像を優先で見る：うちの16枚は全部この操作でした。挿入方法の記憶があいまいな画像から確認すると早いです。

alt属性は、検索エンジンと読者、両方への配慮

画像を入れて満足するのではなく、alt欄まで埋めて初めて画像対応は終わる。うちは58枚中16枚、その最後の一手間を飛ばしていました。

今日、自分の直近記事を1本、DevToolsで開いてみてください。

---

ブログ運営の基礎をまとめて学ぶなら（PR）

alt属性・画像SEO・アクセシビリティまわりは、断片的な検索より1冊通読した方が早いです。個人ブログ運営の実務解説書はKindle Unlimited対象なら追加費用なしで読めます。
Kindle Unlimited でブログ運営関連書籍を読む（PR）

※本記事はアフィリエイトリンクを含みます（PR）。ツール名・仕様は変更されるため、最新は各公式でご確認ください。

画像: Pexels（Fuka jaz, Bibek ghosh, Ivan S, cottonbro studio, ThisIsEngineering, KoolShooters）