テキストの画像置換 : SEO的にまだマシそうな手法

Webページのテキストは基本、ユーザーのデバイスにインストールされたフォント「デバイスフォント」で表示されます。デバイスフォントは限られ、デザインとして書体を選ぶ余地がありません。

そこで取り出だしたるは古来伝承の闇の秘術、テキストの画像置換。デザインした文字を画像ファイルにして、CSSでテキストと置き換える手法です。

この手法、いろいろと問題もありそうですが…

サンプルコード

<!--  HTML  -->
<div id="sample">
  <section>
    <h4>Header_Image</h4>
  </section>
</div>
</code></pre>
<pre class="prettyprint linenums"><code>/* CSS */
#sample section h4{
  white-space: nowrap;
  overflow: hidden;
}
#sample section h4::before{
  content: '';
  display: inline-block;
  vertical-align: top;
  width: 100%;
  min-width: 260px;
  height: 64px;
  background: url(//fakeimg.pl/260x160/fff,0/?text=Header_Image&font=lobster) no-repeat 50% 50%;
}

サンプル Demo

コード解説

/* CSS L2-5 */
#sample section h4{
  white-space: nowrap;
  overflow: hidden;
}

見出し要素 h4 の white-space プロパティに nowrap を指定し、行の折り返しをしないようにしています。

併せて overflow プロパティに hidden を指定することで、幅を超えてあふれたコンテンツを隠すようにしています。

/* CSS L6-14 */
#sample section h4::before{
  content: '';
  display: inline-block;
  vertical-align: top;
  width: 100%;
  min-width: 260px;
  height: 64px;
  background: url(//fakeimg.pl/260x160/fff,0/?text=Header_Image&font=lobster) no-repeat 50% 50%;
}

見出し要素 h4 のコンテンツ直前に、空の擬似要素を挿入しています。

擬似要素は、display プロパティに inline-block を指定することで、画像要素 img と同じように、h4 のテキストコンテンツに埋め込まれるかたちで表示されます。この h4 は行の折り返しをしないので、擬似要素を含めて１行で表示されます。

そして、width プロパティを 100% に指定しています。親要素である h4 の幅いっぱいに広がり、h4 のテキストコンテンツは押し出され、要素の幅を超えて完全にあふれます。この h4 はあふれたコンテンツを隠すため、テキストコンテンツは結果的に見えなくなります。

なお、inline-block 表示の要素は、vertical-align プロパティがデフォルト値の baseline のままだと上にずれ、下に隙間が生じます。その対策として vertical-align プロパティに top を指定しています。

次に、擬似要素に背景画像を指定しています。ここでは、幅260px × 高さ160px の透過PNG画像を指定しています。background-position を 50% 50% と指定して中央寄せしていますが、0 50% と指定すれば左寄せになります。

min-width と height プロパティは、背景画像のサイズに合わせて値を指定します。min-width を指定しないと、レスポンシブデザインでの親要素の幅によっては、背景画像の左右が見切れてしまう場合があります。文字が見切れるのは許容できないと思いますので、これも必要な指定となります。（なお、ここでは擬似要素の height を背景画像の高さより小さく設定していますが、便宜上の理由によるものであり、通常は背景画像の高さに合わせればよいでしょう。 ）

どこがまだマシなのか

原則として、視覚的に隠されたテキストコンテンツを用意すべきではありません。画像置換をせざるを得ない場合も、テキストコンテンツが持つ意味と、置換する画像が視覚的に示す意味は、同一であることが前提です。

日々進化する Google のアルゴリズムが、今後どのように解析してスパム判定をしていくのか、ほとんど誰にもわかりません。その上で、この手法が少しはマシではなかろうかと思われる点を挙げてみます。

まず、見出し要素自身には、コンテンツを隠すための直接的な指定はありません。行の折り返しをしないようにしたり、あふれたコンテンツを隠すようにはしていますが、ボックスの幅や高さ、インデントやフォントサイズ、文字色や背景には触れていません。通常、ありうる指定だと思います。

擬似要素を挿入してテキストコンテンツを表示範囲から押し出しているわけですが、幅を100%にしているだけです。上から重ねているわけでもありません。ちょっと罪悪感はありますが、通常、ありうる指定ではないでしょうか（弱気）。

そして、擬似要素は非DOM です。あくまで装飾のための擬似的な要素であり、文書を構成するコンテンツ要素ではありません。Google bot も解析対象とは見なさない（といいなあ）と考えられます。

個人的には、現時点での日本語環境においてはまだまだ、テキストの画像置換は「必要悪」だととらえています。同時に、できるだけ最小限にとどめたい手法だとも思っています。必要な場合は、誠実な姿勢をもって、適正な実装を心がけたいものです。

Google 様におかれましては、なにとぞご寛大な処置を賜りますよう、伏してお願い申し上げます。

気をつけること

画像置換をする場合、表示領域の幅が狭いデバイスでの表示に配慮が必要です。

例えば iPhone SE（第1世代）で表示する場合、ディスプレイの幅は 320 px（CSS ピクセル）です。画像の幅（＝擬似要素の min-width）がそれよりも大きければ、ディスプレイからはみ出してしまいます。

このようなときは、画像要素をフルードイメージにするように、擬似要素も縦横比を維持したまま親要素の幅に合わせて縮小・拡大するようにします。これは、関連記事「レスポンシブで要素の縦横比を維持する」で紹介した手法を、メディアクエリで組み合わせると可能です。

もっとも、あらかじめ iPhone SE（第1世代）でも納まるようにデザインしておくべきです。もっと言えば、画像置換をしなくて済むデザイン手法を優先させるべきでしょう。このあたりは、関連記事「Web フォントの話。」でも取り上げていますので、よろしければ併せてお読みください。