2005-09-02 アーカイブ

CSS ファイルのインデックス

• Yahoo! ページ検索（YST）がCSSファイルをインデックス

Lucky bag::blog: 検索サイトが CSS ファイルをインデックス経由で。

私は SEO 目的ではありませんが、 CSS 中に display: none; を用いている箇所がいくつかあります。 display: none; があれば即 SEO スパムとみなされるということは無いと思いますが、可能性が全く無いとも言えません。

hxxk.jp の各ページは現在では Google にはインデックスされているので、 SEO スパムとみなされてはいないようです。

CSS ファイルを検索

これは本題には関係ない部分ですが……。

んでもって、Google の方でもいくつか CSS ファイルがインデックスされてるみたい。

• http://www.google.co.jp/search?hl=ja&c2coff=1&q=css+filetype%3Acss

CSS ファイルだけに限定して検索することもできるんですねえ。 Googleの特殊機能 - PDF ファイルの検索に例示されていますが、これを応用して、「検索キーワード+filetype:css 」として検索すると CSS ファイルだけを検索できるようです。 hxxk.jp の CSS もこの通り。 robots.txt の効果かはたまた .htaccess の効果か分かりませんが、検索結果に現れなくなっていました。 ( 記事作成時は http://hxxk.jp/common/css/mt16.css が検索結果に現れていました。 ) CSS ファイル以外の検索結果はまだ残っていますが、今後どうなることやら……。 この追記部分を書いている時点での hxxk.jp ドメイン内のインデックス数は 約 4,520 件 のようです。

CSS ファイルのインデックスを禁止するとどうなる ?

さて、 CSS ファイルのクロールによってスパム判定をされかねないと危惧するなら、 robots.txt でインデックスをしないように指定したらいかがでしょう ?

• Google よくある質問 - Google がサイト全体または一部をクロールしないように設定するには？

まさか Google 自身が認めている方法を取ったからって、 「ヤヤ、こやつ CSS ファイルのクロールを拒否しておる ! 其の方何ぞやましいことでもあるのか !? 」 という判定はしないと思うのですが……どうでしょう。

単純に *.css のクロールを Googlebot にやめてもらう場合は

User-agent: Googlebot
Disallow: /*.css$

で良いのですが、 Googlebot 以外にもこの記述が使えるかどうかは分かりません。 少なくとも Yahoo! ヘルプ - サイト管理者向けや A Standard for Robot Exclusion には書かれてありませんし。

そこで、念のために CSS ファイルを置いているディレクトリもクロール拒否をしてみましょう。 hxxk.jp の例ですと、 CSS ファイルは /common/css/ に置いていますから、

User-agent: *
Disallow: /common/css/

で全てのクローラに対して /common/css/ へのクロールを拒否することができます。

CSS ファイルの外部参照を制限

これは有効な手段となるかどうか分かりませんが、自サイト以外からの CSS ファイルの参照を制限するという手もあります。 前項と同じく hxxk.jp を例にします。 /common/css/.htaccess に、

SetEnvIf REFERER "hxxk.jp" Lilith
Order Deny,Allow
Deny from all
Allow from env=Lilith

と記述すれば、 hxxk.jp 以外からの参照を防ぐことができます。 ただし、この場合はセキュリティソフトなどで HTTP_REFERER を無効にしている場合に、 CSS の適用が無効になってしまうかもしれません。 なお、SetEnvIf ディレクティブを .htaccess で扱う場合は Apache のバージョンが 1.313 以降であることが前提となります。

ところで、参照を許可する場合の値は任意なのですが、 Lilith を使って説明しているリソースが多かったです。 何で Lilith なんでしょうねえ。 トラックバックをいただいたので、改めて Allow from env=Lilith or Deny from env=Lilith という項を書き足しました。

実験してみます

ということで、 Googlebot の *.css ファイルへのクロールと全てのロボットの /common/css/ へのクロールと、 hxxk.jp 以外の HTTP_REFERER ( 空白の HTTP_REFERER も含む ) による /common/css/ へのアクセスを禁止してみました。

しばらく経って hxxk.jp 自体が Google や Yahoo にインデックスされなくなったら、 CSS ファイルのクロールを拒否するのはスパム認定されちゃう、ということで。

トラックバック送信先

Yahoo! ページ検索（YST）がCSSファイルをインデックス

display:none によってスパム行為と誤認される恐れがある場合、 robots.txt でクロールを避けるという回避策があるのではと思いました。

Lucky bag::blog: 検索サイトが CSS ファイルをインデックス

robots.txt でクロールを避けたり、 CSS ディレクトリへのアクセスを制限したりといった回避策があるのではと思いました。私は SEO 業者じゃありませんけれど。

引用の際に引用元のマークアップをどうするか

私は他人の記事からの引用を行う際は、 Copy URL+ の自分流カスタマイズを使って <blockquote cite="%URL%" title="%TITLE%">\n\n<p>\n%SEL%\n</p>\n\n</blockquote> という形式 ( %SEL は Copy URL+ で定義されている、選択部分のテキストを表す変数です ) で手間を省いているのですが、 %SEL にあたる部分は Copy URL+ では単なる #PCDATA としてしかコピーされないため、ページのソースを開いてコピーしなおしています。

というのも、例えば引用元の記述で、引用元記事の作者が「ここは強調したい」という意図を持って <em>～</em> でマークアップしていれば、それを含めて引用したいと思っているからです。 ( ただし、それは引用元の記事が正確にマークアップされているという前提があればの話ですが。 物理マークアップであったり、 hxxk.jp が宣言している XHTML 1.0 Strict で認められないマークアップがなされていたりした場合は、元記事の文意を損なわないように注意して適宜改変しています。 )

マークアップを含めた引用を効率的に生成

特定部分のソースを表示する機能は、現行の Firefox では標準で備わっていますし、 Camino べんりセットの「選択部分のソース」機能などの既存のブックマークレットなどもあります。 ( Camino べんりセットは 選択部分のソースを <blockquote> で囲うテンプレート もあるようですが、 選択部分のソース自体がうまく機能しませんでした。 画面最下部に表れるため、ちょっと不便です。 benriSet.css を @import するようにしたら、きちんと表示されました。 何故今までこれを使いこなさなかったのだろう……。 ) どちらにしても、 Copy URL+ とそれらの機能によるソース表示の 2 ステップがどうしても必要となるため、慣れてくるとその ( 手作業で引用部分をマークアップするよりははるかに省力化されたはずの ) 2 ステップも煩わしくなってしまいます。

そこで登場したのが引用マークアップを生成 - 徒書です。 北村曉さん ( 曉に死す ) が Copy URL+ を使用していたかどうかは分かりませんが、前述の 2 ステップを 1 ステップにしてくれるブックマークレットです。

「選択箇所を blockquote 」の導入手順と使用手順

前提として、 Gecko 系ブラウザのためのブックマークレットであるため、 Mozilla や Firefox や Camino などをインストールしている必要があります。

1. 引用マークアップを生成 - 徒書を Gecko 系ブラウザで開く
2. 選択箇所をblockquote のアンカーを補助クリックしてコンテキストメニューを開き、「このリンクをブックマーク」をクリック ( ブックマークするフォルダは任意 )

次に、導入後の使用手順を説明します。

1. 引用したい部分のテキストをマウスでドラッグ
2. ブックマークから、先ほどブックマークした「選択箇所を blockquote 」を選択すると、マークアップ済の引用部がポップアップで表示されます
3. それをコピーして、エディタや weblog の編集画面などに貼り付け

「選択箇所を blockquote 」による引用形式と注意点

「選択箇所を blockquote 」によって生成される形式は次のようになります。

<p><a href="引用元の URI" title="引用元の title 要素"><cite>引用元の title 要素</cite></a>より引用:</p>

<blockquote cite="引用元の URI" title="引用元の title 要素">
引用元の選択部分の、マークアップ部分も含んだ内容
</blockquote>

blockquote 要素の直前に cite 要素にて引用元へのリンクアンカーを配置されていますが、これは各人の方針で消したり残したりすると良いでしょう。 私は blockquote 要素の cite 属性だけで充分 ( だけどさりげなくリンクアンカーを配置することもあり ) という方針ですので、 cite 要素部分は使いません。 ( 参考 : 『blockquote要素の中に出典を示すcite要素を包含すべきか』に関する議論リンク集 @ CD )

また、選択部分が短い場合 ( 例えば、 <p>～</p> 内のテキストなど、単一のブロックレベル要素内を選択した場合 ) は、 blockquote 要素の直下に #PCDATA が配置されてしまったり、 li 要素だけマークアップされているけれど ol 要素や ul 要素で囲まれなかったりといったことになるので、生成後のマークアップは適宜チェックするようにした方が良いでしょう。 ( なお、 Transitional DTD を宣言している場合は、 blockquote 要素の直下に #PCDATA を配置することは一応可能となっています。 しかし、それは既存の古い文書を救済する目的で認められているだけなので、 Transitional DTD を宣言している場合でも、ブロックレベル要素で囲うように留意する必要があります。 )

トラックバック送信先

引用マークアップを生成 - 徒書

導入手順や使用方法、使ってみて分かった注意点などをまとめてみました。

La Guillotine

ベルギーのライトアンバートリプルエール。 少し赤味がかった褐色をしており、麦の香りが強いビールです。 瓶が不透明で、中が見えないようになっているのも特徴。 また、ラベルにその名の通り断首台の絵が描かれています。 アルコール度数は 9.0% 。