KOJIKA17

Meta Descriptionで正しく遊ぶ方法について調査してみた。

SEO Japanさんの記事を見ていた時に、Meta Descriptionをアスキーアートで表示しているサイトがあり、
ちょっと気になったので、GoogleのMeta Descriptionの出方について調べてみました。

Meta Descriptionの調査

複数のテストページを作成し、Googleさんにインデックスさせてみました。
Meta Descriptionのテストページのリストを見る

英数、記号の200文字

<meta name="description" content="abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ ! '§ $%& /() =? * '__ |; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ ! '§ $%& /() =? * '__ |; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ ! '§ $%& /() =? * '__ |; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ ! '§ $%& /() =? * '__ |; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ ! '§ $%& /() =? * '__ |; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ ! '§ $%& /() =? * '__ |; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ ! '§ $%& /() =? * '__ |; ²³~ @`´ ©«» ¤¼× {}abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI" />

表示結果

出たら目な、Descriptionだと表示されませんでした。
ワードサラダ(コンピューターがキーワードを詰め込み、自動生成した文章)として見られた可能性もあります。

本家の表示です。(155文字)

<meta name="description" content="WWWWW___WWW____WWWW____WWW__ WWWWW__W_________W________W____W_ WWWWW___WWW____WWW____W_____W_ WWWWW________W___W________W____W_ WWWWW___WWW____WWWW____WWW_" />

表示結果

SEO Japanさんの記事で紹介されていた本家のMeta Descriptionです。
折り返している部分には、スペースを入れて改行されています。
行数も増えるため、スニペットの表示領域が他の比べて広くなり、露出度が上がります。

本家の「W」を「F」に変えてみました。

<meta name="description" content="FFFFF___FFF____FFFF____FFF__ FFFFF__F_________F________F____F_ FFFFF___FFF____FFF____F_____F_ FFFFF________F___F________F____F_ FFFFF___FFF____FFFF____FFF_" />

表示結果

単純にFに変更してみました。
単語は2,3語程度なら、表示されるのことを確かめました。

全て全角です。(126文字)

<meta name="description" content="以下の文章はサンプルです内容は適切に書き変われます いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす色は匂へど 散りぬるを 我が世誰ぞ 常ならむ 有為の奥山 今日越えて 浅き夢見じ 酔ひもせず" />

表示結果

全角の文章を入れています。
通常通りに表示されいます。

日付を入れた場合

Meta Description

<meta name="description" content="デモテスト中です。このページがインデックスされることを祈ります。こちらでは日付を入れています。" />

body

<p><time datetime="2011-09-05">2011年9月5日</time></p>
<p>現在テスト中です。</p>
<p>デモテスト中です。このページがインデックスされることを祈ります。インデックスされた場合、確認はsite:で確認します。こちらでは日付を入れています。</p>
<p>こちらを見られても、見なかった事にしてやってください。</p>

表示結果

日付がスニペットに表示されます。
日付が出た状態でも、アスキーアートが成立するように作成するか、日付を消してスニペットを出した方が良いかもしれません。

スニペットの表示に関係ありませんが、デモで作成したページの中では、このページが検索順位が一番上がっています。検索結果と日付の関係は多少なりともあるかもしれません。

本文の影響度を測定

<meta name="description" content="現在テスト中です。本文の影響度を測定中です。見ちゃ、ダメ、ゼッタイ。" />

表示結果

Descriptionの量を減らし、本文のボリュームを他のページに比べて多くしています。
Descriptionの量が少ない場合、本文が優先させる場合があるので、テストを行ってみました。
ページのボリュームがない場合は、1行であってもMeta Descriptionが優先されるようです。

さらに本文の影響度を測定 (Web Design KOJIKA17 の場合)

<meta name="description" content="へんたいコーダーの人のブログです。" />

表示結果


このブログのMeta Descriptionです。
全ページ、上記のMeta Descriptionで統一しています。
すべて同じDescriptionで、かつ、内容が少ない場合、Descriptionが表示されないケースが非常に多いです。
表示されたとしても、indexにしか適用されないケースが多いように感じます。

逆にMeta Descriptionを外した場合、head要素にある不要なタグの情報などが出てしまい、最適な文章をGoogleが出してくれないケースがあるため、なんらかのMeta Descriptionは入れた方がいいかもしれません。

ただし全ページ違うMeta Descriptionを配置した方が、それぞれのDescriptionを読んでくれる事が多く、適切な情報をスニペットに表示しやすくなります。

デバッグツールでCSSを調べる。

GoogleのスニペットのCSSを調べました。

GoogleスニペットのCSS

width:513px;
font-family: "arial", sans-serif;
line-height: 1.24;

Meta Descriptionで正しく遊ぶ方法

  1. Googleのスニペット部分と同様のCSSを用意しましょう。
  2. アスキーアートの場合は、単語を2,3語にとどめる。(全角可)
  3. 日付を入れる場合は、それを考慮して下さい。
  4. Descriptionは全ページ、バラバラの方が思い通りの結果を出しやすいかもしれません。
  5. Googleさんにインデックスさせてあげると、表示されます。

2011年9月25日現在の遊び方です。Googleの仕様が変わる可能性も大いにあるので、用法、容量には気をつけて下さい。