ザリガニデザインオフィス

プラグインを使わず、ワードプレスに構造化データを埋め込むやり方のサムネイル

プラグインを使わず、ワードプレスに構造化データを埋め込むやり方

プラグインいれなくてもテンプレートにコピペでいけます。

今回紹介するのはブログ(type: BlogPosting)の構造化データです。JSON-LDを使って基本的なデータを埋め込みます。構造化データを埋め込むプラグインはありますが、やたら滅多にプラグインを入れるとサイトが重くなるので、できるだけプラグインを使いたくない派です。

<?php 
  if ( have_posts() ) : while ( have_posts() ) : the_post(); 
  $sns_url = urlencode(get_permalink());
  $image_id = get_post_thumbnail_id(); 
  if(!empty($image_id)){
    $image_url = wp_get_attachment_image_src($image_id, true)[0]; 
    $image_size = wp_get_attachment_metadata($image_id,false);
    $image_height = $image_size['height'];
    $image_width = $image_size['width'];
  }else{
    $image_url = get_template_directory_uri().'/img/common/zdo_defautl_thumb.png'; //アイキャッチを指定しない時のデフォルトサムネイルのパス
    $image_height = 960;
    $image_width = 720;
  }
?>

<script type="application/ld+json"> 
{ 
  "@context": "http://schema.org", 
  "@type": "BlogPosting", 
  "mainEntityOfPage":{ 
    "@type":"WebPage", 
    "@id":"<?php the_permalink(); ?>" 
  }, 
  "headline": "<?php the_title();?>", 
  "image": { 
    "@type": "ImageObject", 
    "url": "<?php echo $image_url; ?>", 
    "height": "<?php echo $image_height?>", 
    "width": "<?php echo $image_width?>" 
  }, 
  "datePublished": "<?php the_time('Y/m/d') ?>", 
  "dateModified": "<?php the_modified_date('Y/m/d') ?>", 
  "author": { 
    "@type": "Person", 
    "name": "<?php bloginfo('name'); ?>" 
  }, 
  "publisher": { 
    "@type": "Organization", 
    "name": "<?php bloginfo('name'); ?>", 
    "logo": { 
      "@type": "ImageObject", "url": "<?php echo get_template_directory_uri()?>/img/common/logo.png"
    }
  }, 
  "description": "<?php echo htmlspecialchars(mb_substr(str_replace(array("\r\n", "\r", "\n"), '', strip_tags($post-> post_content)),0,60),ENT_QUOTES) ?>…" 
} 
</script>

これをsingle.phpのループ内にコピペして、アイキャッチを指定しなかった時のデフォルトサムネイルのパスト"@type": "ImageObject", "url"のロゴ画像のパスさえ変更すれば自分のものに書き換えれば大丈夫です。

"description":はexcerpt()でもOKだけど…

最後の

"description": "<?php echo htmlspecialchars(mb_substr(str_replace(array("\r\n", "\r", "\n"), '', strip_tags($post-> post_content)),0,60),ENT_QUOTES) ?>…"

"description": "<?php excerpt() ?>"でも可能です。わざわざ変えたのはfunctions.phpにてexcerpt関数の出力をカスタマイズしているからです。

デフォルトでは本文を110文字抜粋して末尾に...を追加しますが、こちらの最後にあるようにリンクつき「続きを読む」に変更することもあるでしょう。そのためdescriptionの中にexcerptで出力すると構造化データにも「続きを読む」が入ってしまうので、excerpt関数ではなくmb_substrにて抜粋しています。

All in One SEO Packのdescriptionを使うやり方

All in One SEO Packを使っている人も多いのではないでしょうか?自分もその一人ですが、せっかくなので、All in One SEO Packのdescriptionを構造化データのdescriptionとしても使う方法です。

<?php 
  if ( have_posts() ) : while ( have_posts() ) : the_post(); 
  $sns_url = urlencode(get_permalink());
  $image_id = get_post_thumbnail_id(); 
  if(!empty($image_id)){
    $image_url = wp_get_attachment_image_src($image_id, true)[0]; 
    $image_size = wp_get_attachment_metadata($image_id,false);
    $image_height = $image_size['height'];
    $image_width = $image_size['width'];
  }else{
    $image_url = get_template_directory_uri().'/img/common/zdo_defautl_thumb.png';//アイキャッチを指定しない時のデフォルトサムネイルのパス
    $image_height = 960;
    $image_width = 720;
  }
  $description = htmlspecialchars(get_post_meta($post->ID, '_aioseop_description', true),ENT_QUOTES); //All in One SEO からdescriptionを取得
?>

<script type="application/ld+json"> 
{ 
  "@context": "http://schema.org", 
  "@type": "BlogPosting", 
  "mainEntityOfPage":{ 
    "@type":"WebPage", 
    "@id":"<?php the_permalink(); ?>" 
  }, 
  "headline": "<?php the_title();?>", 
  "image": { 
    "@type": "ImageObject", 
    "url": "<?php echo $image_url; ?>", 
    "height": "<?php echo $image_height?>", 
    "width": "<?php echo $image_width?>"
  }, 
  "datePublished": "<?php the_time('Y/m/d') ?>", 
  "dateModified": "<?php the_modified_date('Y/m/d') ?>", 
  "author": { 
    "@type": "Person", 
    "name": "<?php bloginfo('name'); ?>" 
  }, 
  "publisher": { 
    "@type": "Organization", 
    "name": "<?php bloginfo('name'); ?>", 
    "logo": { 
      "@type": "ImageObject", "url": "<?php echo get_template_directory_uri()?>/img/common/logo.png"
    }
  }, 
  "description": "<?php echo $description?>" 
} 
</script> 

こちらもループ内で使ってください。ALL in One SEO Packの使用をやめると出力されなくなるので注意してください。