[Ha-Basic] Structured data is output properly

【ha-Basic】構造化データがきちんと出力されるようにしました

公開日: 制作備忘録
Knowledge Base Wordpress ha-Basic テーマ
☆☆ この機能は【ha-Basic】テーマ バージョン1.1で実装(対応)済みです ☆☆
どんどんいろいろな要素を入れている感じで、一歩ずつ使えるテーマになってきていると自負している【ha-Basic】テーマ。

今回は見た目には何も変わらない「構造化データ」についての変更です。

構造化データとは「検索エンジンや その他のクローラーに理解できるような形でいろいろな部分にタグ付けしたもの」らしい(実は私よくわかっていません・・)です。検索エンジンから理解されやすいページということはSEO対策になる?と判断してソースに表示され、認識されるようにしました。

構造化データについて詳しくは

を参照ください。

なお、構造化データについてもよく分かっていない私が一からこの要素を埋め込めるはずもない・・ということで今回は

↑のページを参考に、【ha-Basic】テーマに合うように加工して実装させました。

私が勝手に師と仰ぐ「Simplicity2」テーマでは共通の部分は各phpファイルに、個別の処理が必要なものはそのように?コードが書かれていたのですが、私の頭では爆発!!な中、footer.phpへ挿入してきちんと出力されるものが掲載されていたので利用させていただくことにしました。完全に検索頼み、コピペもいい加減にしないと・・・(笑)。

一応【ha-Basic】テーマに合うようにと書いている通り、コードの内容は理解して使わせていただいておりますのでご安心を!!

footer.phpへ挿入したコードとちょこっと解説

実際に追加したコードは以下になります。要はhtmlタグの中にそれぞれ記述するのではなく、一括して「ここが構造化の内容でっせ!」というものをページ末尾に書いているということになります。

これを実装するにあたっては、今まで何もわからず設定していた構造化に関する記述をすべて削除しました。

<?php if ( is_single() || is_page()) : //投稿と固定ページで構造化データを出力?>
<?php
     $thumbnail_id = get_post_thumbnail_id($post);
     $imageobject = wp_get_attachment_image_src( $thumbnail_id, 'full' );  //サムネイルを取得?>
<?php //ここから構造化データの記述 ?>
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "BlogPosting",
    "mainEntityOfPage":{
      "@type":"WebPage",
      "@id":"<?php the_permalink(); ?>"
    },
    "headline":"<?php the_title(); ?>|<?php bloginfo( 'title' ); ?>",
    "image": [
      "<?php echo $imageobject[0]; ?>"
    ],
    "datePublished": "<?php echo get_post_time( 'c', true ); ?>",
    "dateModified": "<?php echo get_post_modified_time('c',true);?>",
    "author": {
      "@type": "Person", //組織の場合は"Organization"と記入
      "name": "<?php the_author(); ?>" //毎回同じ著者の場合は直接記入してもOK
    },
    "publisher": {
      "@type": "Organization", //個人の場合は"Person"と記入
      "name": "<?php the_author(); ?>", //ここに社名や個人名を記入
      "logo": {
        "@type": "ImageObject",
        "url": "<?php echo $imageobject[0]; ?>" //ここにロゴのURLを記入
      }
    },
    "description": "<?php echo get_the_excerpt(); ?>"
  }
  </script>
<?php endif; ?>
<?php if ( is_single() || is_page() || is_tag() || is_date() || is_search()) : //投稿と固定ページ、アーカイブページのタイトル?>
<?php //ここから構造化データの記述 ?>
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "BlogPosting",
    "mainEntityOfPage":{
      "@type":"WebPage",
      "@id":"<?php the_permalink(); ?>"
    },
    "headline":"<?php bloginfo( 'title' ); ?>",
    "image": [
      "<?php echo get_template_directory_uri() ?>/images/webclipicon.png"
    ],
    "datePublished": "<?php echo get_post_time( 'c', true ); ?>",
    "dateModified": "<?php echo get_post_modified_time('c',true);?>",
    "author": {
      "@type": "Person", //組織の場合は"Organization"と記入
      "name": "<?php the_author(); ?>" //毎回同じ著者の場合は直接記入してもOK
    },
    "publisher": {
      "@type": "Organization", //個人の場合は"Person"と記入
      "name": "<?php the_author(); ?>", //ここに社名や個人名を記入
      "logo": {
        "@type": "ImageObject",
        "url": "<?php echo get_template_directory_uri() ?>/images/webclipicon.png" //ここにロゴのURLを記入
      }
    },
    "description": "<?php bloginfo( 'description' ) ?>"
  }
  </script>
<?php endif; ?>

・・・ん?前半と後半って同じ?と思った方、甘いですね(笑)。

前半は「投稿」と「固定ページ」用のもの、後半はトップページが固定ページでない場合(ブログ一覧の場合)用のものです(条件分岐させています)。1つのコードの中で複雑にしてもよかったのですが個人的に後から見やすいように別々にしました。

違いは2つに割ったものを並べていただければわかると思います。

一応このサイトの固定ページ、投稿、トップページでは構造化エラーなどは出ませんでしたので大丈夫だと思います。

構造化チェックツールは

おまけ 条件分岐の「&&」「||」の意味がやっと分かりました

実は後半部分のトップページが固定ページでない場合という条件の書き方、恥ずかしながら知らなかったんです。↑の参考ページにもこのことは載ってなくて(Wordpressは環境によるのでコピペしてね!はよく確認することが必要ですよ)、独自に調べました。

テーマ作ってるのにそんなことも知らないの??と怒られそうですが、そんな人でもテーマは作れます(笑)。恐らくこのテーマにもまだまだ抜けているところがいっぱいあることでしょう(笑)。

ただこういうことは自身の狭い世界でごちゃごちゃ考えるよりも、多くの人に使ってもらって指摘していただいた方がよっぽど勉強になるし、よっぽど完成が速いんです。

脱線しかけた・・・

後半の条件分岐の条件にある

<?php if ( is_front_page() && !is_page()) : //トップページの構造化データを出力?>
の行。

is_front_page(サイトのトップページだったら)と!is_page(固定ページじゃなかったら)という条件の間に「&&」というのが入ってますよね?

これは「かつ」を意味するそうで、↑の条件だと
サイトのトップページであり、固定ページでないとき
という意味になるんですね。(is_〇〇に!を付けると反対の意味になります。↑の場合は固定ページでないという意味になります)

もう1つの「||」はorの意味で「または」ということになります。↑の条件で&&の代わりに||を使うと
サイトのトップページまたは固定ページでないもの
となってしまいますから全然意味が変わってきますね。

もともと固定ページと投稿については冒頭で「is_sinle()||is_page()」として
固定ページまたは個別投稿
としていますから、トップページか否かに関係なく固定ページは構造化データが出力されるわけなので、残るは固定ページにしていない場合のトップページをどうするか?ということだけになるのです。

この複合条件、例えば
is_sinle()||is_page()&&is_frontpage()にしたらどうなるんだろう・・・それはまた研究することとします(笑)

【ha-Basic】WordPressのサブメニューをふわっと表示(遅れて表示)させる方法

【ha-Basic】json-LDを使った構造化データについて

続【ha-Basic】json-LDを使った構造化データについて(パンくずリスト編)


現段階での謎??

本当によくわかってなくて申し訳ない限りなのですが、カテゴリーやタグ一覧、ブログ一覧などにこのデータって必要なの?必要ないの?という素朴な疑問が・・。

これについていろいろ調べてみましたが「必要!」とも「不要!」ともはっきり書かれているものがありませんでしたので、ひとまずこれらについては余分なものが悪影響を与えることを避けるため「不要!」と勝手に判断してます。

今後の研究でもしも「必要!」となったらまた変更しようと思っています。

根本的な意見として、このデータってそもそも必要なのでしょうか?SEO対策になるのでしょうか?

この方法では不具合が発生する場合があります

【ha-Basic】をお使いの方は既にこの機能が実装されていますが、サイトの内容によっては不具合が発生する場合があることが発覚しました。新たに

で構造化データについてと、新しいコードについて紹介していますので、チェックをお願いします。

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報