【HTML】実際に構造化データを追加してみました

2021.6.72021.6.7Writer: tamakiComment: 0

開発ブログ

こんにちはKOです。
https://tech.pla-cole.co/structured-data/
前回は構造化データと呼ばれる、グーグルにより
的確な情報を与えるための方法についてお話しさせて頂ました。

今回は実際の記述方法、
またwordpressで動的に記述する方法についてまとめていきます。

いざ、マークアップ

今回はJSON-LDが主流のため、ここではJSON-LDでのマークアップについて解説します。

今回はworpdressで動的に出力する部分を
埋め込みタグに置き換えてみました。

うまく表示できなかったので画像のリンクを貼ります！

https://tech.pla-cole.co/wp-content/uploads/2021/06/スクリーンショット-2021-06-07-9.16.36.png

  <?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>

1 2	{{urvanov-syntax-highlighter-internal:0}} {{urvanov-syntax-highlighter-internal:1}}

  <script type="application/ld+json">

1	<script type="application/ld+json">

JSON-LDで記述するという合図になります。
JSON-LDではスクリプトタグの中にjsonデータを記述するような形でマークアップします。

    $image = wp_get_attachment_image_src( $thumbnail_id, 'full' ); // アイキャッチの情報を取得
    $src = $image[0];    // URL
    $width = $image[1];  // 横幅
    $height = $image[2]; // 高さ