schema.org

SeesaaブログをSchema.org構造化データでマークアップするためのサンプル集 第2章 コンテンツ編です。

Seesaaのコンテンツにはヘッダー、記事本体、サイドバー、フッターの4つパートがありますが、マークアップは記事コンテンツがメインです。

その他でマークアップするパートはヘッダーのブログタイトル、サイドバーの最近の記事、タグクラウドあたりでしょうか。

Sponsored Link

第2章 Seesaaブログの構造化データマークアップ コンテンツ編

デザイン>コンテンツは4つのパートから構成されています。マークアップの概略は次の通り。

  • 記事コンテンツHTML:多数
  • ヘッダー部
    • ブログタイトル:name属性・URL属性
    • ブログ説明:description属性
    • サイドバー部
      • 最近の記事:headline属性・URL属性
      • カテゴリ一覧:keywords属性・URL属性
      • タグクラウド:keywords属性・URL属性
    • フッター:特になし

記事コンテンツHTMLは HTML 本体のタグページ、検索結果ページとほぼ同じ構造を持たせます。逆に言えば記事コンテンツHTMLのマークアップを HTML 本体に適用しています。

最近の記事は直近の記事一覧ですからナビゲーション的な性格を持っていると判断しています。そこで headline 属性でマークアップ。ただ、トップページの記事数と最近の記事の表示件数が同じ(共に10件など)であれば、重複しているので headline としての効果は薄いかもしれません。トップページ以外では表示される記事一覧と最新記事は異なるのでナビゲーションとしての意味はあると思います。

カテゴリとタグクラウドはそれなりにブログの性格を表わす単語が使われているはずです。そこで METAキーワードとは別にマークアップしておくことでより明確にブログの属性を伝えようという意図で Keywords属性でマークアップしました。

それではコンテンツのマークアップを出現順にサンプルを挙げていきます。

2-1. ヘッダーコンテンツ

HTML本体に <% content_header %> 変数で挿入される「ブログタイトル」と「ブログ説明」がヘッダー部になります。

先にマークアップしたヘッダーの WPHeader に包含される項目として、ブログタイトル(blog.title)に name 属性、ブログ URL(blog.page_url)に url 属性をそれぞれマークアップします。

2-1-1. ブログタイトル

デフォルトHTML

<h1><a href="<% blog.page_url %>" accesskey="1"><% blog.title %></a></h1>

XHTML / HTML5 共通

<h1><a href="<% blog.page_url %>" itemprop="url" accesskey="1"><span itemprop="name"><% blog.title %></span></a></h1>

〜解説〜

ブログタイトルは name 属性でマークアップしました。schema.org の他の属性に title があります。ブログタイトルだから title のほうが適しているようですが WPHeader 内で title は使えません。マークアップ Testing Tool - Google Developers

title 属性は WPHeader に含まれていないためです。使用できる属性は階層化された包含関係に忠実でなくてはいけません。» Schema.org 型の階層構造(日本語版)

WPHeader の階層でブログタイトルとしてマークアップできそうな属性は name もしくは headline あたりでしょうか。

上の例では blog.title を span で挟み込み itemprop="name" をマークアップしていますが、<h1 itemprop="name">という書き方もありです。<h1 id="blog-title" itemprop="name">のようにセレクタと併記も問題ありません。

2-1-2. ブログ説明

デフォルトHTML

<span class="description"><% content.blog_desc.text | nl2br | __or__ | blog.description | nl2br %></span>

XHTML / HTML5 共通

<span class="description" itemprop="description"><% content.blog_desc.text | nl2br | __or__ | blog.description | nl2br %></span>

使用したマークアップ属性の Schema.org 階層
〜解説〜

このブログがそうですが、ブログ説明を表示しないケースがあります。表示しない項目をマークアップするときは META タグを使います。

<meta itemprop="description" content="<% content.blog_desc.text | nl2br | __or__ | blog.description | nl2br %>">

表示しないというのは display:none などで非表示にしている要素のことではありません。非表示要素をマークアップするのはどうやらルール違反のようです。

表示しないで METAタグでマークアップするその他のケースで使うのは以下のような項目です。

  • サイドバー「最近の記事」の公開日付を別途追加
  • 記事中に記事の更新日を追記
  • 記事中に TOP10 のリストを掲載する
  • 記事コンテンツのパンくずリストでリスト項目の階層を記述する
  • 上の description は head の META で記述してあるので重複しますからあまり良い例ではありませんでした。ブログに表示する必要はないが Google には認識しておいてもらいたい項目は、display:none を使う代わりに METAタグでマークアップするという考え方だと思います。

2-2. 記事コンテンツ HTML

記事コンテンツHTMLは大きく分けて次のパートで構成されています。カッコ内はセレクタを表わします。

  • ページナビ 上(.navi)
  • 記事本文(.blog)
  • ページナビ 下(.navi)
  • 記事へのコメント(#comments)
  • 記事へのトラックバック(#trackback)

この出現順に解説します。

2-2-1. ページナビ

ページナビには特にマークアップする要素が無いと思います。ナビゲーションをマークアップする SiteNavigationElement がありますが、これに含まれる適当な下位属性には url と name くらいしか見あたりません。

Seesaa ブログのナビゲーションはほとんどがページャー(ページ番号の表示)がメインでページ番号をマークアップしても意味はないと思われます。記事ページナビに表示される前後ページへの記事名とリンクくらいでしょうか。

敢えて SiteNavigationElement としてマークアップするなら記事ページの navi だけで十分だと考えます。あくまでも参考までに該当部分のサンプルを挙げてみます。

デフォルトHTML

<% if:page_name eq 'article' -%>
<div class="navi">
<% if:previous_article -%><a href="<% previous_article.page_url %>">&lt;&lt;</a> <a href="<% previous_article.page_url %>"><% previous_article.subject | tag_break %></a> | <% /if -%>
<a href="<% blog.page_url %>">TOP</a>
<% if:next_article -%> | <a href="<% next_article.page_url %>"><% next_article.subject | tag_break %></a> <a href="<% next_article.page_url %>">&gt;&gt;</a><% /if -%>
</div>
<% /if -%>

XHTMLの場合

<% if:page_name eq 'article' -%>
<div class="navi" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<% if:previous_article -%><a href="<% previous_article.page_url %>">&lt;&lt;</a> <a href="<% previous_article.page_url %>" itemprop="url"><span itemprop="name"><% previous_article.subject | tag_break %></span></a> | <% /if -%>
<a href="<% blog.page_url %>">TOP</a>
<% if:next_article -%> | <a href="<% next_article.page_url %>" itemprop="url"><span itemprop="name"><% next_article.subject | tag_break %></span></a> <a href="<% next_article.page_url %>">&gt;&gt;</a><% /if -%>
</div>
<% /if -%>

HTML5 の場合

<% if:page_name eq 'article' -%>
<nav class="navi" itemscope itemtype="http://schema.org/SiteNavigationElement">
<% if:previous_article -%><a href="<% previous_article.page_url %>">&lt;&lt;</a> <a href="<% previous_article.page_url %>" itemprop="url"><span itemprop="name"><% previous_article.subject | tag_break %></span></a> | <% /if -%>
<a href="<% blog.page_url %>">TOP</a>
<% if:next_article -%> | <a href="<% next_article.page_url %>" itemprop="url"><span itemprop="name"><% next_article.subject | tag_break %></span></a> <a href="<% next_article.page_url %>">&gt;&gt;</a><% /if -%>
</nav>
<% /if -%>

〜解説〜

HTML5 の場合は、navi は nav に置き換えます。これに合わせるように記事ページ以外の navi も忘れずに書き換えておきましょう。

2-2-2. 記事本文

記事コンテンツHTML の中でも記事の骨格となる記事本文は最重要パートです。この記事本文へのマークアップで構造化データが決まるといっても言い過ぎではないと思います。

既にマークアップしたHTML本体のタグページ、検索結果ページと同じ構造にするのが基本で整合性がとれるようにマークアップします。(第1章 1-3. Content ブロック参照)

デフォルトHTML

<% loop:list_article -%>
<div class="blog">

<!--
<rdf:RDF
(中略)
</rdf:RDF>
-->

<% if:with_date %><h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2><% /if %>
<div class="blogbody">
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>
<% if:page_name eq 'article' -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.entire_body | bodyfilter(article_info,blog) %><% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>
<% else -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.first_body | bodyfilter(article_info,blog) %><% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>
<% /if -%>

XHTMLの場合

<% loop:list_article -%>
<div class="blog" itemscope="itemscope" itemtype="http://schema.org/Article">

<!--
<rdf:RDF
(中略)
</rdf:RDF>
-->

<% if:with_date %><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><% /if %>
<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>
<% if:page_name eq 'article' -%>
<div class="text" itemprop="articleBody"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.entire_body | bodyfilter(article_info,blog) %><% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %> itemprop="url"><span itemprop="keywords"><% tag.word %></span></a> <% /loop %></div><% /if %>
<% else -%>
<div class="text" itemprop="articleBody"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.first_body | bodyfilter(article_info,blog) %><% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %>" itemprop="url"><span itemprop="keywords"><% tag.word %></span></a> <% /loop %></div><% /if %>
<% /if -%>

HTML5 の場合


<% loop:list_article -%>
<article class="blog" itemscope itemtype="http://schema.org/Article">

<!--
<rdf:RDF
(中略)
</rdf:RDF>
-->

<header>
<% if:with_date %><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><% /if %>
</header>
<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>
<% if:page_name eq 'article' -%>
<div class="text" itemprop="articleBody"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.entire_body | bodyfilter(article_info,blog) %><% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %> itemprop="url"><span itemprop="keywords"><% tag.word %></span></a> <% /loop %></div><% /if %>
<% else -%>
<div class="text" itemprop="articleBody"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.first_body | bodyfilter(article_info,blog) %><% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %>" itemprop="url"><span itemprop="keywords"><% tag.word %></span></a> <% /loop %></div><% /if %>
<% /if -%><!-- /if:page_name eq 'article' -->

(中略)

</article><!-- /.blog -->
<% /loop -%>
<% if:page_name eq 'category' -%>
<% if:pager.need_pager -%>
<div class="navi">

〜解説〜

データ構造はタグページや検索結果ページと揃えています。HTML5 について、テンプレート初期状態の h2 日付, h3 記事タイトルのタグは多くの場合カスタマイズされていることが多い。いま設定されている class や ID のセレクタまで変更することは無いので、レイアウトが変わらないようにスタイルシートと比較しながらマークアップだけ追加すればよいと思います。

そのあたりの考え方については既出の第1章 1-3. Content ブロックを参考にして下さい。

コード中で消し選にしている diet log はボクは使いませんから削除していますが、必要に応じて活かしてください。


続いて記事ページで表示するカテゴリ最新記事をマークアップします。

デフォルトHTML

<% if:list_category_article -%>
<div class="listCategoryArticle">
【<% article_category.name %>の最新記事】<br />
<ul>
<% loop:list_category_article %>
<li><a href="<% article.page_url %>"><% article.subject | text_summary(40) %></a></li>
<% /loop %>
</ul>
</div>
<% /if %>

XHTML / HTML5 共通

<% if:list_category_article -%>
<div class="listCategoryArticle">
【<% article_category.name %>の最新記事】<br />
<ul>
<% loop:list_category_article %>
<li><a href="<% article.page_url %>" itemprop="url"><span itemprop="name"><% article.subject | text_summary(40) %></span></a></li>
<% /loop %>
</ul>
</div>
<% /if %>

〜解説〜

記事中のカテゴリ最新記事は関連記事の役目です。関連記事を紹介するナビゲーションと解釈して、SiteNavigationElement とする考え方もできるかもしれません。

XHTML の場合
<div class="listCategoryArticle" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
</div>

HTML5 の場合
<nav class="listCategoryArticle" itemscope itemtype="http://schema.org/SiteNavigationElement">
</nav>

SiteNavigationElementでマークアップされたリンクは、検索結果のスニペットに表示されることがあります。従い、多数マークアップするよりも絞り込んでおいた方が良いかもしれません。このブログではページ先頭に表示しているメインメニュー(bootstrap)を SiteNavigationElement にして、カテゴリ一覧の中からいくつか抜粋して name, url 属性を与えています。

メインメニューが無いブログで記事ごとの関連記事を SiteNavigationElement にするというやり方もあるのかと。


投稿者情報の posted は第1章 1-3. Content ブロックの 1-3-3. 検索結果ページの posted と同じです。

2-2-3. 記事へのコメント

schema.org では閲覧者からのコメント欄に関し UserComments という属性を割り当てることができます。下位階層に属するコメント文 commentText、コメント投稿者 creator、コメント投稿日時 commentTime の各属性を割り当てていきます。

デフォルトHTML

<% if:page_name eq 'article' -%>
<% if:individual_article.accept_comment_show -%>
<div id="comments">

<a name="comment"></a>

<div class="comments-head">この記事へのコメント</div>

<% loop:list_individual_article_children -%>
<div class="comments-body">
<div class="text"><% comment.body | html | tag_strip | nl2br | clickable('target="_blank" rel="nofollow"') %></div>
<div class="comments-post">Posted by <% if:comment.homepage %><a href="<% comment.homepage | html | tag_strip %>" target="_blank" rel="nofollow"><% comment.writer | html | tag_strip %></a><% else %><% comment.writer | html | tag_strip %><% /if %> at <% comment.createstamp | date_format('%Y年%m月%d日 %H:%M') %><br /></div>
</div>
<% /loop -%>
<% if:individual_article.accept_comment_catch -%>
<div class="comments-head">コメントを書く</div>
<form 〜
(中略)
</form>
<% /if -%>
</div>
<% /if -%>

XHTMLの場合

<% if:page_name eq 'article' -%>
<% if:individual_article.accept_comment_show -%>
<div id="comments itemscope="itemscope" itemprop="comment" itemtype="http://schema.org/UserComments">

<a name="comment"></a>

<div class="comments-head">この記事へのコメント</div>

<% loop:list_individual_article_children -%>
<div class="comments-body">
<div class="text" itemprop="commentText"><% comment.body | html | tag_strip | nl2br | clickable('target="_blank" rel="nofollow"') %></div>
<div class="comments-post">Posted by <% if:comment.homepage %><a href="<% comment.homepage | html | tag_strip %>" itemprop="url" target="_blank" rel="nofollow"><% comment.writer | html | tag_strip %></a><% else %><span itemprop="creator" itemscope="itemscope" itemtype="http://schema.org/Person"><span itemprop="name"><% comment.writer | html | tag_strip %></span></span><% /if %> at <span itemprop="commentTime" datetime="<% comment.createstamp | date_format('%Y-%m-%dT%H:%M:%S+09:00') %>"><% comment.createstamp | date_format('%Y年%m月%d日 %H:%M') %></span><br /></div>
</div>
<% /loop -%>
<% if:individual_article.accept_comment_catch -%>
<div class="comments-head">コメントを書く</div>
<form 〜
(中略)
</form>
<% /if -%>
</div>
<% /if -%>

HTML5 の場合

<% if:page_name eq 'article' -%>
<% if:individual_article.accept_comment_show -%>
<article id="comments itemscope itemprop="comment" itemtype="http://schema.org/UserComments">

<a name="comment"></a>

<div class="comments-head">この記事へのコメント</div>

<% loop:list_individual_article_children -%>
<div class="comments-body">
<div class="text" itemprop="commentText"><% comment.body | html | tag_strip | nl2br | clickable('target="_blank" rel="nofollow"') %>
</div><!-- /.text -->
<footer class="comments-post">Posted by <% if:comment.homepage %><a href="<% comment.homepage | html | tag_strip %>" itemprop="url" target="_blank" rel="nofollow"><% comment.writer | html | tag_strip %></a><% else %><span itemprop="creator" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><% comment.writer | html | tag_strip %></span></span><% /if %> at <time itemprop="commentTime" datetime="<% comment.createstamp | date_format('%Y-%m-%dT%H:%M:%S+09:00') %>"><% comment.createstamp | date_format('%Y年%m月%d日 %H:%M') %></time>
<br />
</footer><!-- /.comments-post -->
</div><!-- /.comments-body -->
<% /loop -%>
<% if:individual_article.accept_comment_catch -%>
<div class="comments-head">コメントを書く</div>
<form 〜
(中略)
</form>
<% /if -%><!-- /if:individual_article.accept_comment_catch -->
</article><!-- /#comments -->
<% /if -%><!-- /if:individual_article.accept_comment_show -->

〜解説〜

ユーザコメントは投稿記事と同じくひとつの記事であるというコンセプトです。投稿記事とユーザコメントを並列と考えれば、投稿記事の最上階層とした Article 属性に相当するのがユーザコメントでは UserComments 属性としました。従い、HTML5 ではユーザコメントの大外枠となる UserComments は article となります。

それ以外に関するマークアップは既出です。

記事へのトラックバックへのマークアップは特にないので、記事コンテンツHTMLへのマークアップは以上で完了です。

記事HTMLのパンくずリスト

記事コンテンツのHTMLにパンくずリストを追加するとスニペットにURLではなくパンくずリストが表示されるようになります。パンくずリストのマークアップに関してはこちらの過去記事を参照ください。» Seesaaブログにdata-vocabulary.orgのパンくずリストを設置する

2-3. サイドバーコンテンツ

サイドバーコンテンツは HTML5 で aside とすることもあります。あくまでもメインコンテンツに対する脇役なので強烈にマークアップする必要はないと考えます。

既に述べた通り、サイドバーコンテンツのマークアップで特異なのは恐らく keywords くらいでしょう。

サイドバーに対する最上位の属性に WPSidebar が付与されていることが前提になります。WPSidebar がないと以下のマークアップはノードが空になりますので注意してください。詳しくは第1章 HTML編 1-2. サイドバーブロックを参照ください。

2-3-1. 最近の記事

最近の記事は記事一覧なので headline 属性でマークアップしました。加えて Meta タグでブログ上は表示されない投稿日付を追加します。

デフォルトHTML

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_article -%>
(<% article.createstamp | date_format("%m/%d") %>)<a href="<% article.page_url %>"><% article.subject | tag_break %></a><br />
<% /loop -%>
<% content.footer -%>
</div>

XHTMLの場合

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_article -%>
(<% article.createstamp | date_format("%m/%d") %>)<a href="<% article.page_url %>" itemprop="url"><span itemprop="headline"><% article.subject | tag_break %></span></a><br />
<meta itemprop="datePublished" datetime="<% article.createstamp | date_format("%Y-%m-%dT%H:%M:%S+09:00") -%>">
<% /loop -%>
<% content.footer -%>
</div>

HTML5 の場合

<h4 class="sidetitle"><% content.title %></h4>
<div class="side">
<% content.header -%>
<% loop:list_article -%>
(<% article.createstamp | date_format("%m/%d") %>)<a href="<% article.page_url %>" itemprop="url"><span itemprop="headline"><% article.subject | tag_break %></span></a><br />
<meta itemprop="datePublished" datetime="<% article.createstamp | date_format("%Y-%m-%dT%H:%M:%S+09:00") -%>">
<% /loop -%>
<% content.footer -%>
</div>

〜解説〜

URL属性はこれまでも頻繁に登場している リンクに対するマークアップです。これに対するタイトルに相当する文字列には name属性を使うことが多いようですが、ここでは敢えて一覧であることを示すために headline属性にしています。

最近の記事コンテンツの初期値では投稿月日がカッコ書きで追加されていますが、カスタマイズで削除することが多いですよね。仮に残していたとしてもこの月日は構造化データで日付として認識されていません。そこで Metaタグにて正確に投稿年月日時分秒をマークアップしているのが上記のサンプルです。

HTML5 で sidetitle に h4 タグをあてています。理由はサイドバーを aside としているため、サイドバーに何らかの見出しレベルがないと Untitled aside としてエラーになるからです。aside を採用しているときは、sidetitle 全てに同じレベルの見出しを付けるようにした方が良いでしょう。

2-3-2. カテゴリ

カテゴリは keywords 属性でマークアップします。

デフォルトHTML

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_category -%>
<a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)<br />
<% /loop -%>
<% content.footer -%>
</div>

XHTML / HTML5 共通(但し sidetitle は最近の記事と同じ)

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_category -%>
<a href="<% category.page_url %>" itemprop="url"><span itemprop="keywords"><% category.name | tag_break %></span></a>(<% category.article_count | __or__ | echo("0") %>)<br />
<% /loop -%>
<% content.footer -%>
</div>

使用したマークアップ属性の Schema.org 階層
〜解説〜

カテゴリURLに URL属性、カテゴリ名に keywords をマークアップしています。HTML5 では最近の記事と同様 sidetitle い h4 などの見出しタグを付けて、Untitled aside エラーを回避します。

2-3-3. タグクラウド

タグクラウドもカテゴリ同様、keywords属性にしますが、これにはちょっと注意が必要です。

例えば表示件数を全件表示に設定しタグクラウドに100件も200件もタグがある場合。それがタグクラウドを表示する全てのページでキーワード扱いです。マークアップしても逆効果かと。

・ タグクラウドの表示件数を少数にする
・ unless 変数を使って不要なタグを非表示にする
・ タグクラウドは keywords属性でマークアップしない

などの事前の検討と調整が必要になると思います。

デフォルトHTML

(JavaScript 略)
<div class="sidetitle"><% content.title %></div>
<div class="side-tag">
<% content.header -%>
<div id="tag_cloud_<% content.id %>" style="word-break:break-all;">
<% loop:list_tags -%><a href="<% blog.tag_url(tag) %>" class="_tag" title="<% tag.word | html %>/<% count %>"><% tag.word | html %></a> <% /loop -%>
</div>
(JavaScript 略)

XHTML / HTML5 共通(但し sidetitle は最近の記事と同じ)

(JavaScript 略)
<div class="sidetitle"><% content.title %></div>
<div class="side-tag">
<% content.header -%>
<div id="tag_cloud_<% content.id %>" style="word-break:break-all;">
<% loop:list_tags -%><a href="<% blog.tag_url(tag) %>" itemprop="url"class="_tag" title="<% tag.word | html %>/<% count %>"><span itemprop="keywords"><% tag.word | html %></span></a> <% /loop -%>
</div>
(JavaScript 略)

使用したマークアップ属性の Schema.org 階層
〜解説〜

タグクラウドの JavaScript は略しましたが実際のコンテンツにはちゃんと残しておいてください。マークアップとは直接関係ありませんが、初期値のタグクラウドではタップターゲットの警告がでるのでフォントサイズとタグ同士の間隔を広げた方が良いです。» タグクラウドのフォントサイズを大きくしてモバイルフレンドリー

タグ名に keywords属性、タグURLに URL属性。慣れてくると HTML に URL を見つけたら何かマークアップできるポイントじゃないかということが何となく判断できるようになります。名称になるテキスト文字列に name属性、keywords属性、headline属性あたりのいずれかでマークアップすれば URL 周りについてはオッケー。

余談ですがSeesaaブログでタグを管理するのは結構面倒くさいですよね。やっと記事作成時に候補が出るようになりましたが全てではない。だから似たような新しいタグを振ってしまうことも。

このブログではフッターにタグクラウドを配置していますが件数は20件。アルファベット昇順に表示されるし、1件しかなくても表示される。なので unless 変数で表示したくないタグは弾くようにしています。

最後に

第1章の HTML 編と第2章 コンテンツ編でほとんどの設計要素に対してマークアップができました。しかしボクは schema.org 構造化データマークアップを極めたわけでもなんでもなく、個人的な考えに基づいてマークアップを試している状況です。無責任なようですが、マークアップのひとつの考え方としてあくまでも参考程度に眺めておいてください。

Sponsored Link

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

この記事へのコメント

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

メールアドレス:

ホームページアドレス:

コメント:[必須入力]

Sponsored Link