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

公開日：2019(令和元)年6月3日／最終更新日： 2019(令和元)年6月4日

以前【ha-Basic】テーマへ構造化データの出力ができるようにしたという記事を書きました

https://www.momosiri.info/habt/schema/

だがしかし・・・私の持つサイトへ徐々に【ha-Basic】テーマを使用していくうちにちょっと問題ありな状況が発覚しました。

コピペプログラマーとして、紹介されているコード類をあまり鵜呑みにするものではないと実感した瞬間でした（きちんとチェックしなかった私が悪いのですが・・）。

そもそも「構造化データってなんぞや？」ということすらあまりわからず、SEO効果があるならという安易な発想で設置したのですから当然と言えば当然ですけど。

構造化データの内容についてはWelcome to Schema.orgに要素などが細かく書かれているのですが、何がなんやら分からん（怒）。多分完全理解している人は皆無でしょう（笑）。

まずは現時点で私が理解している範囲で構造化データの解説をしておきます（偉そうに・・・）。

構造化データというのは検索エンジン（殊にGoogle）にサイトやページの構造を知らせることで、どんな要素のあるページなのかをしっかり認識してもらうためのもの（親和性というらしいです）のようで、特に検索順位に影響があるものでもない模様、強いて言うなら検索結果に表示される内容をコントロールできる可能性が広がる（微妙な表現でスミマセン）要素のことのようです。

が、構造化データについての概要が構造化データの仕組みについてに書かれている位ですから、やっておいてマイナスはない（と思う）ので、できれば実装しておきたいところ・・・というのが私の結論です（本当に微妙な表現でスミマセン・・・）。

SEOというかアクセスアップする可能性が上がる過程としては・・・
検索結果に反映される可能性が高まる
　　→検索結果からクリックされる可能性が高まる
　　　　→アクセス数が上がる
　　　　　　→ページの評価が上がる
　　　　　　　　→検索結果の上位に来る可能性が上がる→振り出しに戻る・・
という感じなんだと思います。一気に順位が上がるということではなく、クリックされて訪問される機会が増えれば有用なページと認識されるようになって・・ということなんですね（と理解しています）。

で、構造化データに何の要素が必要なの？？ということになるのですが、サイトの種類によってさまざまなようです。文末におまけとしてGoogleの構造化データ生成ツールについてリンクを載せていますので参考にしてみてください。

さて、ページ内で表示する構造化データは大きく

Microdata
RDFa
json-LD

の３種類の形式があり、Googleでは【json-LD】という形式の構造化データを使用することが推奨されているようです。

話を少し戻すと、この【json-LD】形式の構造化データをWordPressにコピペでできるよ！という記事を参考にして設置したというわけです（実は【ha-Basic】ではきちんとデータが出力されていなかったことに後日気づいたわけですけど）。

この記事を見て【ha-Basic】テーマは使ってないけど自分もやってみよう！！という方は、以下のことを確認してから進めることと、きちんとチェックすることをお勧めします。

WordPressのテーマでよく使われているのはMicrodata形式の構造化データです。テーマファイルの中を見て「itemscope itemtype=”https://schema.org/WebPage”」などといった記述がソース内にある場合には既にMicrodata形式の構造化データが存在しますので、今回紹介する【json-LD】形式のものに置き換えるにはすべてのタグを削除する必要がありますからご注意ください。

【どうして【json-LD】形式が推奨されるの？】の考察

至って私的な考察ですからそのつもりで見ていただければと思います。

まず、多くのWordPressテーマがMicrodata形式にしているのはなぜかというと、データがそこにあるからなんですね。構造化データに必要なのは作者とかタイトルとか抜粋文とか・・・なので、それらは既にページをhtml化した際出力されていますから、それに構造化データの１つですよ！というタグを追加すれば簡単に自動で構造化データが出来上がるという訳なんだと思います。

他方【json-LD】形式は構造化データは構造化データとしてまとめて「ここに書いてあります！」と出力する方法。Microdata形式のようにページのあちこちにデータがなく、まとまって出力されているため、検索エンジンクローラーも見つけやすく把握しやすいのでしょう。いくら現代のクローラーの精度や速度が上がってページ内すべてをクロールしてくれるといってもこちらがフレンドリーな記述をしていることで「この人いい人（サイト）だ」と思ってくれる・・・のかも知れません。でも今回のように【json-LD】形式で自動出力しようとすると結構大変なんです。ひょっとするとSEOに強いと豪語アピールしているテーマはその辺をきちんとしているのかも（笑）、まあ実際に買って検証はしてません。テーマは買うものではないと思ってますので・・。

前述したように今回紹介する【json-LD】形式の構造化データを新しく設置したり、Microdata形式の構造化データから変更したからといってアクセス数が飛躍的に上がるということはないでしょうし、変更したらアクセス数が下がった・・という結果となることもあり得ますので自己責任で行ってください。

【ha-Basic】テーマにおける【json-LD】形式の構造化データ設置備忘録

最初にお断りしておきますが、ここで紹介するコード・方法は【ha-Basic】テーマの場合のものですので、他のテーマの場合はそれに合わせてコードの変更等をする必要があります（つまりコピペでできるものではありません）

構造化データを出力するコードの基本構造

下にコードをすべて紹介しますが、まずはどんな構造になっているかを紹介しておきます。

まずは「トップページ」と「その他のページ」で処理を分けています。なぜかというと、トップページとなるページは固定ページであってもブログページであってもタイトルは「サイトのタイトル」、サイトの説明は「キャッチフレーズ」だからです。出力を自動化するにあたってはPHPを使って今あるデータから抽出しますからこれを分けて処理させる必要があるのです。

次に「ページの説明」カスタムフィールドに内容があるかないかで分けています。【ha-Basic】ではメタデータの出力と今回紹介する構造化データのディスクリプションのデータに「ページの説明」カスタムフィールド（meta_description）を使っています。そしてそこに何も書いて無ければ本文の先頭から120文字程度の文章を出力するようにしていますから、これでも処理が変わってきます。

これを踏まえて下のコードをご覧いただくと、似たようなコードが３回繰り返され、それぞれにちょっと違う記述があることが理解いただけると思います。
※もっといい方法があるのかも知れませんけど構造化データ化自体の中で条件分岐ができないので、私の能力ではこの記述の仕方が限界でした。

それでは以下にコードをずらっと紹介します。前述したように自身の環境に合わせる必要がありますので【ha-Basic】以外のテーマの場合には調整してください（つまりコピペではきちんと出力されません）

<?php if(is_front_page()): //フロントページでの出力?>
<?php $author = get_userdata($post->post_author); ?>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"<?php home_url(); ?>"
},
"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", //個人の場合は"Person"と記入
"name": "<?php echo $author->display_name; ?>" //毎回同じ著者の場合は直接記入してもOK
},
"publisher": {
"@type": "Organization", //個人の場合は"Person"と記入
"name": "<?php echo $author->display_name; ?>", //ここに社名や個人名を記入
"logo": {
"@type": "ImageObject",
"url": "<?php echo get_template_directory_uri() ?>/images/webclipicon.png" //ここにロゴのURLを記入
}
},
"description": "<?php bloginfo( 'description' ) ?>"
}
</script>

<?php else: //フロントページ以外?>
<?php $ctm = get_post_meta($post->ID, 'meta_description', true);?>
<?php if(empty($ctm)): //カスタムフィールドに値がないときの処理?>
<?php $author = get_userdata($post->post_author); ?>
<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 the_post_thumbnail_url('full'); ?>",
"datePublished": "<?php echo get_post_time( 'c', true ); ?>",
"dateModified": "<?php echo get_post_modified_time('c',true);?>",
"author": {
"@type": "Person", //組織の場合は"Organization"と記入
"name": "<?php echo $author->display_name; ?>" //毎回同じ著者の場合は直接記入してもOK
},
"publisher": {
"@type": "Organization", //個人の場合は"Person"と記入
"name": "<?php echo $author->display_name; ?>", //ここに社名や個人名を記入
"logo": {
"@type": "ImageObject",
"url": "<?php echo the_post_thumbnail_url('full'); ?>" //ここにロゴのURLを記入
}
},
"description": "<?php echo wp_trim_words( get_post(get_the_ID())->post_content, 55, '...' ); ?>"
}
</script>

<?php else: //カスタムフィールドに値があるときの処理?>
<?php $author = get_userdata($post->post_author); ?>
<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 the_post_thumbnail_url('full'); ?>",
"datePublished": "<?php echo get_post_time( 'c', true ); ?>",
"dateModified": "<?php echo get_post_modified_time('c',true);?>",
"author": {
"@type": "Person", //組織の場合は"Organization"と記入
"name": "<?php echo $author->display_name; ?>" //毎回同じ著者の場合は直接記入してもOK
},
"publisher": {
"@type": "Organization", //個人の場合は"Person"と記入
"name": "<?php echo $author->display_name; ?>", //ここに社名や個人名を記入
"logo": {
"@type": "ImageObject",
"url": "<?php echo the_post_thumbnail_url('full'); ?>" //ここにロゴのURLを記入
}
},
"description": "<?php echo get_post_meta($post->ID , 'meta_description' ,true); ?>"
}
</script>

<?php endif;?>
<?php endif;?>

コードの設置方法

構造化データはページのどこに記述してもいいですし、基本余分なものはフッターに・・・と思いたいところですが、使用するプラグインや環境によってはフッターに挿入するときちんとデータを引き出してくれないことがあります（実際に経験済み）。なので、何にも影響を受けにくいヘッダーへの挿入をお勧めします。

上のコードをそのままheader.phpの「</head>」の上に記述するのが一番オーソドックスでしょう。

でも・・・ちょっとごちゃごちゃしますね。一歩すすめて別ファイルにしてheader.phpへ読み込む方法を紹介しておきます（【ha-Basic】はこの方法にしています）

まず、テキストエディタにコードをコピーして「schema.php」というファイルとして保存します。

それをサイトのテーマフォルダ内へアップロードします。

最後に以下のコードをheader.phpの「</head>」の上へコピーすれば完成です。

<?php get_template_part('schema');//構造化コード?>

↑のget_template_partは「〇〇というphpファイルを読み込んでね！」という便利な指示。テーマ内で結構たくさん使われています。これをたどればどんな複雑なテーマでもページ表示するのにどれだけのコードを使っているかが分かるようになります。もちろんそれらをすべて１つのファイルにすればとっても長い記述になるけど１つのファイルにすることができます。