2連続でブログカスタマイズの記事になってしまってすみません。
土日でブログを色々いじっていたのですが、やりだすとハマってしまいますね。
今回、対応したのは以下の内容になります。SEO的にも効果あるかもしれませんよ。
- microdataによる構造化データマークアップ（パンくずリスト、schema.org）
- HTML5への移行
追記・・・この記事はFC2ブログ時代に書いたものです。なのでFC2ブログという記述が出てきますが、今はWordPressになっています。内容的にはブログサービスに依存せずに使えるものだと思います（自由度の低いブログだといじれないかも？）。
構造化データマークアップ
Google先生に聞いてもSEO的にすぐ効果があるかわからないようですが、検索エンジンが解釈しやすいように構造化データのマークアップをしました。将来的に効果があるかもしれません。
Googleのウェブマスターツールにも、「構造化データ テスト ツール」と「構造化データ マークアップ支援ツール」がありますよ。
個人的には、GoogleのウェブマスターツールやGoogle Analyticsに書かれている項目は、少なからずSEOに関係していると思っています。
パンくずリスト(http://data-vocabulary.org/Breadcrumb)
Googleで検索した時に、URL欄にカテゴリが表示されているサイトがありますよね。リッチスニペットというそうです。で、実現するための方法がmicrodataによるタグ付けです。
説明の都合上、あまり関係のない項目は省略してますが、以下のようなHTMLになります。
<div class="breadcrumb"> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://takkaaaaadiary.blog.fc2.com/" itemprop="url"><span itemprop="title">takkaaaaaの日記 ホーム</span></a> </div> > <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="blog-category-6.html" itemprop="url"><span itemprop="title">IT</span></a> </div> > <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="blog-category-18.html" itemprop="url"><span itemprop="title">ブログ</span></a> </div>> </div>
修正項目は以下になります。
- パンくずリストの各項目に、「itemscope」と「itemtype=”http://data-vocabulary.org/Breadcrumb”」属性を指定したdivタグで囲む。
- 各パンくずのリンクのaタグの属性に「itemprop=”url”」を付ける。
- 各パンくずの項目名を、itemprop=”title”属性を付けたspanタグで囲む。
- 上記だけだと、パンくずリストの途中で改行されてしまったので、全体をdivタグで囲み(例では、class=”breadcrumb”)、cssの方に「display:inline;」を書いて改行しないようにする。
FC2ブログではURLやカテゴリ名はテンプレートの変数から取得しています。なので全ての記事を手で修正するということはしていません。
構造化データテストツールで、検索結果にリッチスニペットのパンくずリストが以下のように表示されることを確認しました（オレンジで囲んだ部分）。
検索結果のパンくずリストはユーザの目に見えるものなので、他の記事よりも目立つことによりアクセスの増加が期待できますね。
記事(http://schema.org/Article)
schema.orgを見るとBlogPostingという項目もあるのでどちらにしようか迷いましたが、Googleの構造化データ マークアップ支援ツールを使ってみたら、Articleでタグ付けされたのでArticleにしました。
例えばこんな感じです。itemfefはitemscopeで囲んでいる部分の外側を参照するのに使います。
<article itemscope itemtype="http://schema.org/Article" itemref="profile"> <span itemprop="headline name">記事タイトル</span> <div itemprop="articleBody"> 記事本文 </div> </article> <div id="profile" itemprop="author copyrightHolder editor" itemscope itemtype="http://schema.org/Person"> プロフィール欄 </div>
色々と項目はあるのですが、上記以外にもFC2ブログで適用できそうなものを適用しました。
- headlineとname・・・ブログの場合、記事のタイトルが見出し(headline)＝名前(name)なので、タイトル部分に2つとも付けました
- url・・・記事のエントリページのURL
- datePublished・・・記事の公開日
- articleBody・・・記事の本文を大きく囲みました
- author、copyrightHolder、editor・・・著者などはブログ右側のプロフィール欄にタグ付けしました
- copyrightYear・・・著作権の開始年はフッター部分をタグ付けしました
ブログトップページ(http://schema.org/Blog)
ブログトップページ用にBlogのタグも付けてみました。Articleと重複していない項目は下記です。
- name・・・ブログ名。当ブログでは一番上をロゴ画像にしているので、フッターの「このサイトについて」の文を参照してタグ付けしました。文字でブログ名を書いている場合は、一番上のヘッダー部分で良いと思います。
- alternativeHeadline・・・ブログの副題。見えるところには書いていないので、空のspanタグにcontent属性で設定しました。
- description・・・ブログの概要。当ブログの場合はロゴの下の文です。
HTML5への移行
HTML5への移行もしました。グリグリと動くような修正はしていませんが（そんな技術力無いですし・・・）、HTML5による構造化をしてみました。
構造化データマークアップと同様に、すぐにSEOにプラスになるかはわかりませんが、将来的なSEOの効果を見据えてます。自分の勉強がてらというのもあります。
検索エンジンにブログの構造を教えるのに役に立つので、マイナスにはならないと思っています。Google様の技術力だったら、すでに構造を読み取ってくれているのかも知れませんね。
ちなみに、このサイトを参考にしました。HTML5による構造化がよくわかります。
HTML5 ドキュメントのセクションとアウトライン
以下のように、header、nav、article、time、aside、footerのタグを使って構造化してみました。HTML5の仕様上はh1タグを複数使っても良いそうですが、SEO的に大丈夫か自信が持てないので無難にh1タグは1つのみにしています。
sectionタグは記事ページでは使いませんでした。記事書くときにわざわざタグ付けするの面倒過ぎる・・・笑
<!DOCTYPE html> <html lang="ja"> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> ・ ・ ・ </head> <body> <header> ブログ上部のヘッダー（当サイトではロゴと概要文） </header> <nav> グローバルナビゲーション部分 </nav> <article> <h1>記事タイトル</h1> <time itemprop="datePublished" datetime="記事公開日(YYYY-MM-DD)" pubdate>記事公開日(YYYY-MM-DD)</time> 記事本文 </article> <aside> プロフィール </aside> <aside> サイト内検索 </aside> ・ ・ ・ <footer> Copyright部分 </footer> </body>
また、下記サイトを参考にしましたが、FacebookのOGPについて、HTML5の場合は修正したほうが良いようです。今まではhtmlタグの属性に書いていましたが、headタグのprefix属性を使って書くようにしました。
ちなみに、以下のサイトでHTML5の文法をチェックできます。ソーシャルボタンなどの外部の部品で減点されるところもあるので、どうしても点数は低くなりますが。。。
まとめ
今回は構造化データのマークアップとHTML5について書いてみました。いかがだったでしょうか。
- パンくずリストは検索結果で見えるものなので、アクセスアップに(少し)効果がありそう。意外と対応していないサイトが多いですよ。
- microdataによる記事の構造化データマークアップと、HTML5による構造化は、SEO的に効果があるかわからないけど、将来的にはどうなるのだろう？
ところで、当ブログは古いIEでどう見えているのでしょうか？ブログの構造が崩れてないといいけど。
Windows XPのサポートも切れたことだし、できるだけモダンなブラウザを使ってほしいところですが、企業などでは社内システムの関係もあって、なかなかIEのバージョンを上げられないですよね。。。