「オルトタグは、SEOのためにキーワードを入れておく欄」。SEOの診断レポートや制作会社から「オルトタグが未設定です」と指摘されたとき、そう受け止める担当者の方は珍しくありません。SEO対策のチェックリストでは、オルトタグがタイトルやメタディスクリプションと同じ並びに載っていることが多く、キーワードを入れる欄の一つに見えるためです。
しかし、SEO記事の原稿を書くたびに、載せる画像のオルトタグまで書いてきた弊社の立場から言えるのは、オルトタグはSEO用に書き分ける欄ではなく、画像の代わりに読ませる1文だということです。画像が見えない人に向けて画像の中身を言い当てた1文が、Googleにとっても画像を理解する材料になります。
本記事では、オルトタグの意味と読み方から、SEOに効く場面、画像の種類ごとの書き方、WordPressでの設定、未設定の画像を見つけて直す順番まで、記事の画像を日々扱う制作会社の視点でお伝えします。
- オルトタグはimg要素に書くalt属性の通称で、画像の代わりに読み上げや表示に使われる文字
- Googleはオルトタグを画像の中身を理解する材料の一つに使い、キーワードの羅列はスパムとみなされる要因になりうる
- 書く内容は画像が見えない人に何を伝えるかで決まり、装飾だけの画像は中身を空にする
- WordPressでは画像ブロックの代替テキスト欄に書き、メディアライブラリで直しても貼り済みの画像は変わらない
- 未設定の画像はPageSpeed Insightsとページのソースで見つけ、リンクになっている画像から直す
オルトタグの意味と読み方
オルトタグは、HTMLで画像を表示するimg要素に書くalt属性の通称で、画像が見えないときに画像の代わりに読まれる文字です。altは英語のalternative（代わりのもの）の略で、「オルト」と読みます。
<img src="office.jpg" alt="窓際に木製の机が4台並ぶ執務スペース">HTMLの文法では、imgの部分がタグで、altはタグの中に書き足す属性です。オルトタグ、altタグ、alt属性、代替テキストはどれも同じものを指し、WordPressの編集画面では「代替テキスト」という名前の入力欄になっています。
オルトタグの文が使われるのは、読み上げソフトが画像の位置で読み上げるとき、画像が読み込めずに代わりの文字を表示するとき、検索エンジンが画像の中身を判断するときの3つです。
オルトタグのSEO効果と効く場面
オルトタグがSEOに効くのは、Googleが画像の中身を理解するときと、画像がリンクになっているときの2つの場面です。Googleは画像SEOの説明ページで、代替テキストに加えて、画像を解析する仕組みとページの本文も使って画像のテーマを理解すると説明しています。
画像の中身がGoogleに正しく伝わると、Google画像検索で、画像の内容に合った検索語に対して画像が表示されやすくなるはずです。画像がリンクになっている場合は、オルトタグをリンクの文字（アンカーテキスト）として使えると、同じページに書かれています。
一方で、オルトタグを書き足しただけでページそのものの検索順位が上がるとは、Googleは説明していません。
※ 出典：Google 検索セントラル「画像のSEOベストプラクティス」
オルトタグの書き方と例文
オルトタグには、画像が見えない人に画像の代わりに伝えたい内容を1文で書きます。SEO用と読み上げ用で、オルトタグを書き分ける必要はありません。Googleが画像SEOのページで最も良い例として挙げているのも、画像を見られない人にそのまま読み聞かせられる1文です。
Googleの評価 | オルトタグの例 |
|---|---|
避ける（キーワードの羅列） | 子犬 犬 赤ちゃん犬 小犬 仔犬 パピー わんちゃん |
良い | 子犬 |
最も良い | 「取ってこい」遊びをするダルメシアンの子犬 |
「子犬」だけでは、写っている犬の種類も、何をしている場面かも伝わりません。「取ってこい」遊びをするダルメシアンの子犬と書けば、読み上げを聞いた人は場面を思い浮かべられ、Googleにも犬の種類と場面が伝わるはずです。
画像の種類ごとの書き方
Webの標準を定める団体のW3Cが、altの判断手順（alt Decision Tree）を公開しています。W3Cの判断手順に沿うと、画像の種類ごとの書き方は次の5通りに分かれます。
画像の種類 | オルトタグに書くこと | 例 |
|---|---|---|
写真・イラスト | 写っているもののうち、本文の流れで意味を持つ部分 | 窓際に木製の机が4台並ぶ執務スペース |
文字の入った画像 | 画像の中の文字と同じ文。近くの本文に同じ文があれば空にする | 初回のご相談は無料です |
グラフ・図解 | 何を示す図かと、図から読み取れる結論。細かい数値は本文に書く | 月別の問い合わせ件数の棒グラフ。7月が最も多い |
リンク・ボタンになっている画像 | リンク先のページ名か、押したときの動作 | 資料請求のページへ |
装飾だけの画像 | 何も書かず、中身を空にする | `alt=""` |
alt属性そのものが無い画像は、読み上げソフトによってはファイル名を読み上げるため、装飾だけの画像もalt属性は消さずに残します。画像の種類ごとの判断は、alt属性とは何か｜代替テキストの書き方と、空にしてよい画像の見分け方で詳しく扱っています。
キーワードの入れ方と文字数の目安
オルトタグにキーワードを入れるのは、画像の中身を言い表すのにキーワードが必要なときだけです。Googleは画像SEOのページで、alt属性にキーワードを羅列すると、ユーザーの体験を損なうだけでなく、サイトがスパムとみなされる要因になる場合があると説明しています。
経営者SEOの担当から、すべての画像のオルトタグに対策キーワードを入れるように言われました。入れたほうが検索に有利なのでしょうか。
Writers-hub編集部
入れるのは、キーワードが画像の中身そのものを表す画像だけにしてください。オルトタグの解説記事に載せるコードの図なら「オルトタグ」という語が入りますが、執筆者の顔写真に入れても、読み上げを聞く人には画像と関係のない語が聞こえるだけです。
オルトタグの文字数には、HTMLの仕様にもGoogleの説明にも上限がありません。読み上げで聞き取れる1文に収め、1文に収まらない数値や手順は本文やキャプションに書きます。
オルトタグの設定方法とWordPressの注意点
オルトタグは、HTMLで書く場合はimg要素にalt属性を書き足し、WordPressでは画像ブロックの「代替テキスト」欄に入力します。WordPressの手順は次の3つです。
投稿の編集画面で画像をクリックすると、右側の設定パネルに画像ブロックの設定が表示されます。パネルが閉じているときは、画面右上の「設定」ボタンで開きます。
「代替テキスト」欄に、画像の代わりに読ませる1文を入力します。装飾だけの画像は、空欄のままで構いません。
記事を更新した後、公開ページをブラウザの検証機能で開き、alt属性に入力した文が出力されているかを確かめます。
とりわけ見落とされがちなのが、メディアライブラリで代替テキストを書き直しても、すでに記事に貼った画像のオルトタグは変わらない点です。WordPressは、画像を記事に貼った時点の代替テキストを、記事の本文に書き込むためです。
既存の記事のオルトタグを直すときは、記事ごとに画像ブロックを開いて入力し直します。アイキャッチ画像のように、テーマが表示のたびにメディアライブラリの値を読み込む画像は、メディアライブラリで直せば反映されます。
オルトタグが書けているかの確認方法
オルトタグが書けているかを確かめる方法は、画像1枚ならブラウザの検証機能、ページ全体ならPageSpeed Insightsとページのソースです。
確かめ方 | 手順 | 分かること |
|---|---|---|
ブラウザの検証機能 | Chromeで画像を右クリックし「検証」を選ぶ | 画像1枚のalt属性に書かれた文 |
ページのURLを入れて分析し、「ユーザー補助」の項目を見る | alt属性が無い画像の一覧 | |
ページのソース | 右クリックから「ページのソースを表示」を選び、`alt=""`で検索する | 中身が空のalt属性の画像 |
PageSpeed Insightsが確かめているのはalt属性があるかどうかで、書かれた文が画像に合っているかは見ていません。「画像1」のような文でも、警告は消えます。
中身が空のalt属性は装飾の画像の印として扱われ、PageSpeed Insightsの警告に出ません。WordPressで代替テキスト欄を空のまま貼った画像も空のalt属性で出力されるため、警告が無くても書き漏れが残っている場合があります。
空のalt属性の画像が見つかったら、画像ごとに装飾なのか情報を持つ画像なのかを見分け、情報を持つ画像だけに1文を書き足してください。
alt属性の無い画像と空の画像が、サイトのどのページに何枚あるか把握できていますか
弊社のSEO対策の支援では、alt属性の抜けを含むサイト内部の設定をページごとに洗い出し、検索への影響が大きいところから直す順番をご提案します。お手元のサイトのURLをお知らせください。
オルトタグの未設定を直す順番
オルトタグが未設定の画像が多いサイトでは、リンクになっている画像、文字の入った画像、情報を伝える写真や図、装飾だけの画像の順に直します。オルトタグが無いと、読み上げを使う人と検索エンジンが情報を受け取れない画像から先に直すためです。
画像の他にリンクの文字が無いため、オルトタグが空だと押した先が伝わりません。リンク先のページ名か、押したときの動作を書きます。
バナーや見出し画像の文字は、オルトタグに書かない限り読み上げでは伝わりません。画像の中にしか無い文字は、同じ文をオルトタグに書きます。
商品やサービスの写真、手順の図、Google画像検索に出したい画像のように、本文の理解や検索での表示に関わる画像です。
区切り線や雰囲気づくりの写真には1文を書き足さず、alt属性が無ければ中身が空のalt属性を足します。ツールの警告を消すために装飾の画像を埋めると、読み上げで意味の無い文を聞かせることになります。
同じ種類の画像の中では、検索からの訪問が多いページを先に直してください。直したオルトタグが読まれる回数も、訪問の多いページほど多くなるためです。
直した後の書き漏れを防ぐ方法
書き漏れを防ぐには、オルトタグを入稿の作業ではなく、原稿を書く段階で書きます。画像を置く理由を知っているのは原稿を書いた人で、入稿の担当者が画像だけを見て書くと「グラフ」「イメージ」のような中身の無い文になりやすいためです。
弊社の記事制作でも、原稿の画像の指定欄に、描く内容と並べてオルトタグの1文を書き込み、入稿では原稿に書いたオルトタグの文をそのまま使っています。
記事の画像のオルトタグを、入稿の担当者が最後に埋めていませんか
弊社では、原稿の段階で画像の内容とオルトタグの文を決め、入稿まで書き漏れが出ない記事制作の流れを一緒に組み立てます。今の記事の作り方と、画像を用意している担当者をお聞かせください。
オルトタグのよくある質問
オルトタグを設定した後に出てきやすい疑問は3つあります。
画像が正常に読み込まれている間は、オルトタグの文字は画面に表示されません。オルトタグの文字が画面に出るのは画像の読み込みに失敗したときで、読み上げソフトは画像が表示されているときも画像の位置でオルトタグを読み上げます。
title属性は、マウスカーソルを重ねたときに出る補足の文字で、オルトタグの代わりにはなりません。カーソルを重ねる操作の無いスマートフォンでは表示されないため、画像の中身を伝える文はオルトタグに書きます。
書き換えたオルトタグが検索に反映されるのは、Googleがページを次に巡回して読み込み直した後です。早く読み込み直してほしいページは、Googleサーチコンソールの「URL検査」からインデックス登録をリクエストできます。
まとめ｜オルトタグは画像の代わりに読ませる一文
オルトタグは、画像が見えないときに画像の代わりに読まれるalt属性の文です。画像の中身を言い当てた1文が、読み上げにもGoogleにもそのまま使われます。未設定の画像が多いサイトは、PageSpeed Insightsとページのソースで抜けを見つけ、リンクになっている画像と文字の入った画像から直してください。
私たち合同会社Writers-hubは、SEO記事の制作と、検索で記事や画像の中身が正しく扱われるための支援を行っています。記事の画像のオルトタグをどう書くかを決める段階からご相談いただけます。
自社サイトの画像のオルトタグを、どこから直すか決めかねていませんか
サイトのURLと、気になっているページをお知らせください。オルトタグの抜けを見つける方法と、先に直す画像の種類を一緒に確認します。相談は無料です。
