俺の図書館

君の美術館メンバーによる、仮想週間雑誌ブログ

PREV | PAGE-SELECT | NEXT

≫ EDIT

スポンサーサイト

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

| スポンサー広告 | --:-- | comments(-) | trackbacks(-) | TOP↑

≫ EDIT

デジタルランナー100% Vol.50

デジタルランナー100%





先日チケットの取り扱いが開始された東方キネマ倶楽部ですが、
この特設サイトは公開して以来一つの問題を抱えていたのです!
今回はそのことについてつらつらと。

実は通称Google八分と呼ばれる現象が起きていました。
Google八分とはGoogleで検索をかけてもヒットしなくなるというもので、
Googleの掲げるガイドラインに反したサイトは、品質の悪いサイトと判断され、
検索結果から弾かれてしまうのです。

このようなことにならないように、
また、検索結果で出来るだけ上位に来るように、
Googleのみならず検索エンジンに対してサイトを最適化する事を、
SEO ( Search Engine Optimization ) といいます。

今回の問題について。
以下は、サイトを開くとまず目に入る魔理沙を表示している部分のHTMLとCSSの一部です。

-------------------------------------------------------
<div id="header">
 <h1>東方キネマ倶楽部</h1>
</div>

#header {
 background: transparent url(./image/header.png) no-repeat left top;
}

h1 {
 text-indent: -9999px;
}

-------------------------------------------------------

div中でh1タグを配置して、そこに大見出しとしてイベント名を入れています。
しかし、イベント名は大きく魔理沙の画像で表示するために、
text-indentを大きくマイナス値を設定してテキストを画面外に飛ばしています。
そして、divに魔理沙の画像を設定することで、
画面外に消えたテキストの代わりに画像で代用しています。

これはCSSを使った画像での装飾手法としては一般的な方法で、
過去の特設などでもよく使っています。

しかし!
今回のこのやり方には問題があったのです。
それはテキストの代用となる画像を設定した場所でした。

Googleの考え方はこうです。
テキストを画面外に飛ばす場合は、
閲覧者には見えなくなったテキストの代わりとなる画像を表示すべきで、
単にテキストを見えないようにするというのは、
閲覧者と検索エンジンの解析プログラムが"見る情報"に差異があると判断し、
Googleの検索エンジンでは低評価を受けます。

今回のソースでは、backgroundの指定する場所が失敗していました。
h1のtext-indentをマイナス値にする事でテキストを外に飛ばしているので、
h1の情報は閲覧者からは見えなくなっています。
よって、この場合代替となる画像を指定するのはh1タグであるべきでした。
しかし実際はその親である#headerに指定しているため、
Googleのガイドラインに反してしまったようです。

h1タグはHTML上ページの一番大きな見出しを指定する論理タグなので、
その情報を隠すというのは大きなペナルティであったのだと思います。

Hispが作ってきたサイトで今回のような検索結果から弾かれる現象は初めてで、
大分頭を悩ましていたのですが、
昨日の朝方にイベント名で検索したら検索結果に1位で表示されるようになりました。
問題の箇所を修正後30時間前後してからの反映でした。

Googleの検索に表示されるようになってから、
特設サイトへのアクセスが少し伸びました。
やはりGoogleの影響はとても大きいようです。
サイト制作者の方は、このようなことにならないようにお気をつけ下さい。
Google先生に逆らってはいけない…。

| 旧 木:ゲーム・電脳 | 23:59 | comments:0 | trackbacks(-) | TOP↑

COMMENT













非公開コメント

PREV | PAGE-SELECT | NEXT

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