SWELLを使ったYoast式構造化マークアップのJSONコード記述方法

ここではWordpressを使用している方向け、特にテーマのSWELLを使っている人へ向けたYoast式構造化マークアップを個人でできる範囲でやってみた方法（SWELL以外のテーマでも応用可能）を解説する。

これは著者の備忘録でもあり、今後テーマのSWELLを使用しているブロガー、アフィリエイターがGoogleの求めるE-A-T要素を満たす為に少しでも役立ててもらえればということで書いている。

なお著者である私はプログラマーでもなんでもないが、大学在学中に少しだけプログラミングを学んでおり、簡単なものであれば理解し記述することも可能である。

では一つずつやっていく。

Yoast式構造化マークアップとは何か？

Yoast式構造化マークアップを説明する上で、まずは構造化マークアップについて説明したい。

構造化マークアップとは？

何年も前から構造化マークアップというのは多くのサイトで実装されているコードによる記述である。最近Googleではサイトの著者情報を構造化マークアップで記載することを推奨しており、今や個人でも構造化マークアップを求められているという現状である。

では構造化マークアップとは具体的に何なのか？

そもそもGoogleの検索エンジンは人ではなくプログラムである。それ故、記事の文章を人間のように読むことはできない。

人が『◯』をマルという〝記号である〟とわかるように、Googleは『文章、単語』を単純に〝記号〟としてしか認識していない。

つまり『文章、単語』には〝意味がある〟と認識しないのである（被リンクによりリンクを辿って大まかな概要を捉えることは可能）

その記号という認識に〝意味〟を与えるのが構造化マークアップだ。

正直、筆者もそこまで必要ないと踏んでいたが、どうもそういうわけにはいかないことが起きている。

2021年10月19日、Googleの検索品質評価ガイドラインが１年ぶりに更新されたことで確信へと変わった。このガイドラインの中でGoogleは下記のように記載しているのである。

Your assessment of untrustworthiness may be based on the content of the page, information about the website,
information about the content creator, and the reputation of the website or content creator.

＜翻訳引用＞

信頼性の評価は、ページのコンテンツ、Webサイトに関する情報、およびWebサイトまたはコンテンツ作成者の評判に基づいて行われる場合がある。

引用：General Guidelines（Google検索品質評価ガイドライン）

つまり構造化マークアップでページのコンテンツ、Webサイトに関する情報を記載することは、E-A-Tの信頼性を高めることにつながる可能性があるのである（E-A-TとはSEOにおいて重要な要素として最近ピックアップされているものである。E-A-Tについてはこの記事では詳しく解説しない）

そうとわかればやらないわけにはいかない。

Yoast式構造化マークアップとは？

コードの記述にも記述方法としていくつかあり、『JSON-LD』『microdata』などあるのだが、Googleが推奨しているのが『JSON-LD』という記述方法である。

Yoast式とは、Wordpress SEOプラグインの会社Yoastが考えている構造化マークアップのやり方である。Yoast式でもこの『JSON-LD』を採用した記述を紹介している。

では具体的にYoast式とは何なのか？

単純な構造化マークアップのコード記述は様々なサイトで確認できる。プログラミング初心者であってもそのようなサイトを確認すれば、ある程度の理解と実際にサイトに反映、実装させることができるわけだ。

ところが、ここに問題がある。

様々なサイトで紹介しているのは、構造化マークアップの基本的なやり方であり、サイトの中身を一つ一つ独立させてコードを記述するのである。

（例）

＜パンくずリスト＞→パンくずリストの構造化データを記述。

＜記事＞→記事の構造化データを記述。

＜著者情報＞→著者情報の構造化データを記述。

このような形で『パンくずリストについての記述の仕方はこう・・』『記事についての記述の仕方はこう・・』というように、一つ一つの構造化マークアップ方法しか書かれていない（当然のことではある）

こうすることで何が起こるかというと、記述の数だけ〝データ（以下、アイテム）が増える〟のである。

これは実際にSchema Markup Validatorというツールを使うと目に見えて確認できる。下記に示した画像が実際に構造化マークアップのアイテムが複数存在している状態だ。

このように１記事に対して、多くのアイテムが存在すると、Googleはデータを読み取るのに迷いが生じるのではないか？というのがYoastの考え方である。

そこでYoastはこのアイテムを一つにまとめることで、スムーズにデータを読み込むことができ、より分かりやすくサイト構造を伝えられるのではないか？と考えた。

そのような考えからアイテムを一つにまとめるようにして構造化マークアップしたのである。

これがYoast式構造化マークアップなのだ。ちなみにこのYoast式で作ると下記画像のようになる。

アイテム数が１つしかないのがわかるだろう。ところがこのアイテムの中に上記画像にあったアイテムのデータをいくつか詰め込んでいるのだ。なお筆者は構造化データとして必要なものしか詰め込んでいない。

Yoast式構造化マークアップの前に押さえておきたい記述方法

この記述は基本的にはどんなテーマでも記述が可能だ。ただし注意点がある。

WordPressのテーマでは基本的に構造化データを自動生成するものがほとんどである。というのも、プログラミングを学んでいない方でも自由に記事を書くことができるようにテーマ制作者が配慮してくれているからだ。

これはプログラミング未経験者にとってはとても嬉しいことなのだが〝汎用性がある〟というのがYoast式では仇となる。汎用性があることで一つ一つアイテムが生成されることになり、自ずとアイテムが乱立するのである。

それはつまるところ・・Yoast式でアイテムをまとめても他にアイテムが自動で生成される為、アイテム数が増えることには変わりがないのである（一番最初に挙げた画像ほど多くのアイテムにはならない）

これに関しては、自らが選んだテーマなので仕方がない。著者である私も何とか様々なテーマの自動生成機能を停止できないか？と考えたが、さすがにこれには手が出せなかった。

そんな中、テーマのSWELLはこの構造化データの自動生成機能を停止できたのだ。私にとってはYoast式を試す良い機会だったわけだ。

ではここからSWELLに実装した構造化マークアップのやり方を一つ一つ解説したい。

1.基本的な著者情報コード

最近Googleが推奨している著者情報の基本的な構造化マークアップのやり方である。

<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"Article",
        "author":{
        "@type":"Person",
        "url":"サイト内の著者のプロフィールページのURL",
        "name":"著者名",
        "sameAs":[
            "著者のSNSアカウントURLなど", 
            "著者のSNSアカウントURLなど",
            "著者のSNSアカウントURLなど"
        ]
}
</script>

このコードを直接Wordpress記事内に『HTMLカスタム』というブロックで一つずつ入れてあげるか、テーマによっては＜/head＞直前（つまりheadタグ終了直前に出力する）という項目があり、そこにコードを記述するとサイト全体に反映される。

コードを記述したら必ずエラーが出ていないかのチェックをすることをオススメする。初心者の方に注意して欲しいのはコード記述でよくあるエラーだ。下記にその主なエラーの原因を記載する。

 "name":"著者名",←これが正しい。

"name":”あいうえお”,←これは間違い。あいうえおを囲っている『”』というところが違う。

2.基本的なパンくずリストコード

こちらも基本的なパンくずリストを表示させるコードである。

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"@id":"サイトURL/#breadcrumb",
"name": "パンくずリスト",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "サイトトップ名称（例：ホーム）",
"item": "サイトトップURL"
},
{
"@type": "ListItem",
"position": 2,
"name": "サイトカテゴリー名",
"item": "サイトカテゴリーURL"
},
{
"@type": "ListItem",
"position": 3,
"name": "記事タイトル",
"item": "記事URL"
}
]
}
</script>

こちらはサイト全体に反映できない為、個別に対応する必要がある。カテゴリーページではposition2までの記述で問題ない。

Yoast式構造化マークアップで著者情報やパンくずリストコードなどを一本化する

ここまでを踏まえてYoast式に一本化してみよう。最初にやっておくべきことは、SWELLの構造化データ自動生成機能を停止することだ。『SWELL設定＞構造化データ』でチェックを外すと自動生成機能は停止する。

次に押さえておきたいのはコードでサイト構造を示すことだ。

サイト＞カテゴリーページ or 各記事

これをコードで示すには下記のように表記する

WebSite＞WebPage（ArticleもしくはBlogposting）

※1 WebPageというのは〝ページの枠組み〟でArticleは〝記事そのもの（本文）〟
※2 Articleをより詳しくしたのがBlogpostingである。私は基本的にどちらでも良いと判断していてArticleにしている。

ではここまでを踏まえた上で、どのように繋いでいくのか？というと『@graph』と『@id』という２つの記述を使っていく。

まずはサイト全体に反映させて良いコードを考える。そのサイトの著者情報に住所などを記載していて、コードとしても記載したい場合はこのサイト全体に反映させて良いだろう。

SWELLを使用している人は『外観＞カスタマイズ＞高度な設定＞headタグ終了直前に出力するコード』の</head>直前というところにコードを記述するとサイト全体に反映される。

Yoast式構造化マークアップでSWELLサイト全体に反映させるコード

<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@graph":[
    {
      "@type":"WebSite",
      "@id":"サイトURL/#website",
      "url":"サイトURL",
      "name":"サイト名",
      "publisher":{
        "@id":"サイトURL/#organization"
      },
      "author":{
        "@id":"サイトURL/#author"
      }
    },
    {
      "@type":"Person",
      "@id":"サイトURL/#author",
      "name":"著者名",
      "url":"サイト内の著者のプロフィールページのURL"
    },
    {
      "@type":"Organization",
      "@id":"サイトURL/#organization",
      "name":"サイト名",
      "url":"サイトURL",
          "foundingDate":"例：2021-09-10", //設立日
          "description":"サイト説明",
          "address": {
                      "@type": "PostalAddress",
                      "addressLocality": "相模原市南区・・・",
                      "addressRegion": "神奈川県",
                      "postalCode": "252-0304",
                      "addressCountry": "JP"
                     }
      }
  ]
}
</script>

@graphで複数のアイテムをつなぐ

この項目ピンク背景のコードを見てもらいたい。ここでは３つのアイテム〝WebSite〟〝Person〟〝Organization〟を@graphでくっつけてある。基本的にアイテムは下記のような形で囲って記述する。

<script type="application/ld+json">
{
 "@context":"https://schema.org",
 "@type":"◯◯",
         〜
}
</script>

『@type』でアイテムを選択し、その内容を『〜』に記述するのだ。そして複数のアイテムを繋げる役目の記述が@graphだ。ピンク背景のコードを見てもらうとわかるが、一番最初の方で@graphを用いて複数のアイテムを囲っていることがわかる。

"@graph":[
      〜
              ]

＠idでアイテム同士をつなぐ

次に@idの使い方だ。やはりこの項目冒頭のピンク背景のコード、最初のアイテムWebSiteを見て欲しい。

“@id”:”サイトURL/#website”,

このコードにより、@idで指定された『サイトURL/#website』でWebSiteアイテム自身を表わすことができるようになっている。

もうちょっと下を見ると、下記のように記述している。

"publisher":{
        "@id":"サイトURL/#organization"
      },
      "author":{
        "@id":"サイトURL/#author"
      }

ここではpublisher＝出版社、つまり作成者は誰か？そしてauthor＝著者を@idで示しているのだ（publisherは出版社ということで、組織であるOrganizationを指定してあげるのが一般的だ）

“@id”:”サイトURL/#organization”

この@idは、アイテムのOrganizationで指示している（ピンク背景のコード参照）

“@id”:”サイトURL/#author”

この@idでは、アイテムのPersonで指示している（ピンク背景のコード参照）

このように@idを使えばアイテム要素の中に他のアイテム要素が含まれる場合につなぐことが可能になる。

この項目冒頭のピンク背景コードではWebSiteアイテムの中に他のアイテム要素であるPersonとOrganizationが含まれているため、@idで記述したということだ。

Yoast式構造化マークアップでSWELLカテゴリーに反映させるコード

<script type="application/ld+json">
{
"@context":"http://schema.org",
"@graph":[
{
"@type":"WebPage",
"@id":"カテゴリーURL/#webpage",
"url":"カテゴリーURL",
"name":"カテゴリー名",
"description":"カテゴリー説明",
"inLanguage": "ja",
"breadcrumb":{"@id":"サイトURL/#breadcrumb"},
"isPartOf":{"@id":"サイトURL/#website"}
},
{
"@type": "BreadcrumbList",
"@id":"サイトURL/#breadcrumb",
"name": "パンくずリスト",
"itemListElement":[
{
"@type": "ListItem",
"position": 1,
"name": "サイトトップページ名",
"item": "サイトトップURL"
},
{
"@type": "ListItem",
"position": 2,
"name": "カテゴリー名",
"item": "カテゴリーURL"
}
]
}
]
}
</script>

ここでも考え方は前項目のSWELLサイト全体に反映させるコードと同じだ。上記のコードでは、カテゴリーページをアイテムWebPageとして記述している。カテゴリーには〝記事そのもの（本文）〟が無いため、ArticleやBlogPostingなどのアイテムは使用しない。

WebPageアイテムの下にパンくずリストのコードであるアイテムBreadcrumbListを@graphでつないでいる。

“isPartOf”:{“@id”:”サイトURL/#website”}の意味とは

この項目の青背景のコードではWebPageアイテムの中に『“isPartOf”:{“@id”:”サイトURL/#website”}』という記述がある。これはisPartOfという記述で『〜の一部である』という意味を持つ。

ここでは@id”:”サイトURL/#websiteとして、SWELLサイト全体に反映させるコードで記述したサイト自体を表わすWebsiteを指定している。

つまりWebPage（カテゴリー）はWebSite（サイト）の一部であるということをこの記述で示していることになる。

SWELLのカテゴリーへのコード反映方法

SWELLは本当に良いテーマだと感じる。最近構造化データをいじるようになってから余計に感じるようになった。前章でサイト全体に反映させる方法を示したが、カテゴリーページでは〝ブログパーツ〟という項目を使う。

WordPressのダッシュボードで左の項目に〝ブログパーツ〟という項目がある。

ここで新規追加をクリックしてみよう。通常の記事を書くような画面になる。ここでタイトルをカテゴリー名などにすると良いだろう。そして本文にカスタムHTMLブロックを設置し、この章トップの青背景のコードを記述する。そうすると下記の画像のようになると思う。

この画像のようにコードを記述したら、赤矢印の『用途』という部分がある。ここでカテゴリー用という部分にチェックを入れる。そこまでいったら『公開』してしまおう。

その後にブログパーツ画面に戻ってみると下記画面のようになっているはずだ。

赤矢印で示したようにブログパーツを呼び出すコードが記載されている。このコードの一番右に書いてある『1016』という番号がブログパーツのIDである。

次にカテゴリーページへ移動し、カテゴリーページの編集画面を開いてもらいたい。

下の方に進んでいくと・・

上のカテゴリー編集ページで『ページで呼び出すブログパーツ』というのがあるのがわかる。そこの左欄にブログパーツIDを記入し、右欄でブログパーツを選択する。あとはページ一番下の更新ボタンをクリックして終了である。

このようにSWELLにはブログパーツというのがあり、様々な用途で使うことができる。本当にこれは便利過ぎる。SWELLを使っていない他テーマの人は、そのテーマにあったやり方（カテゴリーページにカスタムHTMLを反映させる方法）があるはずなので確認してもらいたい。

Yoast式構造化マークアップでSWELL記事に反映させるコード

<script type="application/ld+json">
{
"@context":"http://schema.org",
"@graph":[
{
"@type":"Article",
"author":{"@id":"サイトURL/#author"},
"image": {
        "@type": "ImageObject",
        "url": "記事の代表的な画像URL（アイキャッチなど）",
        "height": 900,
        "width": 1200
            },
"@id":"記事URL/#article",
"headline":"記事タイトル",
"description":"記事の内容説明",
"isPartOf":{"@id":"記事URL/#webpage"}
},
{
"@type":"WebPage",
"@id":"記事URL/#webpage",
"url":"記事URL",
"name":"記事名（記事タイトルでも可）",
"inLanguage": "ja",
"breadcrumb":{"@id":"サイトURL/#breadcrumb"},
"isPartOf":{"@id":"サイトURL/#website"}
},
{
"@type": "BreadcrumbList",
"name": "パンくずリスト",
"@id":"サイトURL/#breadcrumb",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "トップページ名（例：ホーム）",
"item": "サイトURL"
},
{
"@type": "ListItem",
"position": 2,
"name": "カテゴリーページ名",
"item": "カテゴリーURL"
},
{
"@type": "ListItem",
"position": 3,
"name": "記事タイトル",
"item": "記事URL"
}
]
}
]
}
</script>

このコードでは記事の説明をしている。アイテムは３つでArticle＝記事、WebPage＝その記事の枠組み、BreadcrumbList＝パンくずリストである。この３つのアイテムを@graphでつないでいる。

WebPageアイテムのところで『“@id”:”サイトURL/#webpage”,』と記述しているが『#〜』で『〜』の部分は好きな文字列で良い。

つまりカテゴリーページが複数ある場合などはこの文字列を変えてあげて指定すれば良いのだ。ちなみにカテゴリーページが変わればもちろんパンくずリストの@idも変わってくる。

そのページ、パンくずリストに合った@idで指定してあげることで、しっかりと記述することが可能なのだ。

記事にコードを反映させる方法

上記の緑背景のコードを記事に反映させる。

これは簡単で、直接記事本文に『カスタムHTML』ブロックで記述してしまえばOKだ。これはSWELL以外のどんなテーマであろうと同じように記事内にカスタムHTMLブロックを使用して記述できるので、誰でも設置することができる。

設置場所も基本的に自由だ。記事内であればどんなところに設置しても構わない（HTMLなので記事に表示されることはない）

しっかりと記述できたと思ったら、Schema Markup Validatorでエラーが出ていないかを確認しよう。ここでエラーが出ていなければ終了だ。お疲れ様でした。

＜＜追記：10月29日＞＞

『カスタムHTML』ブロックで記述も可能だが、これだとモバイルユーザビリティに影響が出てエラーになりやすくなってしまうことがわかった（必ずエラーになるわけではない）

SWELLであれば、カテゴリーでも用いた〝ブログパーツ〟が記事内でも使用できるので、それを使用することをオススメしたい。

Yoast式構造化マークアップをSWELLで記述する方法まとめ

ここまでSWELLによるYoast式構造化マークアップの記述方法を記載してきた。

今回の記述ではサイトのメニュー欄（グローバルナビゲーション）の内容などの構造化マークアップについては記載していない。私自身が根本的に今のSEOには必要ないと感じたからだ。

上位のサイトを見てもらうとよくわかるが、構造化マークアップは明らかに単純、そして簡潔に記されている（むしろ必要ない？ゼロにしても良いくらい。ゼロにするには自動生成機能停止しかないが・・）

中途半端に色々詰め込み過ぎるとそれは良くないと感じている。なので、できるだけ必要な情報のみを記載したいということから今回のアイテム数にした。

他テーマでも今回の記事では応用が効くと思う。ぜひ試して欲しい。

今はSEOで上位を取るのは至難のわざだが、少なくともこういった小さな施策を積み重ねることで、相対評価の上で他サイトよりも頭一つ抜きに出たいと思う。

著者：おすすめ co 代表 Yasunori Abe