今日のエントリもSMX West 2011のセッションからのレポートです。

text-indentによる画像置き換えの代替手段をGoogleが提示してくれました。

CSSのtext-indentで-999pxを指定し、文字テキストと画像を置き換えるテクニックは昔からあるごくありふれたテクニックです。

ところがGoogleは、現在この方法を推奨していません。
推奨していないというよりも使うべきでないと明言しています。

使ってもいいのか悪いのかは以前はGoogle社員によって答えがマチマチでした。
しかしここ1年ほどは画像置き換えに対するGoogleのスタンスは一貫して“NG”です。

今回のSMXでも、GoogleのMaile Ohye(マイリー・オイェ)さんが使用すべきでないことをあらためてクリアにしました。

理由は、画像置き換えはスパマーがよく使う手法だからです。

画像置き換えがすぐさまスパム判定に結びつくということではありません。
スパムの疑いがあるとして要注意マークを付けられやすいのです。

分かりやすい例え話を考えてみました。

深々と帽子をかぶって、黒いサングラスをかけて、口と鼻をすっぽり覆うマスクをして、両手に手袋をはめて、深夜3時にコンビニに入ってみてください。
コンビニの店員さんは間違いなく警戒するはずです。

でもこの行為自体は犯罪ではありませんよね。

画像置き換えも同じことです。
テキストと画像が明らかに異なっていない限りは、これ自体でスパムとみなされることは通常ありませんが、他の要因と絡みあうとスパム判定にいたってしまう確率が高まるのです。

例え話の格好で、右手に包丁を持っていたらほぼ確実に防犯ブザーを鳴らされるか警察を呼ばれるでしょう。

複数の要因により判断され最終的にアウトになってしまうのです。

別のセッションでは、GoogleのMatt Cutts(マット・カッツ)氏も「隠しテキストは何にせよ良くない。」とコメントしていました。

したがって置き換えるテキストと代わりに見せる画像の内容が同じであったとしても、相応の覚悟をして画像置き換えのテクニックを使うようにしなければなりません。

普段ならここで終わりなのですが、今回のSMXではマイリーさんは彼女が推奨する代替のテクニックを紹介してくれました。

それは“@font-face”を使う方法です。

@font-faceがどんなものなのか僕はまったく知らなかったので、セッション終了後にプレゼンで使われたスライドをPCに再度映し出して写真に撮らせてもらいました。

下が@font-faceを使ったサンプルです。

@font-faceのサンプル

これをツイートに投稿してフォロワーさんに尋ねたところ、赤沼和哉さんとIIDA Makotoさんが教えてくれました。
※お2人ともありがとうございました。

フォントをサーバーにアップして、ローカルに読み込んで表示させるCSSですよね。

CSS3によるWebfont指定ですよ。

IIDAさんは参照先のエントリもポイントしてくれました。
「CSS3の@font-faceでWebfontを利用する。」

詳しくはこちらの記事を読んでいただくとして、自分の望むフォントをサーバーにアップしておくことで、ユーザーのPCにそのフォントがなくても表示が可能になるという仕組みです。

一般的なブラウザの最新バージョンはほぼ確実に@font-faceをサポートしています。

ローカルからではなくサーバーからフォントを読み込むということで、パフォーマンス的にどうなのかなという疑問もありますが、@font-faceによって“見た目の華やかさ”を実現できるのであればGoogleが推奨する方法なので使ってみてはいかがでしょうか。

なおGoogleは現在数百のウェブフォントを公開しています。
無償で使えるのでこちらも利用してみましょう。

おまけで、もう1つマイリーさんのセッションから似たテーマの情報をお伝えしておきます。

“display:none”の使用についてです。

display:none自体は使っても問題ありません。
でも重要なキーワードは隠したらダメだとのことです。
「重要な」というのは「検索エンジンに見せたい」ということではないかと推測します。

【UPDATE】
ブログ読者の澤村さんにメールでこの記事に対してコメントをいただきました。

@font-faceを使う場合、欧米フォントに比べて日本語フォントはサイズがかなり大きくなるのでダウンロードに非常に時間がかかり著しくユーザー体験を損ねることがあるようです。

多用するとまったく使いものにならないため使う場面は限られてくるとのことです。

なかなかいい方法が見つかりませんね。
Googleの社員とカンファレンスで話す機会がまたあったら、日本語の場合はどうしたらいいか質問してきます。

このエントリーが役に立ったらシェアしてください

[Ads & Featured Contrents]

海外SEO情報ブログTOPGoogle SEO › text-indentを使った画像置き換えはスパム判定の危険あり、“@font-face”の使用をGoogleは推奨 at SMX West 2011

Comments

  1. By hironim on

    そうなんですか!
    visibility:hiddenや、
    opacityで透明にしたり、
    もNGなんでしょうか??

    *** Reply from Suzuki Kenichi ***
    NGかどうかはGoogleに聞かないと分かりませんが、基本的にテキストを隠すのは避けたほうがいいと思います。
    記事にも書いてあるように即座にペナルティということではなく、無用な要注意フラグを立てられないようにするためです。
    使うにしても自己責任です。

  2. By on

    >一般的なブラウザの最新バージョンはほぼ確実に@font-faceをサポートしています。
    一般的なブラウザの最新バージョンだけを対象にサイトを構築できる企業はほぼないと思えますが…Google先生はそういった事情は考えてくれないのでしょうかね。
    いくら最新バージョンのブラウザでサポートしているとはいえ、策定中の仕様を使えと言うのは強引な気がします。

    *** Reply from Suzuki Kenichi ***
    Googleが作った世界の中で存在したいなら従うしかないと思います。
    Googleを無視できるなら従う必要はまったくないですね。
    text-indentもGoogleを気にしないなら使って全然構わないです。

  3. By on

    貴重な情報ありがとうございます。
    -9999はやはりリスキーですね。

    最近アクセスラボはSEM記事ばかりですが(笑)、鈴木さんの記事は楽しく拝読しております。

    *** Reply from Suzuki Kenichi ***
    そう、SEO系の記事がなくなったのでWeb担にピックアップしていません。
    でもすべての記事をしっかりチェックして勉強させてもらってます。
    アクセスラボさんもブランドができてきましたね。
    「継続は力なり」です。

  4. By on

    鈴木さんに読んで頂いてるとおもうと少し緊張しますが(笑)、引き続き継続できるよう地道に努力をしていきたいと思います。

    >アクセスラボさんもブランドができてきましたね。

    海外SEOさんと比べると、かなりショボイです(笑)。まだまだ勉強中の身です。

    *** Reply from Suzuki Kenichi ***
    ショボイかどうかは読者が決めることです。
    もっと自信を持っていいと思いますよ。
    記事を書き続けてきた歴史(アーカイブ)を見ると自信が付きますよ。

  5. By on

    今アーカイブを見たら結構書いたなと感じました。そうですね、読者の方に決めていただくものなので、ひとつひとつ積み重ねていきたいと思います!

    *** Reply from Suzuki Kenichi ***
    はい、「積み重ね」ですよね。
    これからの活躍も楽しみにしています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


▲ページの一番上に戻る