Schema.org

Wordpress を使っていて思うのは HTMLがシンプルでカスタマイズの自由度が高い Seesaa ブログのほうが圧倒的に構造化データでマークアップし易い。だから Seesaa でマークアップしないのはちょっともったいない。

Google ウェブマスターツールのデータハイライターを使えば Google に構造化データを送ることができますが、もう一歩踏み込んで細かいマークアップをしてみたいというときに役立つかもしれない、Seesaaブログ完全対応のマークアップサンプル集を作ってみました。

Sponsored Link

Schema.org(スキーマ)構造化データマークアップとは

スミマセン、実はよく分かりません。

ボクなりに Schema.org のサイトや実際にスキーマの情報を提供してくれるサイトやブログを見ているのですが、どうもまちまちで。ECサイトでもなく、イベント情報でもなく、学術文でもない「ごく一般的なブログ」という範疇の Seesaa ブログならどんなマークアップになるのか具体的な手掛かりがなかなか見つからないのが現状。

今のところのつたない解釈だとこんな感じ。

既存のHTMLや記事だけでは伝えきれないサイトやブログのコンテンツを効率よく理路整然と Google などの検索エンジンに伝達するためのひとつの手段が schema マークアップ。

例えば、ブログ記事を更新したとき。記事に「更新日:2015年3月30日」と書いても閲覧者はそれでわかるけど検索エンジンには分らない。dateModified と明示的にマークアップすることで検索エンジンは更新日が把握できる。多分こうやってブログの著者が意思を持ってコンテンツを検索エンジンに伝えましょうというのがマークアップなのかなと。

以下に挙げるマークアップのサンプルはボクの個人的な解釈で Seesaaブログをマークアップするときにはこういうパターンもあるんじゃないかな、という一例にすぎません。なので、このサンプルをとっかかりとして調べながら修正するための素材という位置づけで捉えて下さい。

まずはウェブマスターツールのデータハイライター

Google ウェブマスターツールを使っているのであれば、データハイライターでマークアップを体験することをおススメします。

とっかかりとしてデータハイライターから入る理由は2つ。

1. どの要素がマークアップされるのかをなんとなく把握する
2. 本来マークアップされるべき要素がウェブ上に表示されているか把握する

Googleウェブマスターツール データハイライター1は初めてのマークアップのための準備運動みたいなものです。マークアップする要素をドラッグで選択するだけなので、HTML 上のタグ(セレクタ)が具体的に分かるわけではありません。

タイトル、著者、カテゴリ、公開日、画像がマークアップされるのかくらいに、なんとなく分れば良いと思います。

どちらかというと2の方が重要で、Google がリッチスニペットとして認識する要素が確りとブログ上に表示されているか確認します。

例えば日付を隠していたりカテゴリが表示されていなかったり著者がなかったり。適用しているテンプレートは Google が上手く構造を理解してくれるだろうか。修正するならどこをカスタマイズすべきなのか。

データハイライターで選択できなかった要素。これに加え、他のどの要素をマークアップすれば Google へ構造を上手く伝えることができるのかなど、マークアップの項目出しをする参考にします。

» Google ウェブマスター データハイライター

テンプレートに構造化データマークアップを追加する

Schema.org(スキーマ)に準拠した構造化データマークアップを Seesaa ブログに適用すると言っても、テンプレートの設計を大きく変えるわけではありません。

テンプレート初期値
<div class="blog">

Schema.org マークアップを追加
<div itemscope itemtype="http://schema.org/Article" class="blog">

例えば記事本文を示すブロックに blog というクラスがあります。記事本文は Schema.org の Article(記事)に相当するので、緑色文字のようなマークアップを追記するだけです。

XHTML と HTML5

Seesaa ブログもそうですが、多くの無料ブログのテンプレートの HTML は XHTML です。ちなみにこのブログのテンプレートは HTML5 に書き換えています。XHTML と HTML5 は HTML の宣言を見れば分ります。

XHTML の宣言

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"
lang="ja">

一方、HTML5 は以下のようになります。

HTML5 の宣言

<!DOCTYPE html>
<html lang="ja">

なぜここで HTML5 の話になるかというと、これから挙げる schema.org マークアップは XHTML と HTML5 では異なるのでサンプルは分けて例示することになるからです。

例えば、標準的な XHTML Seesaa テンプレートで footer は <div class="footer">〜</div> ですが、HTML5 だと<footer class="footer">〜</footer> になります。

下記の例のようにマークアップのサンプルは2種類記述されているので、混同せずにどちらかを選択してもらうことになります。レイアウトが崩れてしまうことがあるので絶対に間違えないようにして下さい。

Footer の Schema.org マークアップ例

XHTMLの場合

<div id="footer" itemscope="itemscope" itemtype="http://schema.org/WPFooter";>

</div>

XHTML の場合は理論型属性ではないので itemscope 属性を省略できません。

HTML5 の場合

<footer id="footer" itemscope itemtype="http://schema.org/WPFooter">

</footer>

これを機に HTML5 にしてしまうのも方法かもしれませんが、その際は十分に注意しましょう。テンプレートのカスタマイズに慣れていないと、div タグを footer などに書き換えていく作業は結構難易度が高いです。

特に標準的なテンプレートは 閉じられた /div タグがどのクラスを閉じているのかコメントなどの目印がありませんから、/div タグが足りなくなってレイアウトが崩れるる原因になることがあります。いずれにしてもテンプレートの編集は、新しく追加した CSS や HTML で確認しながら作業することをおススメします。

それでは Seesaaブログの標準的なテンプレートを2部構成に分けて、タグと Schema.orgマークアップを対応させながら具体例を挙げていきます。

  • 第1部 HTML編(デザイン>HTML)
  • 第2章 コンテンツ編(デザイン>コンテンツ)

ブログタイトルやブログ説明などのようにデザイン> HTML 内で変数(content_header)によって記事コンテンツが呼び出されるケースがあります。その場合、変数は飛ばして各章で解説します。

第1章 Seesaaブログの構造化データマークアップ HTML編

デザイン>HTML で HTML をマークアップします。

ヘッダー、ブログ記事、フッターなどの大枠に対して itemscope, itemtype 属性を与え、その枠内に包含される要素に対して iremprop 属性を与えるという流れになります。

1-1. ヘッダー

デザイン>コンテンツのヘッダー領域にある「ブログタイトル」、「ブログ説明」を包含するブログのヘッダーをマークアップします。

デフォルトHTML

<div id="banner">
<% content_header %>
</div>

XHTMLの場合

<div id="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
<% content_header %>
</div>

HTML5 の場合

<header id="banner" itemscope itemtype="http://schema.org/WPHeader">
<% content_header %>
</header>

1-2. サイドバーブロック

サイドバーには左サイドバー links-left と右サイドバー links の2種類があります。デフォルト HTML では Links-left >( Content) > Links という順に記述されていますが、左右サイドバーともに構造は同じなのでまとめて例示します。

1-2-1. 左サイドバー links-left

デフォルトHTML

<div id="links-left">
<% content_left %>
</div>

XHTMLの場合

<div id="links-left" itemscope="itemprop" itemtype="http://schema.org/WPSideBar">
<% content_left %>
</div>

HTML5 の場合

<aside id="links-left" itemscope itemtype="http://schema.org/WPSideBar">
<% content_left %>
</aside>

1-2-2. 右サイドバー links

デフォルトHTML

<div id="links">
<% content_right %>
</div>

XHTMLの場合

<div id="links" itemscope="itemprop" itemtype="http://schema.org/WPSideBar">
<% content_right %>
</div>

HTML5 の場合

<aside id="links" itemscope itemtype="http://schema.org/WPSideBar">
<% content_right %>
</aside>

〜解説〜

サイドバーコンテンツでマークアップする項目はそれほど多くないかもしれません。

  • 最近の記事の記事タイトルと URL、公開日付
  • タグクラウドのタグをキーワードとして
  • カテゴリをキーワードとして

head の META タグに keywords がありますが、敢えてサイドバーのタグやカテゴリをキーワードとしてマークアップすることでブログ全体の性格を Google に伝えられるかなと考えてそのようにしています。詳しくは第2章のコンテンツ編で紹介します。

HTML5 でサイドバーを aside とするかどうかはいろいろ考え方があると思いますがボクは aside にしています。

1-3. Content ブロック

Content ブロックはヘッダーとフッター、サイドバーを除くブログ記事本体のことです。ブログのコンテンツ部分ですから重要なパートで、マークアップする項目が最も多くなります。

デフォルトの HTML で if 条件分岐により表示させているのは3種類のページです。

  • コメントページ: page_name eq 'comments'
  • 検索結果ページ: page_name eq 'search'
  • タグページ: page_name eq 'tag'


  • これ以外に明示的に if 条件を追記できるページ
  • トップページ(インデックスページ): page_name eq 'index'
  • カテゴリーページ: page_name eq 'category'

トップページと記事ページ(page_name eq "article")では content_main 変数で記事コンテンツ(コンテンツ>記事)が挿入されます。それ以外のページはこの HTML の content ブロックに記述されているコードにより記事が表示されます。従い第2章で後述する記事コンテンツとこの HTML の content ブロックは並列で同等レベルにマークアップすることになります。

参考:各ページ共通の骨格
・ contentブロック(div id="content")
  ・ blog ブロック(div class="blog")
  ・ blogbody ブロック(div class="blogbody")

1-3-1. Content ブロックの構造化

<div id="content"> は HTML5 の範疇でマークアップとは直接関係ありませんが、HTML5 で書き換えている場合はブログの主要部分を表わす content を main に書き換えます。

デフォルトHTML

<div id="content">
<% content_main %>

</div>

<% if:have_content_right -%>

XHTMLの場合

変更なし

HTML5 の場合

<main id="content">
<% content_main %>

</main>

<% if:have_content_right -%>

content ブロックは、右サイドバーの始まる if:have_content_right の直前にある /div で閉じられます。HTML5 の場合は、この /div が /main になります。

1-3-2. コメントページ

条件分岐で最初に記述されているコメントページ(<div id="comments">)には特にマークアップはありません。

1-3-3. 検索結果ページ

検索結果ページはトップページ(インデックスページ)とほぼ同じ形式で表示されるため、次のようなブログ記事と同し構造になります。
blog > blogbody

検索結果ページでは、記事コンテンツに相当するこれらの2つのブロックと包含する各要素をマークアップします。

デフォルトHTML

<% if:page_name eq 'search' -%>
<% loop:list_article %>
<div class="blog">
<h2 class="date">
<% article.createstamp | date_format("%Y年%m月%d日") %>
</h2>
<div class="blogbody">
<h3 class="title">
<a href="<% article.page_url %>" class="title"><% article.subject %></a>
</h3>
<div class="text">
<% article.entire_body | text_summary(240) %>
</div>
<div class="posted">
posted by <% article.nickname %> at <% article.createstamp | date_format("%H:%M") -%>
</div>
</div>
</div>
<% /loop %>
<% /if -%>

XHTMLの場合

<% if:page_name eq 'search' -%>
<% loop:list_article %>
<div class="blog" itemscope="itemscope" itemtype="http://schema.org/Article">
<h2 class="date updated"><span itemprop="datePublished" datetime="<% article.createstamp | date_format("%Y-%m-%dT%H:%M:%S+09:00") %>">
<% article.createstamp | date_format("%Y年%m月%d日") %></span>
</h2>
<div class="blogbody">
<h3 class="title entry-title"><a href="<% article.page_url %>" itemprop="url"class="title"><span itemprop="name"><% article.subject %></span></a></h3>
<div class="text" itemprop="articleBody"><% article.entire_body | text_summary(240) %></div>
<div class="posted">posted by <span itemscope="itemscope" itemprop="author editor creator copyrightHolder" itemtype="http://schema.org/Person"><span itemprop="name"><% article.nickname %></span></span> at <% article.createstamp | date_format("%H:%M") -%></div>
</div><!-- /.blogbody -->
</div><!-- /.blog -->
<% /loop %>
<% /if -%>

HTML5 の場合
※ HTML5 では 公開日の h2 見出しを落とし time とすることで、記事タイトル(title)の見出しを h2 に格上げしています。

<% if:page_name eq 'search' -%>
<% loop:list_article %>
<article class="blog" itemscope itemtype="http://schema.org/Article">
<header>
<time class="date updated"><span itemprop="datePublished" datetime="<% article.createstamp | date_format("%Y-%m-%dT%H:%M:%S+09:00") %>">
<% article.createstamp | date_format("%Y年%m月%d日") %></span>
</time>
</header>
<div class="blogbody">
<h2 class="title entry-title"><a href="<% article.page_url %>" itemprop="url" class="title"><span itemprop="name"><% article.subject %></span></a>
</h2>
<div class="text" itemprop="articleBody">
<% article.entire_body | text_summary(240) %></div>
<footer class="posted">posted by <span itemscope itemprop="author editor creator copyrightHolder" itemtype="http://schema.org/Person"><span itemprop="name"><% article.nickname %></span></span> at <% article.createstamp | date_format("%H:%M") -%>
</footer><!-- /.posted -->
</div><!-- /.blogbody -->
</article><!-- /.blog -->
<% /loop %>
<% /if -%><!-- /page_name eq 'search'-->

〜解説〜

検索結果ページでマークアップした要素は、記事外枠(blog)、投稿日(date)、ブログタイトル(title)、記事本文(text)、著者(posted内)です。

一番外枠となる記事(blog)の属性は一時期 BlogPosting 属性でマークアップしていましたが、ウェブマスターツールのデータハイライターは記事を Article 属性で扱っていますし、OGP でもトップページは Website, 記事ページは Article なので最近は Article 属性を採用しています。BlogPosting 属性は Article 属性の下位にあたりますから、ここでは blog クラスが Article 属性で blogbody が BlogPosting 属性というマークアップもあるかもしれません。

無料ブログのデフォルト HTML では公開日に見出しレベル h2、記事タイトルに h3 というパターンですが、カスタマイズテンプレート(XHTML)では日付は div か span で見出しレベルを落とすのが主流ですね。これが HTML5 だと timeになります。

公開日の datePublished はブログ表示では西暦 年月日のまま変更せず、マークアップのコンテンツは "YYYY-MM-DDThh:mm:ss+09:00"にしています。JST(日本時間)ではないときは 09:00 の時間を修正してください。ちなみに日付を伝えるコンテンツ表記は content="" ではなく datetime="" になります。

記事タイトルはタイトルに name 属性、URL に url 属性をマークアップします。name 属性の代わりに headline もありかもしれません。但し、title 属性は Article に包含されないので使えません。

Seesaa ブログで、ブログ記事本文、タグやカテゴリ、投稿者(posted)までを含むのが text ブロックです。これがブログ記事の中心部になりますから articleBody でマークアップしました。

posted の著者名(nickname)は人名ですから、Person 属性になります。少し欲張ってauthor, editor, creatore, copyrightHolder と4つの属性でマークアップしていますが、最低限 author があれば良いと思います。

また posted ブロックは記事(article)に対するフッターに位置づけられていますから HTML5 では footer にしています。ブログ全体に header, content, (Sidebar), footer があるのと同じように、記事本文も header, text(記事), footer の構造があるという考えです。header や footer がブログ全体と記事の両方に登場して最初は気持ち悪いかもしれませんが、マークアップ上は問題ないようです。

デフォルト HTML をこのような考え方で見直すと、上記 HTML5 の構造の header には少し違和感があります。記事タイトル(title)は header に収めたほうが良いかもしれません。

HTML5 の場合(header カスタマイズ)

<header>
<time class="date updated">
〜(中略)〜
</time>
<h2 class="title entry-title">
〜(中略)〜
</h2>
</header>

<div class="blogbody">
<div class="text" itemprop="articleBody">
〜(以下略)〜

1-3-4. タグページ

上の検索結果ページは後述する記事コンテンツ(コンテンツ>記事)と構造がほぼ同じです。一方このタグページは記事を表示するというよりは記事タイトル一覧として設計されているので、タグページ専用のタグセレクタが使われています。

検索結果ページのタグセレクタに対応するセレクタを探しながら Article, articleBody などの属性をマークアップしていきます。

デフォルトHTML

<% if:page_name eq 'tag' -%>
<div class="tag">
<% if:tag %><div class="tag-title">タグ&nbsp;/&nbsp;<% tag.word | html %></div><% /if -%>
<br />

<% if:blog.has_usertag_ad -%>
<div class="tag-body">
<% blog.usertag_ad_html(tag, css, 2) %>
</div>
<% /if %>

<% loop:list_service -%>
<div class="tag-body">
<div class="tag-service"><% tag_service.title %></div>
<div class="tag-search">
<a href="<% tag_service.page_url(tag) %>" target="_blank">'<% tag.word %>'&nbsp;でSeesaa全体を検索する</a>
</div>
<% if:tag_service.service_key eq 'articles' -%>
<% loop:list_data -%>
<div class="tag-article">
<div class="tag-article-title">
<a href="<% article.page_url %>"><% article.subject %></a>&nbsp;<span class="tag-article-posted">[<% article.createstamp | date_format("%Y/%m/%d %H:%M") %>]</span>
</div>
<!--
<div class="tag-article-summary"><% article.entire_body | text_summary(240) | tag_strip %></div>
-->
<% /loop -%>
<% /if -%>

〜(photos, audios, videos, files, 中略)〜

<% if:pager -%>
<div class="tag-navi">

〜(ページナビ 略)〜

</div>
<% else -%>
<div class="tag-more"><a href="<% blog.tag_url(tag, tag_service.service_key) %>">≫もっと見る</a></div>
<% /if -%>
</div>
<% /loop -%>
<script type="text/javascript" language="javascript" src="<% site_info.blog_url %>/js/tag_cloud.js"></script>

〜(タグクラウド 略)〜

</div>
<% /if -%>

XHTMLの場合

<% if:page_name eq 'tag' -%>
<div class="tag" itemscope="itemscope" itemtype="http://schema.org/Article">
<% if:tag %><div class="tag-title"><span itemprop="name">タグ&nbsp;/&nbsp;<% tag.word | html %></span>
</div>
<% /if -%>
<br />

<% if:blog.has_usertag_ad -%>
<div class="tag-body">
<% blog.usertag_ad_html(tag, css, 2) %>
</div>
<% /if %>


<% loop:list_service -%>
<div class="tag-body">
<div class="tag-service"><% tag_service.title %></div>
<div class="tag-search"><a href="<% tag_service.page_url(tag) %>" target="_blank">'<% tag.word %>'&nbsp;でSeesaa全体を検索する</a></div>
<% if:tag_service.service_key eq 'articles' -%>
<% loop:list_data -%>
<div class="tag-article">
<h2 class="tag-article-title" itemprop="name"><a href="<% article.page_url %> itemprop="url""><% article.subject %></a>&nbsp;<span class="tag-article-posted">[<span itemprop="datePublished" datetime="<% article.createstamp | date_format("%Y-%m-%dT%H:%M:%S+09:00") %>"><% article.createstamp | date_format("%Y/%m/%d %H:%M") %>]</span></h2><<!-- /.tag-article-title -->
<!-- <!-- ※このコメントアウト Start を削除 -->
<div class="tag-article-summary" itemprop="articleBody"><% article.entire_body | text_summary(240) | tag_strip %></div>
--> <!-- ※このコメントアウト End を削除 -->
<% /loop -%><-- /list_data 'articles' -->
<% /if -%><-- /tag_service.service_key eq 'articles' -->

〜(photos, audios, videos, files, 中略)〜

<% if:pager -%>
<div class="tag-navi">

〜(ページナビ 略)〜

</div><!-- /.tag-navi -->
<% else -%>
<div class="tag-more"><a href="<% blog.tag_url(tag, tag_service.service_key) %>">≫もっと見る</a></div>
<% /if -%><!-- /if:pager -->
</div>
<% /loop -%>
<script type="text/javascript" language="javascript" src="<% site_info.blog_url %>/js/tag_cloud.js"></script>

〜(タグクラウド 略)〜

</div><!-- /.tag -->
<% /if -%><!-- /page_name eq 'tag' -->

HTML5 の場合

<% if:page_name eq 'tag' -%>
<article class="tag" itemscope itemtype="http://schema.org/Article">
<% if:tag %><div class="tag-title"><span itemprop="name">タグ&nbsp;/&nbsp;<% tag.word | html %></span>
</div>
<% /if -%>
<br />

<% if:blog.has_usertag_ad -%>
<div class="tag-body">
<% blog.usertag_ad_html(tag, css, 2) %>
</div>
<% /if %>


<% loop:list_service -%>
<div class="tag-body">
<div class="tag-service"><% tag_service.title %></div>
<div class="tag-search"><a href="<% tag_service.page_url(tag) %>" target="_blank">'<% tag.word %>'&nbsp;でSeesaa全体を検索する</a></div>
<% if:tag_service.service_key eq 'articles' -%>
<% loop:list_data -%>
<div class="tag-article">
<header>
<h2 class="tag-article-title" itemprop="name"><a href="<% article.page_url %> itemprop="url""><% article.subject %></a>&nbsp;<span class="tag-article-posted">[<span itemprop="datePublished" datetime="<% article.createstamp | date_format("%Y-%m-%dT%H:%M:%S+09:00") %>"><% article.createstamp | date_format("%Y/%m/%d %H:%M") %>]</span></h2><<!-- /.tag-article-title -->
</header>
<!-- <!-- ※このコメントアウト Start を削除 -->
<div class="tag-article-summary" itemprop="articleBody"><% article.entire_body | text_summary(240) | tag_strip %></div>
--> <!-- ※このコメントアウト End を削除 -->
<% /loop -%><-- /list_data 'articles' -->
<% /if -%><-- /tag_service.service_key eq 'articles' -->

〜(photos, audios, videos, files, 中略)〜

<% if:pager -%>
<div class="tag-navi">

〜(ページナビ 略)〜

</div><!-- /.tag-navi -->
<% else -%>
<div class="tag-more"><a href="<% blog.tag_url(tag, tag_service.service_key) %>">≫もっと見る</a></div>
<% /if -%><!-- /if:pager -->
</div>
<% /loop -%>
<script type="text/javascript" language="javascript" src="<% site_info.blog_url %>/js/tag_cloud.js"></script>

〜(タグクラウド 略)〜

</article><!-- /.tag -->
<% /if -%><!-- /page_name eq 'tag' -->

〜解説〜

先にマークアップした検索結果ページ(記事コンテンツと似た構造を持つ)とタグページのセレクタは以下のように対応しています。

検索ページタグページマークアップ
bodytagArticle
titletag-article-titlename
texttag-article-summaryarticleBody

tag-article-title は div ですが、他ページと同レベルの h2(もしくは h3)を割り当てました。

タグページではタイトルに公開日が含まれていますがどうなんでしょう? デフォルトの設計では記事タイトルは単なるリストとして捉えているので「記事タイトル+公開日」でも違和感はないかもしれません。

ここでトップページや記事ページなどと同じようにタイトルに見出しレベルを割上げるのであれば、先の検索結果ページと同じように記事タイトルと公開日は分離したほうが良いと思います。

消し線の <% if:blog.has_usertag_ad -%> から <% /if %> までの4行は広告です。「※このコメントアウト...を削除」で囲まれる tag-article-summary はブログ記事の冒頭部です。コメント行を削除して articleBody をマークアップしています。

1-4. フッターブロック

HTML のフッターには content_footer 変数によりコンテンツ>フッターのコンテンツが挿入されますが、これ以外にも著作権情報などを追記することがあります。

ここではデフォルト HTML の footer と、よくフッターに追記される項目に関するマークアップのサンプルを挙げます。

1-4-1. HTML フッターブロック

デフォルトHTML

<div id="footer">
<% content_footer -%>
</div>

XHTMLの場合

<div id="footer" itemscope="itemscope" itemtype="http://schema.org/WPFooter";>
<% content_footer -%>
</div>

HTML5 の場合

<footer id="footer" itemscope itemtype="http://schema.org/WPFooter">
<% content_footer -%>
</footer>

1-4-2. HTML フッターによく追加される著作権情報

HTML のフッターブロックには著作権情報を表示するようにカスタマイズすることがあります。著作権情報には著作権年、ブログタイトルを表示することが多いので、このパターンをマークアップする場合のサンプルを挙げます。<% content_footer -%> 変数の下に追記します。

参考HTML

<div class="copyright">
&copy; <% article.createstamp | date_format("%Y") %> <a href="<% blog.page_url %>"><% blog.title %></a>
</div>

XHTML / HTML5 共通

<div class="copyright">
&copy; <span itemprop="copyrightYear"><% article.createstamp | date_format("%Y") %></span> <a href="<% blog.page_url %>" itemprop="url"><span itemprop="name"><% blog.title %></span></a>
</div>

1-4-3. HTML フッターに追加される Google+プロファイル

Google+(グーグルプラス)のプロファイルを持っている場合、Seesaa ブログと Google+を関連付ける方法には、2種類あります。ひとつめは「設定>外部連携」で Google+ のプロファイルページを指定する方法。もうひとつは手入力です。

ボクはコンテンツ記事にある article.nickname(「設定>ブログ設定」で指定したニックネームが表示される)を Google+へのリンクに書き換えることで関連付けをしています。これも手入力のひとつです。

フッターに手入力しておく方法もあるので、参考までにその記述方法とマークアップを紹介します。

XHTML / HTML5 共通

<a href="https://plus.google.com/GOOGLE PLUS の PROFILE ページ ID" itemprop="url" rel="author publisher">
<span itemprop="author editor creator copyrightHolder" itemscope="itemscope" itemtype="http://schema.org/Person" class="vcard author">
<span itemprop="name" class="fn">GOOGLE PLUS のプロファイル名(氏名)</span>
</span>
</a>

〜解説〜

著作者情報を schema.org マークアップと vcard も一緒に記述して Google + と関連付けています。これをフッターに追記しておけば漏れはない。フッターに Google + のプロファイル名が表示されますが非表示要素にマークアップするとスパムと認識されることがあるようなので、display:none などで非表示にすることはやめた方が良いと思います。

SeesaaブログのSchema.org構造化データマークアップ HTML編のまとめ

冒頭で触れたように Seesaaブログなどのように HTML がシンプルなブログはスキーマのマークアップし易いと思います。直ぐに体感できるほどのアクセスアップがあるということではないでしょうが、コンテンツの詳細情報を検索エンジンにしっかり伝えておけば長い目で見て損は無いはずです。

HTML 編は以上です。
第2章 Seesaa ブログ Schema.org 構造化データマークアップサンプル集〜コンテンツ編に続きます。

Sponsored Link

テンプレートカスタマイズカテゴリの記事

この記事へのコメント

0件
コメントをどうぞ
お名前:[必須入力]

メールアドレス:

ホームページアドレス:

コメント:[必須入力]

Sponsored Link