【amp】amp研究日記④ 〜schema.orgで構造化データを記述〜

今回は実際に構造化データを作成していきます。

構造化データとは
okinawanpizza.hatenablog.com

schema.org

・構造化データにおいて使用されるボキャブラリーの一つ。
・グーグル、マイクロソフト、ヤフー、ヤンデックスが手を組んだ。
・既存の情報をより詳しく意味を持たせることができる。

例えば次の文章が
「今日、鎌倉で〇〇社主催の合コンに行く。」
下の文章のような情報を持たせることが可能となる。
「今日(日時)、鎌倉(場所)で行われる〇〇社(主催)の合コン(イベント)に行く。」

構造化データを追加する

記事によって変わる部分もあるので、
wordpressのテンプレートタグを利用しながら構造化データを追記していきます。

  <?php
    // image（画像）の指定のためにアイキャッチ画像の情報を取得します
    $thumbnail_id = get_post_thumbnail_id($post->ID); // アタッチメントIDの取得
    $image = wp_get_attachment_image_src( $thumbnail_id, 'full' ); // アイキャッチの情報を取得
    $src = $image[0];    // URL
    $width = $image[1];  // 横幅
    $height = $image[2]; // 高さ
    $description = get_post_meta($post->ID, _aioseop_description, true);
   ?>
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "<?php echo esc_url(get_permalink()); ?>"
    },
    "headline": "<?php echo get_the_title(); ?>",
    "image": {
      "@type": "ImageObject",
      "url": "https://example.com/article_thumbnail1.jpg",
      "height": <?php echo $height; ?>,
      "width": <?php echo $width; ?>
    },
    "datePublished": "<?php echo get_the_date(DATE_ISO8601); ?>",
    "dateModified": "<?php if ( get_the_date() != get_the_modified_time() ){ the_modified_date(DATE_ISO8601); } else { echo get_the_date(DATE_ISO8601); } ?>",
    "author": {
      "@type": "Person",
      "name": "<?php the_author_meta('nickname'); ?>"
    },
    "publisher": {
      "@type": "Organization",
      "name": "<?php bloginfo('name'); ?>",
      "logo": {
        "@type": "ImageObject",
        "url": "<?php echo get_stylesheet_directory_uri(); ?>/img/side/img_wemz03.png",
        "width": 100,
        "height": 100
      }
    },
    "description": "<?php echo $description; ?>"
  }
  </script>

テストツールで確認する

こちらのテストツールを使用します。
https://search.google.com/structured-data/testing-tool/u/0/?hl=ja

僕らの場合はテスト環境がありますので、
テスト環境に表示されたソースを直接貼り付ける形で検証を行います。

エラーが出た箇所を随時直していけば完成となります。

おしまい。

明日

・preg_replaceタグを使ったHTMLタグの置換方法
・広告の表示