【初心者でもわかる】オフレフトの書き方を解説

#どうも7noteです。オフレフトを使った画像の表示方法について解説

画像ではなくテキストを使っている方がSEO、つまりGoogleの検索エンジンの上位にランキングされる評価が高くなると一般的に言われています。

画像＋altよりも、テキストの方が評価が高くなるため、できるだけソースにはテキストデータを設置している方が良いとされてます。

しかし装飾したテキストデザインなら画像で表示したい場合もあると思います。
そんな時に使えるのがオフレフトという手法。

オフレフトとは？

簡潔に言えば、、、

「img直書きよりSEOの評価がされやすい画像の表示方法」

とでもいうのがわかりやすいでしょうか？
正確な言葉ではないですが、イメージは上のようなイメージをもっていただければとおもいます。

何をしているかというと、
テキストはソースに書くけど見えない位置に放り出して、代わりに背景画像を設定しておいてそっちを見せる。なんてことをしています。

オフレフトの書き方

index.html

<h2>ロゴ</h2>

style.css

h2 {
  width: 150px; /* 画像の幅を指定 */
  height: 60px; /* 画像の高さを指定 */
  text-indent: -9999px; /* 文字を画面外へ表示させる */
  background: url(sample_bg.png) no-repeat; /* 背景画像を指定 */
}

結果

ソース上で確認

※簡略化したソースです

解説

このように見た目的には画像がでてますが、ソースを確認すると文字だけという状態が出来上がります。
これでGoogleのクローラーがwebサイトを見に来ても、テキストデータとして認識されるため画像だけの時よりも評価が高くなるでしょう。

まとめ

SEOの対策になるとはいえ、これだけで検索結果の上位に上がることはまずないでしょう。
あくまでも何個もある評価点のうちのほんの一部なので、本格的にSEO対策を行うのであれば他にも様々な施策を行わなければなりません。

逆にテキストインデントの値が明らかにおかしいと認識されることで、スパム扱いされるという話もあります。
最新情報をしっかり確認しながら、使うか使わないかを決めてご利用ください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ