重要なテキストを画像にすると何が起きるか｜画像内文字とSEO

デザイン会社から上がってきたトップページのバナーは、確かにきれいです。「初期費用0円、最短3日で導入」という一番言いたい言葉も、大きく目立つ位置に入っています。ただ、その一文はページのテキストとしては存在していないかもしれません。画像の一部だからです。

先に結論を書きます。サイトの中で一番伝えたい言葉ほど、画像ではなくHTMLの文字として書いてください。 画像は、その文字を引き立てる背景や装飾に回します。順番を逆にすると、その言葉はページのテキストとしては残りません。画像を見られない人には届きませんし、検索エンジンにその言葉どおりに伝わるという保証もなくなります。

やることは多くありません。自分のサイトのどこが画像になっているかを洗い出し、直す順番をつけるだけです。手順は後半に置きました。

Googleは画像の「何」を見ているのか

まず、公式ドキュメントに書かれている範囲を確認します。ここを押さえておくと、画像内の文字にどこまで頼れるかの見当がつきます。

Google 画像検索のベスト プラクティスは、画像に関するメタデータを提供するうえで最も重要な属性は代替テキスト（画像について説明するテキスト）だとしたうえで、こう説明しています。

Google では、代替テキストに加えて、コンピュータ ビジョン アルゴリズムやページのコンテンツを使用して、画像のテーマを理解します。

手がかりとして名前が挙がっているのは、代替テキスト・コンピュータビジョン・ページのコンテンツの3つです。SEO スターター ガイドはさらに、画像の置き場所についても触れています。

鮮明な画像を使い、関連するテキストの近くに配置してください。画像の近くにあるテキストは、何に関する画像で、そのページの文脈で何を意味するかを Google が把握するのに役立ちます。

つまり、画像の意味は画像の外にある情報から補われる、という書かれ方をしています。「画像に埋め込まれた文字を読み取って、ページのテキストとして扱う」とは書かれていません。

画像の中の文字まで読み取られている、と感じる場面はあるかもしれません。ただ、ここで引用した公式ドキュメントに、そう書かれているわけではありません。一番言いたい言葉の扱いを、約束されていない挙動に預けるかどうか。それがこの記事の本題です。

画像を見られない人には、最初から届いていない

検索の話より先に、もっと確実な問題があります。

同じベスト プラクティスは、代替テキストの役割をこう書いています。

代替テキストは、スクリーン リーダーを使用するユーザーや、低帯域幅のネットワークを使用しているユーザーなど、ウェブページの画像を見ることができないユーザー向けの補助機能としても役立ちます。

スクリーンリーダーは、画面の内容を音声で読み上げるソフトです。これを使っている人にとって、画像の中の文字は最初から存在しません。読み上げられるのは代替テキストだけです。

通信が細いときも同じです。画像が落ちてこなければ、そこにあったはずの「初期費用0円」は消えます。残るのは、灰色の四角と代替テキストだけ。

ここが判断の分かれ目です。画像の中の文字は、見える人にしか存在しない文字です。それを承知のうえで装飾に使うのは構いません。問題は、承知しないまま重要な言葉をそこに置いてしまうことです。

「代替テキストに全部書けば同じ」は、半分だけ正しい

よくある反論があります。画像のままでも、代替テキストにキャッチコピーを丸ごと書いておけば同じではないか、という考え方です。

半分は正しいです。何も書かないよりは、はるかに良い。ただ、代替テキストは本来「画像について説明するテキスト」で、長い宣伝文の置き場所として設計されたものではありません。3行のキャッチコピーと箇条書き5つが入ったバナーを、1つの代替テキストで説明しきるのは無理があります。読み上げても頭に入りません。

そして、ここから先に危ない道が伸びています。

「代替テキストに入りきらないなら、同じ文章をページに置いて、見えないようにすればいい」。この発想でCSSを書く前に、スパムポリシーを見ておいてください。Google ウェブ検索のスパム ポリシーは、隠しテキストや隠しリンクの不正使用を「検索エンジンを操作することのみを目的としてページにコンテンツを配置し、人間のユーザーには見えにくくする行為」と定義し、例として次を挙げています。

白の背景で文字の色を白にする　テキストを画像の背後に置く　CSS を使用してテキストを画面の外に配置する　フォントサイズまたは不透明度を 0 に設定する

テキストを画像の背後に置くが、名指しで入っています。画像化したキャッチコピーを補おうとして同じ文章を裏に敷く手当ては、外形としてこれと同じです。

定義には「検索エンジンを操作することのみを目的として」という条件が付いています。ですから、見た目を整えるつもりの実装がただちに違反になる、という話ではありません。それでも、見えにくくする方向の手当ては避けておくほうが安全です。判断が要るやり方より、判断の要らないやり方を選びたいところです。

回り道をするほど危なくなる。だとすれば、最初から素直な形にするのが早い、ということになります。文字はHTMLで書く。画像は背景にする。CSSで重ねれば、見た目は同じです。

5分でできる洗い出し手順

自分のサイトのどこが画像になっているかは、ツールがなくても分かります。ブラウザだけで確認できます。

1. 対象のページをパソコンのブラウザで開く。 まずはトップページ、サービス紹介ページ、料金ページの3枚から始めてください。この3枚に、たいてい一番言いたい言葉が載っています。
2. ページ全体を選択する。 Windowsは Ctrl + A、Macは ⌘ + A です。文字として存在している部分だけが、いっせいに反転します。
3. 反転しなかった場所を書き出す。 見えているのに反転しない文字は、画像です。ここが今回の調査対象になります。スクリーンショットを撮って、赤丸をつけておくと後で楽です。
4. その画像の代替テキストを確認する。 ページ上で右クリックして「ページのソースを表示」を選び、該当する画像ファイル名で検索します。alt="" が空、または alt="banner01" のような機械的な文字列なら、その画像は今のところ何も説明できていません。
5. 後述の表で優先度をつけ、上から直す。 全部を一度に直す必要はありません。順番の付け方が、この作業のいちばん大事なところです。

手順3で反転しなかった領域がゼロだったなら、そのページはこの問題を抱えていません。次のページに進んでください。

実際に1ページ通してみる

架空のサービス紹介ページで、手順1〜4を通した結果を書きます。抽象論だと判断が付きにくいところなので、具体で追います。

Ctrl + A を押したところ、反転しなかったのは4か所でした。

• ページ最上部のメインビジュアル。「初期費用0円、最短3日で導入」というキャッチコピーが入っている
• 中ほどの「3つの特長」。見出しとアイコンと説明文が、まとめて1枚の画像になっている
• 料金表。表全体が画像で、金額も条件もすべて画像の中
• 下部の「導入企業ロゴ」。ロゴが並んでいるだけで、文字情報としての意味は薄い

ソースを見ると、メインビジュアルは alt="メインビジュアル"、3つの特長と料金表は alt="" の空でした。ロゴ画像だけは会社名が入っていました。

この4つは、同じ「画像化されたテキスト」でも重さがまったく違います。メインビジュアルと料金表は、このページで一番答えてほしい情報です。それが文字として1つも存在していない。一方でロゴは、そもそも文字で伝える必要が薄い部類です。

同じ作業をすると、たいていこういう濃淡が出ます。だから次の表が要ります。

直す順番を決める表

1行目は、さきほどのメインビジュアルと料金表がまさにこれです。ここだけ直せば、作業の大半は終わったと考えて構いません。

2行目の「3つの特長」も同じ画像の中にありました。見出しが画像だと、ページをざっと見る読者が話の区切りを追えなくなります。読み上げでも同じです。

4行目には少し補足が要ります。SEO スターター ガイドは、リンクの文言についてこう書いています。

適切なアンカー テキスト があれば、ユーザーと検索エンジンは、リンクされたページにアクセスする前にその内容を簡単に把握できます。

アンカーテキストとは、リンクが設定された文字のことです。ボタンを画像で作ると、その文字がリンクの文言として置けなくなります。ボタンは、見た目を作り込みたくなる場所です。だからこそ引っかかりやすい。

5行目のロゴ画像は、今回は触らなくて構いません。優先度を下げる判断も、記録しておけば立派な結論です。

直し方は3つの型に収まる

順番が決まったら、直し方を選びます。多くの場合、次の3つのどれかです。

1. 背景画像＋HTMLテキスト。 画像はCSSの背景として敷き、文字は見出しや段落として書きます。見た目は変わりません。メインビジュアルのキャッチコピーは、原則これで解決します。
2. 画像は残し、同じ内容を本文にも書く。 図解やグラフのように、絵としての情報量がある場合はこちらです。SEO スターター ガイドが言うとおり、関連するテキストは画像の近くに置きます。図の下に説明を書く形が、そのまま推奨の形になります。
3. 代替テキストで説明する。 写真や装飾など、文字にする必要がないものはこれで足ります。代替テキストの書き方そのものは「画像のalt属性の正しい書き方」に、ファイル名の付け方は「画像ファイル名とSEO」にまとめています。

料金表のように、画像の中に表が入っているものは1と2の中間です。金額と条件をHTMLの表に起こし、装飾だけを画像に残すのが素直な形になります。手間はかかりますが、ここは価格を調べに来た読者が最初に見る場所です。

直したあと、何をどう見るか

作業が終わったら、もう一度 Ctrl + A を押してください。前回反転しなかった場所が反転すれば、その修正は効いています。この確認は数秒で終わり、しかも結果がはっきり出ます。

検索結果側の変化については、慎重に見てください。順位やクリックの動きは、こちらの修正だけで決まるものではありません。検索需要の季節変動、競合ページの更新、検索結果の見せ方の変更、端末や地域による違い。同じ時期に複数の要因が重なります。修正の翌週に順位が上がっても、それがこの作業の成果だと言い切るのは難しいところです。

見るなら、次のような形をおすすめします。

• 修正したページの表示回数とクリック数を、修正前後で同じ曜日構成の期間どうしで比べる
• 画像化していた言葉（たとえば「初期費用0円」）を含む検索語で、そのページが出るようになったかを見る
• 同時期に何も触っていないページの動きと並べて、サイト全体の傾向と切り分ける

順位が動かなくても、この修正には意味があります。画像を見られない人に情報が届くようになるのは、それ自体が結果だからです。Googleも、有用で信頼性の高いコンテンツの作成について、ランキング操作を目的としたものではなく「ユーザーにメリットをもたらすことを目的として作成された、有用で信頼できる情報」を上位に掲載できるよう設計している、と説明しています。

判断に迷ったときは、そこに戻ってください。この画像は、読者に情報を届けているか。それとも、届けていない情報を隠しているか。

「文字を画像の外に出す」という発想は、リンクまわりでも同じように効きます。リンクの前後の文を見直す話は「内部リンクは前後の文で決まる」にまとめました。まずは3ページだけ、Ctrl + A を押すところから始めてみてください。