読者です 読者をやめる 読者になる 読者になる

webproduct-lab

WEB制作を中心にSEOやマーケティングなど色々と語ります

text-indent:-9999px;を改善してみる

css

最近、コーディング作業をしていてふと気になったんですが、だいぶ昔から、html側でテキストを書き、cssで背景に画像を設定してテキストをtext-indent:-9999px;で表示させないという方法がありました。少し前までは「この使い方はペナルティになる」と言われていました。

ただ、実際にペナルティになるかどうかは不透明で、使わない方が良いだろう…ぐらいにしか言及されていませんでした。

確かにこの記述だと、隠してhタグやリンクなど書き放題で、恐らくそういったページに対してペナルティを課していたんだと思います。

そして、9999pxの書き出しパフォーマンスが必要になることから、レスポンシブデザインが増え始めた昨今、スマホ表示に時間がかかる…などよろしくない欠点が出始めました。

と言っても、もともとSEO的にも下記のような記事が公式から出されていることから、使わない方が良いとは思いますが。。(←またそうなっちゃう…)

Google ウェブマスター向け公式ブログ: 隠しテキストは Google のウェブマスター向けガイドライン違反です

基本的には「-9999」の扱いを「100%」にするだけ

さっそく、こちらがそのcssです。はみ出た箇所を非表示にして念のため改行禁止にする。という使い方です。

overflow: hidden;
text-indent: 100%;
white-space: nowrap;

この方法もぱっと見、変わってないじゃん!へりくつ!っぽくも見えてしまいますが…実は-9999pxの場合もペナルティと見なされません(何度も言いますが、使い方にもよります)!実際、未だにこの記述をメニューに使っていて、一度もペナルティを受けていないサイトを管理しています。

なので、このcssの解釈は、SEOというより読み込み速度について改善されたcssの捉え方なのではないでしょうか?
私は必要な時があれば使ってみようと思います。

Copyright © webproduct-lab ALL RIGHTS RESERVED.