schema.org に従った Webページの構造化

2018年12月9日

Schema.org ってなんだ？って思っていたら構造化されたドキュメントのスキーマを決めたものらしい。

Webページに使うと、検索エンジンが意味を理解しやすくなるため SEO 対策になるようです。

パンくずリストがあると SEO 対策になるって聞いていたのですが、どうやってパンくずリストを識別しているかずっと疑問に思っていました。答えはこれでした。

色々な目的に合わせて色々な type があるようです。

Datetime

BlogPosting より前に、まずは time タグに使えるものを確認した。

“http://schema.org/DateTime"

  • dateCreated  –> datePublished こっちかな
  • dateModified

とりあえず、私が使いそうなのはこの2つ。

BlogPosting

こんな感じになりそう

<article id="post-1" class="entry" itemscope itemtype="http://schema.org/BlogPosting">
  <header class="entry-header">
    <h1 class="entry-title" itemprop="headline"><?php the_title(); ?></h1> <!-- 記事のヘッダー -->
  </header>
  <div class="entry-content" itemprop="articleBody">
    <?php the_content(); ?> <!-- 本文 -->
  </div>
  <footer class="entry-meta">
    <div class="entry-meta-category">
      Category: <span itemprop="keywords">test</span>
    </div>
    <div class="entry-meta-datetime">
      作成日時：<time itemprop="datePublished" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y年m月d日 H:i'); ?></time>
    </div>
  </footer>
</article>

ダメだ。「Google 構造化データ テストツール」でエラーになる。
author, image, publisher が必須らしい。それと、dateModified, mainEntryOfPage が推奨となっています。
あとで考えよう。後日SEOのプラグインでも見てます。

BreadcrumbList

パンくずリストの定義。schema.org の表にきちんと書いていない w

Example を拾ってみる

  • ul: itemscope itemtype=“http://schema.org/BreadcrumbList"
    • li: itemprop=“itemListElement" itemscope  itemtype="http://schema.org/ListItem"
      • a: itemprop=“item"
        • span: itemprop=“name"
      • meta: itemprop=“position"  1 から始まる

いまいちよくわからないので WordPress に Breadcrumb NavXT プラグインを入れて、その出力を見てみることにします。

<div class="breadcrumbs" vocab="http://schema.org/" typeof="BreadcrumbList">
  <!-- Breadcrumb NavXT 6.2.1 -->
  <span typeof="ListItem" property="itemListElement">
    <a title="Go to Artemis." class="home" href="http://artemis.xii.jp/wp" typeof="WebPage" property="item">
      <span property="name">Artemis</span>
    </a>
    <meta content="1" property="position">
  </span>
  &gt; 
  <span typeof="ListItem" property="itemListElement">
    <a property="item" title="Go to the 未分類 category archives." class="taxonomy category" href="http://artemis.xii.jp/wp/category/%e6%9c%aa%e5%88%86%e9%a1%9e" typeof="WebPage">
      <span property="name">未分類</span>
    </a>
    <meta content="2" property="position">
  </span>
  &gt; 
  <span class="post post-post current-item">Hello world!</span>
</div>

あれ？
itemprop は property, itemtype は typeof で書いてますね。それと、トップページはリンクがないため、「Google 構造化データ テストツール」でエラーになっています。個別ページは大丈夫そう。

いくつかのサイトを見た結果、次のようにしてみることにしました。

  • ul: itemscope itemtype=“http://schema.org/BreadcrumbList"
    • li: itemprop=“itemListElement" itemscope  itemtype="http://schema.org/ListItem"
      • a: itemprop=“item"
        • span: itemprop=“name"
      • meta: itemprop=“position"  1 から始まる

本サイトの出力後のHTMLがこんな感じになりました。

<ul class="breadcrumbs" itemtype="http://schema.org/BreadcrumbList" itemscope="">
  <li itemtype="http://schema.org/ListItem" itemscope="" itemprop="itemListElement">
    <a href="http://ikubo.jp/tech/" itemprop="item">
      <span itemprop="name">Home</span>
    </a>
    <meta content="1" itemprop="position">
  </li>
  &gt;
  <li itemtype="http://schema.org/ListItem" itemscope="" itemprop="itemListElement">
    <a href="http://ikubo.jp/tech/category/web" itemprop="item">
      <span itemprop="name">Web関連</span>
    </a>
    <meta content="2" itemprop="position">
  </li>
</ul>

結局、ゴリゴリ書いてしまいましたw

一応ソースも載せておきます

<ul class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
  <?php
      $bread_level = 1;
      $breadcrumbs  = '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/BreadcrumbList">';
      $breadcrumbs .= '<a itemprop="item" href="'.esc_url(home_url('/')).'"><span itemprop="name">Home</span></a>';
      $breadcrumbs .= '<meta itemprop="position" content="'.$bread_level.'"></li>';
      $bread_level += 1;
      if ($ik_post_type != 'post' ) {
          $breadcrumbs .= ' &gt; ';
		      $breadcrumbs .= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">';
          $breadcrumbs .= '<a itemprop="item" href="'.esc_url(home_url('/'.$ik_post_type.'/')).'"><span itemprop="name">'. $ik_type_name . '</span></a>';
		      $breadcrumbs .= '<meta itemprop="position" content="'.$bread_level.'"></li>';
		      $bread_level += 1;
      }
      if (!empty($ik_term_name)) {
          $breadcrumbs .= ' &gt; ';
		      $breadcrumbs .= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">';
          $breadcrumbs .= '<a itemprop="item" href="'.esc_url(home_url('/'.$term_type.'/'.$ik_term_slug,'/')).'"><span itemprop="name">'. $ik_term_name.'</span></a>';
		      $breadcrumbs .= '<meta itemprop="position" content="'.$bread_level.'"></li>';
		      $bread_level += 1;
      }
      echo $breadcrumbs;
  ?>
</ul>

Web関連

Posted by ikubo