ワードプレスで構造化データマークアップできない?

ハマりましたわ。

以前はツクガクのサイトは手書きだったので普通に構造化マークアップもしていたのですが、ここ数年、ワードプレスに変更してからというもの構造化マークアップをしていなかったので、いざしようと思ったらすんなりできないんですよ。

どうやら、使っているレンタルサーバによってすんなりできる人できない人がいるみたいで、無論、ツクガクについてはできない勢でした(笑)

が、やっちゃいました😊

cocoonのカスタムフィールドhead_customは?

1つ目の方法はツクガクはテンプレートがよくつかわれているcocoonというワードプレスのテンプレートを使っています。とても使いやすくてお気に入りです。

json-ldをカスタムフィールドに追加できない。

cocoonはカスタムフィールドに「head_custom」というフィールドを追加して、そこに構造化データマークアップのスクリプトを書き込めばヘッダで読み込まれるようなんですが、どうにもこうにも書き込めませんでした。弾かれます。

他の方も同じような質問をしていて、書き込める人、そうでない人がいるようです。

もう、何が何だかわからず、泣きそうですw

プラグインを使ってみては?

訳も分からず泣きそうでしたが、なんだろう、と思ってたいして調べもせずAdvanceCutomFeeldなどのプラグインを次から次へと試したのですがどれもこれもダメ。

やりたかったことはFAQの構造化データマークアップ。なので、FAQの構造化データマークアップが作れるプラグインを試したところ、できたと思いきや、文字化けしてしまいこれもダメ。

functions.phpに関数を書いてカスタムフィールドをヘッダに書き込む

多く書かれている方法で「カスタムフィールド」にスクリプトを書いて、それをヘッダに読み込めば「json-ld」の構造化データマークアップが読めるようになるという方法。

cocoonのheader.phpを覗いて調査して見ましたが、結局のところ、やっていることは最初のcocoonのhead_customに書き込むのとまったく一緒。

カスタムフィールドに構造化データマークアップのスクリプトを書き込んで、追加や更新をしても弾かれます。

調べていくうちにワードプレスからjason-ldが書き込めないサーバもあることに辿り着き、ようやく、スクリプトについて怪しい。と思い始めました。

schemaのscriptを2つに分け書き込み実験

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": {
    "@type": "Question",
    "name": "",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": ""
    }
  }
}
</script>

黄色の部分と赤の部分に分けてみました。

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

こちらをカスタムフィールドの「head_custom」に入れて追加してみたところ書き込めません。

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": {
    "@type": "Question",
    "name": "",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": ""
    }
  }
}

こちらの赤いスクリプトのメインの部分ですね。

こちらは書き込めました。この時の喜びようw

しかし、json-ldは

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

がないと意味がないのです。。構造化データマークアップにはならないのです。。

当然ですが(;^_^A

ここではっきりしました。

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

このヘッダとフッタ部分が悪さをしているようです。

ワードプレスはレンタルサーバーによって、json-ldがカスタムフィールドに書き込めないなんて困っちゃいますね。どっかでセキュリティがかかっているんでしょうね。変なスクリプトを送り込まれたら、サーバー管理者さんも大変だし納得です。

ようやく問題を洗い出せたところで、問題解決に進めます!!😊

どうすれば構造化データマークアップできる?

最初からこうすればよかった。

スクリプトのヘッダとフッタ部分をfunctions.phpにプログラムとして埋め込んでおいて、カスタムフィールド構造化データマークアップが設定されているとき呼び出してjson-ldを成形して表示する。

まず、カスタムフィールドを追加します。

名前はなんでもよいですが、構造化データマークアップしたいコンテンツに、分かりやすい名前でカスタムフィールド名を追加します。

「markup_schema_data」とか。。なんでもいいです。とりあえず、プログラムの中で使うので、分かりやすいものをつけましょう。

毎度、書き込むためにはadd_action関数が必要。

そして、ヘッダを指定するので’wp_head’というパラメータが必要。

add_action( 'wp_head', '呼び出す関数名' );

これで毎回ヘッダに自作の関数が呼び出されます。

呼び出す関数名は任意でつけましょう。

add_action( 'wp_head', 'add_schema_head' );

私は関数名はスキーマをヘッダに追加ということでadd_schema_headにしました。

続いて、カスタムフィールドに書き込んだ構造化データマークアップのスクリプトを読み込んできます。

get_post_meta(get_the_ID(),'markup_schema_data',true);

ネットでいろいろあさっていると、呼び出す場面や順番が違うっていうことだと思いますが「$post->ID()」と書かれていることが多いのです。

しかし、function.phpではget_the_ID()でないとカスタムフィールドが読み込めません。

そして、読み込んできたところを

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

でサンドして表示するプログラムがこちら!

add_action( 'wp_head', 'add_schema_head' );
function add_schema_head() {
	$markup_schema_data=get_post_meta(get_the_ID(),'markup_schema_data',true);
	if($markup_schema_data){
	echo "\n<script type=\"application/ld+json\">";
 	echo $markup_schema_data;
	echo "</script>";
	}
}

まだいとしのサチコさん(サーチコンソール)では確認できていませんが、

json-ldをカスタムフィールドに追加できた。

とカスタムフィールドに追加することで、

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": {
    "@type": "Question",
    "name": "",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": ""
    }
  }
}
</script>

こちらがヘッダに追加されるようになりました。

大したプログラムではないですが、お困りの方がおられましたら是非ご参考に。

ただし、どうなっても責任は持てませんので自己責任でお願いします(;^_^A

タイトルとURLをコピーしました