化粧品・サプリメントの通販売上No.１サイト、

DHCのホームページを覧てたら、

ページの中の、あるおもしろい部分に思わず目がとまった。

次のウェブページの画像をみてください。

「パンくずリスト」が２本立てになっています！

レギュラーな「パンくずリスト」が上段で、

イレギュラーな「パンくずリスト」が下段に配置されています。

なるほど。こんな手もあったわけですね。

初めてお目にかかりました。

ちなみに、パンくずリストとは、

ウェブサイトの中で、自分が今どの（階層の）ページを閲覧しているのか分かるようにするための記述のこと。

通常、上画像のように、

トップページ（＝HOME）から階層を下る記述となっています。

閲覧者がウェブサイト内で迷子にならないようにということで、

グリム童話『ヘンゼルとグレーテル』の中で、

主人公が森で迷子にならないように通り道に

パンくずを置きながら進んだ、というエピソードに由来しています。

2004年６月、ウェブ・アクセシビリティを規定した

日本工業規格（JIS、正式名称は「JIS X 8341-3 高齢者・障害者等配慮設計指針 - 情報通信における機器、ソフトウェア及びサービス - 第3部:ウェブコンテンツ」）が交付された際、ホームページへの「パンくずリスト」の設置が推奨され、一気に拡がったという経緯があります。

現在は、検索エンジンGoogleも「パンくずリスト」のホームページへの設置を推奨しています。

（「検索エンジン最適化スターターガイド」PDFファイル）

ただ、パンくずリストはその問題点を指摘されることが結構あります。

その問題点についてはまた筆を改めて別の機会に取り上げたいと思います。

とは言え、このDHCのホームページにある

２本立ての「パンくずリスト」は

ある意味、「パンくずリスト」の問題点のひとつに対する

斬新な解決策と言えなくはありません。

ここで言う問題点とは、

ウェブサイトのコンテンツの中には、

色々なページからたどれるコンテンツや

分類が重複するコンテンツが結構あり、

その場合、単一の「パンくずリスト」のような分類構造では

そのコンテンツの位置を確定できなくなるというものです。

２本立ての「パンくずリスト」は、

この「単一のパンくずリスト」を覆すやり方なんでしょうか。

少なくとも、DHCの２本立ての「パンくずリスト」は、

絶妙な記述だと思います！

最下層のコンテンツ「バスタオル」から

「キャンペーン商品一覧」ページへの誘導を可能にしていますから。

理論的な是非より、実際にお客様を誘導し、

売上に貢献する仕組みのほうが優先されるのが通販サイトでしょう。

ちなみに、コーディングは次のようになっています。

最初、下段の「パンくずリスト」に nofollow があったらスゴイと思っていましたが、残念ながらそれはありませんでした。

実際のコーディングは、

「定義型リスト」内に入れ子で「並列列挙リスト」の入れ子、入れ子、入れ子… となっています。

考えた上でのコーディングだというのは分かりますが、

パンくずリストのコーディングとしては何とも微妙ですね。

Tweet

Yahoo! JAPAN が検索における一部のスパム行為（キーワード入力補助スパム・関連検索ワードスパム）を明確化し、取締りを強化すると、Yahoo!検索スタッフブログで本日（12月11日）発表していました。

　　▶「Yahoo!検索の品質向上に対する取り組み」

以前から「キーワード入力補助スパム」と「関連検索ワードスパム」に対するヤフー検索の弱さは随分指摘されていました。

ちなみにグーグル検索においてはある程度（検索システム上の）スパム対応がきちんとできているため、ヤフー検索のように大きな問題になることはありませんでした。

スパムの手口ついてに触れる前に、

「キーワード入力補助」と「関連検索ワード」について少々。

画像を見てもらったほうが早いですね。

【キーワード入力補助】

検索キーワードの入力途中に表示される他の検索キーワード候補が

キーワード入力補助と呼ばれるもの。

（さらに詳しくは、Yahoo!検索ヘルプ「キーワード入力補助機能とは」）

【関連検索ワード】

ウェブ検索の結果の下に、関連検索ワードとして表示されるのが

関連検索ワード。

（さらに詳しくは、Yahoo!検索ヘルプ「「関連検索ワード」とは」）

「キーワード入力補助」にしろ、「関連検索ワード」にしろ

その検索キーワードでの検索回数が多い場合に表示されるようになります。

SEOスパム業者は、

故意にその検索キーワードでの検索回数を多くすることで、

特定の検索キーワードで検索しようとした際に

「キーワード入力補助」や「関連検索ワード」として

表示されるようにするもの。

比較的簡単なプログラムを使って行っています。

ちなみに、

「関連検索ワード」が表示される先頭に虫眼鏡のマークがあることから、

「関連検索ワード」SEOスパムは、

虫眼鏡SEOスパム（単に、虫眼鏡スパム）と呼ばれたりします。

検索エンジン対策の世界においては、

人為的に直接検索エンジンに影響を与える行為は、

普通に考えれば、直ぐにスパムだと理解できるわけですが、

結構な数のスパム業者があるのも事実です。

現在ヤフーが認定する検索エンジンスパム行為は次の通り。

（ヤフー検索「検索エンジンスパムとは？」から抜粋）

「検索エンジンスパム」とは、検索キーワードと十分な関連性がないにもかかわらず、意図的に検索結果に表示されるように操作をしているウェブページを指します。

以下は、検索エンジンスパムの例です。

• 検索する利用者をほかのウェブページに転送するためだけに存在するウェブページ
• ほかのウェブページとまったく同じ内容で作られたウェブページ
• 情報をほとんど公開していないにもかかわらず、自動的かつ大量に作られているウェブページ
• 検索エンジンが付与する表示順を不正に上昇させているウェブページ
• 検索する利用者に見えないテキストを使っているウェブページ
• 過度な相互リンクを行い、サイトの認知度を不自然に上昇させているウェブページ
• 検索エンジンの検索結果に表示される内容と利用者が目にするウェブページの内容が異なるウェブページ
• 検索エンジンのためだけに作られたウェブページ
• 特定の社名を悪用しているウェブページ
• 過度なポップアップ使用により、利用者の正常な操作を妨げるウェブページ
• 虚偽または詐欺と思われるウェブページ

検索エンジンスパムに該当すると判断されたウェブページは、インデックスから随時削除されます。

代表して、こんなページだということで

スパム業者のホームページを下に表示しておきます。

こんなうたい文句で金儲けをしていますから、ご注意を！

【SEOスパム業者のウェブサイト見本】

意外にちゃんとした作りになっていると思いませんか？

でもよく見ると、トップページ上には企業名や企業の住所が掲載されていないのが分かります。（そんな商売はしたくないものですね。）

また、悪徳SEO業者の十八番ワード

「安心の成果報酬型の料金プラン」という文言もちゃんとありますね。

さらに悪徳業者になると、

「Yahoo! JAPAN公認」や「Yahoo! JAPANから独占的な許諾」などの文言を使っているものもあるそうです。

その労力、もちっとマシなことに使えばいいのにと思うのは

自分だけでしょうか？

ちゃんとした「検索エンジン対策」ならデザインクロスまで。

Tweet

マイクロソフトのブラウザー Internet Explorer（６・７・８）に
一部のCSS3のスタイルを機能させる
CSS3 PIE（PIE.htc）はとても便利なJavaScriptです。

CSS3 PIE（PIE.htc）によって現在、
IEに機能するようにできるCSS3のスタイルは次の通りです。
（「lojjic's PIE at master - GitHub」）

• border-radius（ボックスを角丸にする）
• box-shadow（ボックスに影をつける）
• border-image（境界線に画像を使用する）
• multiple background images（背景に最大４つの画像を使う）
• linear-gradient as background image（背景にグラデーション）

文章を読みやすく、伝わりやすくデザインするという点では、
充分ありがたいスタイルですね。

CSS3 PIE（PIE.htc）のダウンロード先

　　▶ Downloads for lojjic's PIE - GitHub

通常は、一番上の「PIE-1.0beta2.zip — PIE distribution, version 1.0 beta 2」をダウンロードし、「PIE.htc」を使います。php用の２ファイルは使いません。

（ダウンロードするのに、サインアップする必要はありません。）


ところが、CSS3 PIEのホームページに書いてあるように設定しても、
以下の事柄に注意しないと、上手くいかない場合があります。

注意点１
CSSにはCSSファイルから「PIE.htc」への相対パスではなく、
「PIE.htc」を使用しているHTMLファイルから「PIE.htc」への相対パスをCSSに書き込む必要があります。
（絶対パス＝フルパスを設定しても自分の場合、動作しませんでした。）


注意点２
各要素に以下の設定をしないと、CSS3 PIEが上手く動作しない場合や、同じセレクタ内の他の要素のエラー原因となる場合があります。

　　position:relative;


注意点３
サーバーの仕様によって動作しない場合があるので、
その場合は「.htaccess」ファイルにて以下の設定が必要になります。
（この設定でサーバーに、拡張子.htcのファイルがテキスト形式のファイルであることを伝え、サーバーで適切に使用できるようにする。）
（その他の「.htc」ファイルの際も有効。）

　　AddType text/x-component .htc


（なお、注意点につきましては、「CSS3PIE（PIE.htc）が効かないと思ったら」を参照させていただきました。感謝です！）

Tweet