1. HOME
  2. フロントエンド
  3. ブログで使えるschema.orgの構造化データマークアップまとめ

ブログで使えるschema.orgの構造化データマークアップまとめ

フロントエンド

目次

以前schema.orgの基本的な書き方の記事を書きましたが、今回はそれをしようしてブログを構造化データマークアップする場合の書き方です。プロパティはたくさんありますがその中でもブログで使える部分を抜粋して。

目次


パンくずリストのマークアップ


パンくずリストを構造化データマークアップすると「kigiroku.com > blog > 記事タイトル」のような風に検索結果に出るようになります。

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

<ul>
     <li><a href="#">サイト名</a></li>
     <li><a href="#">カテゴリー名</a></li>
     <li><a href="#">記事タイトル</a></li>
</ul>

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

<ul itemscope itemtype="http://schema.org/BreadcrumbList">
        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
            <a href="#" itemscope itemtype="http://schema.org/Thing" itemprop="item" >
                <span itemprop="name">サイト名</span>
            </a>
            <meta itemprop="position" content="1" />
        </li>
        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
            <a href="#" itemscope itemtype="http://schema.org/Thing" itemprop="item" >
                <span itemprop="name">カテゴリー名</span>
            </a>
            <meta itemprop="position" content="2" />
        </li>
        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
            <a href="#" itemscope itemtype="http://schema.org/Thing" itemprop="item" >
                <span itemprop="name">記事タイトル</span>
            </a>
            <meta itemprop="position" content="3" />
        </li>
</ul>

こうなります。 変わった箇所は5箇所です。

ulに itemscope itemtype="http://schema.org/BreadcrumbList" liに itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" aに itemscope itemtype="http://schema.org/Thing" itemprop="item" 名前の部分をspanで囲って itemprop="name" 一番最後に meta itemprop="position" content="1"

使用タイプ「BlogPosting」「ImageObject」「Organization」

他にもプロパティはたくさんありますが、ブログで必要なエラーの出ない最低限のものの一覧です。

タイプ:BlogPosting

プロパティ説明
articleSection記事が属するカテゴリー
datePublished記事を公開した日付
dateModified記事を編集した日付
headline記事の見出し
thumbnailUrl記事のサムネイル画像※
url記事のURL
articleBody記事の内容
wordCount記事の文字数

※thumbnailUrlはタイプ「ImageObject」の中に書く。ImageObjectは下記参照。

タイプ:ImageObject

プロパティ説明
thumbnailUrlサムネイル画像
width画像の幅(meta情報)
height画像の高さ(meta情報)
caption画像のキャプション
url画像URL(meta情報)
name組織名(ロゴ画像の場合に記載)

タイプ:Organization

タイプ「BlogPosting」では「publisher」プロパティが必須のためOrganizationを書く必要があります。 Organizationは組織の情報で、ロゴ画像などを置く場合には上記の「ImageObject」を使用します。

プロパティ説明
author著者名

ブログ記事一覧

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

<article>
    <div>
	<img src="画像URL" width="350" height="200" alt="" itemprop="thumbnailUrl"/>
    </div>
	<p>カテゴリー名</p> 
	<time datetime="2016-10-04">
		2016.10.04
	</time>
	<p>記事の内容</p>
	<p>著者名</p>
	<a href="#">続きを読む</a>
</article>

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

<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
    <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
        <img src="画像URL" width="350" height="200" alt="" itemprop="thumbnailUrl"/>
	<meta itemprop="url" content="画像URL">
	<meta itemprop="width" content="350">
	<meta itemprop="height" content="200">
    </div>
    <p itemprop="articleSection">カテゴリー名</p> 
    <time itemprop="datePublished" datetime="2016-10-04">
	2016.10.04
    </time>
    <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
        <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
              <meta itemprop="url" content="ロゴ画像URL">
              <meta itemprop="width" content="500">
              <meta itemprop="height" content="243">
        </div>
        <meta itemprop="name" content="会社名・団体名">
        <p itemprop="author">著者名</p>
    </div>
	<p itemprop="articleBody">記事の内容</p>
	<a href="#" itemprop="url">続きを読む</a>
</article>

エラーの確認は「構造化データテストツール」で。


SEO
schema_org

この記事を読んだ方におすすめ