本ページはHIGA TSUBASAが属する個人プロジェクト「COFUS」内のBLOGコンテンツです。

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

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

HIGA TSUBAS

Frontend Engineer HIGA TSUBAS

1992年生まれ、沖縄県育ち、現在大阪暮らし。フリーなフロントエンドエンジニアとしてコーディング案件をメインに行いながら、Web制作・Webサイト運営・ツール制作などの活動を行っています。

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

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ページでも日付を正しく伝えたりなどクローラーに正しい情報を伝える事が出来たりします。
直ぐに効果を期待する施策ではありませんが最初で対応させておくとクローリングに対して有効的なアプローチが出来るでしょう。

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