コフス技術ブログ

ホームに戻る
Powered by
ホーム
Web制作

WordPressにて記事詳細ページを構造化データに対応させる例

,
この記事はにメンテナンスが行われています。

表題の通りです。サクッと実装したい場合は以下の例の通りに記述していくと対応させることが出来ます。

AMPページ用と非AMPページで必須プロパティーが異なります。以下例では非AMPページ用を元にしていますのでAMPページで対応する場合はガイドラインを確認しましょう。

if ( is_single() ) {
  // サムネイルを取得.
  if ( has_post_thumbnail() ) {
    $thumbnail_id = get_post_thumbnail_id( $post );
    $imageobject  = wp_get_attachment_image_src( $thumbnail_id, 'full' );
    $imageobject  = $imageobject[0];
  } else {
    $imageobject = 'assets/images/ogpimg.png';
  }

  $_title          = esc_html( get_the_title() );
  $_link           = get_the_permalink();
  $_time_published = get_date_from_gmt( get_post_time( 'c', true ), 'c' );
  $_time_modified  = get_date_from_gmt( get_post_modified_time( 'c', true ), 'c' );
  $_author         = get_the_author_meta( 'nickname', {USER_ID} );
  $_logo_image     = 'assets/images/common/logo.png';
  $_txtdata        = esc_html( get_the_excerpt() );

  $html = <<< EOM
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "BlogPosting",
    "mainEntityOfPage":{
      "@type":"WebPage",
      "@id":"{$_link}"
    },
    "headline":"{$_title}",
    "image": [
      "{$imageobject}"
    ],
    "datePublished": "{$_time_published}",
    "dateModified": "{$_time_modified}",
    "author": {
      "@type": "Person",
      "name": "{$_author}"
    },
    "publisher": {
      "@type": "Organization",
      "name": "Organization Name",
      "logo": {
        "@type": "ImageObject",
        "url": "{$_logo_image}"
      }
    },
    "description": "{$_txtdata}"
  }
  </script>
EOM;

echo $html;
}

上記例の様にヒアドキュメントだとスッキリ記述することが出来ますね。
ちなみにGoogleが公式でマークアップの例を出しているのでその例も一応載せておきます。

{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://google.com/article"
  },
  "headline": "Article headline",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
   ],
  "datePublished": "2015-02-05T08:00:00+08:00",
  "dateModified": "2015-02-05T09:20:00+08:00",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
   "publisher": {
    "@type": "Organization",
    "name": "Google",
    "logo": {
      "@type": "ImageObject",
      "url": "https://google.com/logo.jpg"
    }
  },
  "description": "A most wonderful article"
}

構造化データのテストは専用のツールが利用出来ます。

構造化データ対応はリッチリザルト機能を利用するために必要なマークアップです。AMPページ対応だとよりリッチな検索結果が期待できますが、非AMPページでも日付を正しく伝えたりなどクローラーに正しい情報を伝える事が出来たりします。
直ぐに効果を期待する施策ではありませんが最初で対応させておくとクローリングに対して有効的なアプローチが出来るでしょう。

プラグイン不要でもさくっと可能ですので是非対応してみて下さい。

ホームへ戻る