top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1185

Lynx:初心に戻って。Googleの警告メールをきちんと捕らえておこ。注意注意 ・・・ 【テキストブラウザチェック】

 2009-12-17
 いつも参考にさせてもらってる、Google
 メールマガジン
 ・Webmaster Central 日本版 公式ブログ
  からのもの、なんだけど・・・

 今日届いたのは、久しぶりに「ドキッ」とするもの。


 わかっちゃいるど・・
 ですね。
※引用転載
約 1 年前に、「 Google の検索は隠しテキストが嫌い 」という記事を
Google公式ブログ 日本版 に掲載しましたが、
その記事でもお伝えしましたように、隠しテキストは、
Google の ウェブマスター向けガイドライン に違反します。
その理由の詳細は、ウェブマスター向けヘルプ センターの
記事 にも載せておりますが、本日はその背景と、日本で
多く見られる隠しテキストの具体的な一例を改めてご紹介
します。
 そうですね。
 ・画像ボタンマウスオーバー
  CSS 利用して入れ替える、
text-indent: -9999px;

  を利用したものです。

 詳しくは、Web上にも、
 ・隠しテキストは Google のウェブマスター向けガイドライン違反です
  にあるので、見られていない方はご参照いただくとして


 私は、気になったらすぐにしないと落ち着かないので・・・
 対応顛末。
 (※テキストブラウザLynx の使い方もおいておきます)


  追記に ▼


FC2ブログランキング にほんブログ村 IT技術ブログ Webサイト構築へ ブログ王ランキング 人気ブログランキング 人気ホームページランキングへ


more

************************************************
◎ 違反してないか、気をつけねば
  :ウェブマスター向けガイドライン

************************************************


 さて、このメールの中に
※引用転載
CSS ファイル内には、text-indent プロパティを
-9999 px と指定している箇所 ( 赤字 ) が見られます。
これは、通常のブラウザでの閲覧時に、ナビゲーションに
並ぶサイト内へのリンクを、テキストリンクの代わりに
画像を使って表示させたい時に用いられることのある
方法です。これにより、テキストリンクはページ外に
移動する形で隠され、代わりに background プロパティで
指定された画像が表示されます。
 と説明されています。
 この文面だけでは、この方法論自体は
 問題無いように思われます。

 


 しかし、この後のほうで、
※引用転載
ウェブブラウザとテキストブラウザとでの閲覧時の内容を比較した場合、
ナビゲーション部分に注目すると、Googlebot には ユーザーより不自然
なほどに多くの文字情報が返されていることがわかります。
このようなテキストは、「 隠しテキストと隠しリンク 」 と見なされ、
このサイトの情報は、Google が適切な検索結果を提供するうえで信用
できないと認識され、サイトが Google の検索結果から一時的に削除
されることがあります。
 はい。この基本は了解しています。

 それでも、構築途中、つい何も考えないで
 実際に画像化されていない文字列を入れてしまう
 (それを外に飛ばしてしまう)ってありがちなんですよね。


 先日、Googleカスタム検索のメインページ
 として用意した
 ググる、カスタム検索ズ 【ググルカスタム検索ズ】
 これも、
  ・画像スライスの技法を利用し、
   マウスオーバーによる動きを実現しているけど
   何も考えないで、
    ・text-indent: -9999px;
   を利用している。


 


 ソースでは、
<div style="margin-left:210px;">
<ul class="kwicks">
<li id="kwick1"><a href="/sitedev/" title="サイト開発知っとこ:Googleカスタム検索">サイト開発知っとこ:Googleカスタム検索</a></li>
<li id="kwick2"><a href="/affiliates/" title="あれ、どこでアフィリ?:Googleカスタム検索">あれ、どこでアフィリ?:Googleカスタム検索</a></li>
<li id="kwick3"><a href="/symfonys/" title="symfony's:Googleカスタム検索">symfony's:Googleカスタム検索</a></li>
</ul>
</div>
 と、リスト形式で用意し、
 CSSで、
.kwicks a{
display:block;
height: 80px;
text-indent:-9999px;
outline:none;
}
 などと文字列は飛ばして、
 背景画像の位置を動かして、マウスオーバーに対応
 しているわけだ。

 ほら? 今確認するとちょっと同じ言葉の繰り返しが
 多いじゃないか。


 これは、狙ったわけでは無かったのだが、これでは
 誤解を生じるかもしれない。
サイト開発知っとこ:Googleカスタム検索">サイト開発知っとこ:Googleカスタム検索

 修正した。 ▼
<div style="margin-left:210px;">
<ul class="kwicks">
<li id="kwick1"><a href="/sitedev/" title="サイト開発知っとこ">サイト開発知っとこ</a></li>
<li id="kwick2"><a href="/affiliates/" title="あれ、どこでアフィリ?">あれ、どこでアフィリ?</a></li>
<li id="kwick3"><a href="/symfonys/" title="symfony's">symfony's</a></li>
</ul>
</div>
 画像とまったく同じテキスト文字列だ。

 さて、このような事を今後確実にチェックするために
 長らく利用していなかった(これも、よくなかったな)
 テキストブラウザを入れておこう。


 Googleも進めている、老舗:Lynx だ。
 Windows版も存在している。


Lynx for Win32 (by patakuti): Project Home Page
Lynx for Win32 (by patakuti): Project Home Page 2.8.5rel.1TH より,
 暗号機能(SSL)を内蔵した
 状態で配布

 ・・だ、そうです。


 ちょっと前のものですが、
 チェックには十分でしょう。

 ■インストール > 起動
  インストール > 起動
  ※DOS窓を使って よくできてるなぁ。
   という印象ですが・・・


  利用方法は
  ・Lynxでアクセシビリティチェック
   こちらの 秀逸なサイトでほとんど理解できるでしょう。


  覚えておくべき利用方法は 次の3つぐらいですか、ね。
  G キー : URLを直接打ち込めるようになる
  Ctrl + W キー : Windows上でコピーしているものをペーストできる
  スペース キー :次の頁に進む
  Q キー : 終了する

 ■先の「ググる、カスタム検索ズ」はさて、どうなった?
  ググる、カスタム検索ズ
   を、 Lynx で見ると ▼
  Lynx で見ると
  Lynx で見ると


 う~む。大丈夫、かな。
 ※"AX" というのは、XREAのアクセス解析の 画像alt だし。


 とにかく、注意しなくっちゃ。
 いや、何よりも、「利用者視点」、だな。自戒自戒。

commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1185-ad9ed503
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。