SEO的にも、CTR増加の為にも、ブログには構造化マークアップを導入しておいた方が良いでしょう。
実際にプラグインを入れて表示させるという方法もありますが、個人的にはどんな挙動をしているかわからないモノは基本的にあんまり入れたく無いのが本音です。
そこで、構造化マークアップをプラグインなしで簡単に導入する方法をここに記しておきます。
プラグイン不要で構造化マークアップを導入する方法
構造化マークアップはJavascriptで表記するので、該当のページを読み込んだ時にヘッダーに構造化マークアップのJavascriptが表示されるように処理ができれば、プラグイン無しで可能です。
header.phpにコードを追記
ヘッダーにコードを追加する場合、ワードプレスのheader.phpに追記すれば、簡単にできます。
今回はページごとに、markupというカスタムフィールドに追記されたものを表示するように設定します。
header.phpを開いたら、</head>を探して、すぐ上に以下のコードをコピペして、更新します。
<!–構造化マークアップ–>
<?php
$markup = get_post_meta( get_the_ID(), ‘markup’, true );
if( !empty( $markup ) ) {
echo $markup;
}
?>
<!–構造化マークアップ–>
コピペしても表字されない時は『’』を半角英数字で打ち直してみてください。
カスタムフィールドを表示させる
構造化マークアップを追加したいページを開いて、構造化マークアップのコードを挿入していきます。
まずは対象ページの記事を開いて、ページ上部の表示オプションをクリックします。
項目が開いたら、カスタムフィールドにチェックを入れます。
![](https://www.masamedia.top/wp-content/uploads/2022/10/b182620ef9c803064a67f799036f49ca.jpg)
これで、ページ下部にカスタムフィールド欄が表示されるようになります。
![](https://www.masamedia.top/wp-content/uploads/2022/10/83064fa84448f61095c90a777d86ef22.png)
構造化マークアップのコードを追加
カスタムフィールドが表示されたら、カスタムフィールドの新規追加をクリックします。
![](https://www.masamedia.top/wp-content/uploads/2022/10/9bd3474ab8ce416de33c94747702a9b7.jpg)
名前にはmarkup、値には構造化マークアップのJavascriptコードを貼り付けます。
![](https://www.masamedia.top/wp-content/uploads/2022/10/a53010765df535d3078a985a22c504b6.jpg)
以上で、構造化マークアップを記事へ反映することができます。
構造化マークアップのコード作成方法
構造化マークアップのコードはMERKLEのSchema Markup Generator (JSON-LD)を利用すると簡単です。
MERKLE Schema Markup Generatorの使い方
まずはリストから構造化マークアップの種類を選択します。
![](https://www.masamedia.top/wp-content/uploads/2022/10/42c70509a0f2b98b8f6b9de9847a34e9.jpg)
今回はHow-to(やり方)なので、How-toを選択し、必要事項を入力していきます。
※種類に関してはいろいろあるので、後日べつの記事で記載したいと思います。
上から順に入力していきましょう。
![](https://www.masamedia.top/wp-content/uploads/2022/10/261601b7ff0eeaed6dba2170d3369ea2.png)
入力していくと、右にコードが表示されます。こちらを、コピーして先ほどのカスタムフィールドの値にコピペすればOKです。
![](https://www.masamedia.top/wp-content/uploads/2022/10/807e99192179499a4f8fa4a9be9ac86e.jpg)
コピペする前に、エラーが出ないか、チェックしておきましょう。
右上のGのマークをクリックします。
![](https://www.masamedia.top/wp-content/uploads/2022/10/c2611e47f4b123ee17b9cf6980ec66d4.jpg)
Rich Results Testをクリックします。
![](https://www.masamedia.top/wp-content/uploads/2022/10/d81a782c25ce05560ad004d0622d6d56.jpg)
コードをテストをクリックします。
![](https://www.masamedia.top/wp-content/uploads/2022/10/d81a782c25ce05560ad004d0622d6d56-1.jpg)
エラーが無ければ、このように表示されます。
![](https://www.masamedia.top/wp-content/uploads/2022/10/2c336b4ddd4df14f04048ba8803aeade.png)
有効なアイテムを検出しましたなれば、コードをmarkupの値にいれて、ページを公開すれば完了です。
まとめ
- WordPressの記事でリッチリザルトを表示させるための構造化マークアップはプラグイン無しで対応できる
- 構造化マークアップの作成にはMERKLEのSchema Markup Generator (JSON-LD)を使うのが便利
- コードを入力する前に必ずエラーが起きないかチェックする必要がある