takkaaaaaの日記

趣味について書いている個人ブログです

【SEO】パンくずリスト、構造化データマークアップ、HTML5でブログのSEO向上


公開日:
カテゴリ: ブログ運営
※本ブログには広告が含まれます

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

追記・・・この記事は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>

修正項目は以下になります。

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ブログで適用できそうなものを適用しました。

ブログトップページ(http://schema.org/Blog)

ブログトップページ用にBlogのタグも付けてみました。Articleと重複していない項目は下記です。

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でOGPの設定をする時にhtmlタグにxmlnsは不要

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

まとめ

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

ところで、当ブログは古いIEでどう見えているのでしょうか?ブログの構造が崩れてないといいけど。
Windows XPのサポートも切れたことだし、できるだけモダンなブラウザを使ってほしいところですが、企業などでは社内システムの関係もあって、なかなかIEのバージョンを上げられないですよね。。。

takkaaaaaの日記トップページへ

私のブログを読んで頂き、ありがとうございます。管理人のtakkaaaaaです。

2013年から書き始めて、読んでくれた方に少しでもお役に立てればいいなと思って発信しています。よろしくお願いいたしますm(_ _)m

  • Location : 北海道の十勝地方出身、横浜市在住
  • Work : システムエンジニア・プログラマー(10年以上)
  • Interest :
    • ・音楽鑑賞(aikoのファンクラブに入ってます)
    • ・園芸・ガーデニング(観葉植物やイチゴやバジルなど)
    • ・投資・税金・節約(FP3級と日商簿記3級を保有)

詳しいプロフィールを見る
メッセージを送ろう