2連続でブログカスタマイズの記事になってしまってすみません。

土日でブログを色々いじっていたのですが、やりだすとハマってしまいますね。
今回、対応したのは以下の内容になります。SEO的にも効果あるかもしれませんよ。

  • microdataによる構造化データマークアップ

  • HTML5への移行


構造化データマークアップ


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:block;」を書いて改行しないようにする。


当ブログは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タグを複数使っても良いそうですが、今までのHTMLでは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でOGPの設定をする時にhtmlタグにxmlnsは不要



ちなみに、以下のサイトでHTML5の文法をチェックできます。ソーシャルボタンなどの外部の部品で減点されるところもあるので、どうしても点数は低くなりますが。。。
Another HTML Lint - Gateway



まとめ


今回は構造化データのマークアップとHTML5について書いてみました。いかがだったでしょうか。


  • パンくずリストは検索結果で見えるものなので、アクセスアップに(少し)効果がありそう。意外と対応していないサイトが多いですよ。

  • microdataによる記事の構造化データマークアップと、HTML5による構造化は、SEO的に効果があるかわからないが、将来的にはどうなるのだろう?


ところで、当ブログは古いIEでどう見えているのでしょうか?ブログの構造が崩れてないといいけど。

IE11の開発者ツールで見たところでは、IE7までは大丈夫そう。IE6だとどうなのかなぁ。
Windows XPのサポートも切れたことだし、できるだけモダンなブラウザを使ってほしいところですが、企業などでは社内システムの関係もあって、なかなかIEのバージョンを上げられないですよね。。。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。