So-net ブログの meta description 修正(2回目)

So-net

前の記事でソネブロのメタタグをカスタマイズしましたが、その後も他サイトの検索結果を色々とチェックして改良してみました。今回は meta description に記事タイトルを追加してみたいと思います。

ギズモード・ジャパンの検索結果

ギズモード・ジャパンの検索結果がわかりやすかったので参考に。ギズモード・ジャパンでは「記事タイトル+ページ概要」にしているようです。こうすれば長くて省略されてしまったタイトルも表示させることが出来ますね。なるほどなるほど。

description に記事タイトルを追加する

前の記事では記事のテキストだけを240バイトまで取得するようにしていました。(以下は本文+追記文から240バイト分の文字を取得するものです)

<meta name="description" content="<% article.entire_body | tag_strip | oneline | shorten(240) | html %>" />

ソネブロのタイトルタグからコードを拾ってきます。この <% extra_title %> というのは記事ページでは記事のタイトルを出力してくれるものですね。

<% if:extra_title %><% extra_title | dismiss_pictograms | html %><% /if %>

これを description に追加します。<% /if %> の前に「。」(句点)が自動的に入るようにしておく記事タイトルと記事本文の見分けがつきやすくなるかもしれません。記事タイトル文が増えるので記事本文の文字数を160バイトくらいに減らしておきます。

<meta name="description" content="<% if:extra_title %><% extra_title | dismiss_pictograms | html %>。<% /if %><% article.entire_body | tag_strip | oneline | shorten(160) | html %>" />

W3C Semantic data extractor で結果を確認してみる

ブラウザでソースを確認してもいいんですが他の部分のチェックもしたいので W3C の Semantic data extractor というものを使います。

description に記事のタイトルを入れることが出来ましたが記事側の文字数がちょっと多いようです(120バイトくらいがベスト?)。1000文字とかアホみたいな文字数じゃなければそれほど問題ないと思います。自分のブログが Google にどのようにキャッシュされているかは「site:〜(URL)」で確認することが出来ます。例えばうちのブログだと "site:mattintosh.blog.so-net.ne.jp" で確認出来ます。

文字数の確認はdounocounoさんの 文字数カウンタ | Web制作小物ツール が便利です(素晴らしいツールに感謝)。GoogleやYahoo!などの検索エンジンの文字数の目安も書かれています。

検索エンジンに検索結果をどのように表示させるかは好みなのでカスタマイズは自己責任で。