@graph を使った構造化データのメリットと設定方法

Webページの情報を検索エンジンに伝えるために利用される構造化データ。直接HTMLにマークアップして出力することもできますが、多くの場合は JavaScriptで動的に作成したjson/+ld 形式で出力しているだろうと思います(わたし調べ)。

「@graph を使って作る方が便利ですよ〜」というのは聞いていたものの、なかなか調べる機会がなく使わないまま流れる月日。年もあけたので一念発起しきちんと調べました。

INDEX

@graph は本当に便利なのでみんな使うべき
@graph 構造化データの要点は2つ
1. ポイント1・　構造化データへの動的な追加が容易になる
2. ポイント2・　データ同士を参照させることができる

@graph は本当に便利なのでみんな使うべき

調べ終わった感想は「もっと早く調べておけばよかった、、」という後悔しかなかったので、後進のためにも学習結果をまとめます。

大袈裟でなく、これまで使おうとしてこなかったことが後悔でしかないです。

@graph 構造化データの要点は2つ

@graph を使う場合、使わない場合で比較したとき出力されるデータは基本的に同じものです。

SEOに強い、弱いの観点でのみ検討するのであれば両者に違いはないはずなので、興味が失せた方とはここでお別れですね。

ポイント1・　構造化データへの動的な追加が容易になる

@graph で作成する構造化データは

{
  "@context":"https://schema.org/",
  "@graph": [ ページのデータ , パンくずのデータ ]
}

のように、”@graph” が複数データを配列にとる形でシンプルにまとめられます。

（多くの場合そうだと思いますが、）JavaScriptで動的にjson/+ld を作成する場合に便利なのが、それぞれのデータの作成・追加がシンプルになり管理が容易になることです。

const graph = [];
const pageInfo = ページ用構造化データ;
graph.push( pageInfo );

const breadInfo = パンくず用構造化データ;
graph.push( breadInfo );

const otherInfo = 他に何か追加したいデータ;
graph.push( otherInfo );

// 最後にまとめるだけ
const schemaData = JSON.stringifY({
  "@context":"https://schema.org/",
  "@graph": graph
});

コードの見通しも良くなって最高ですね。

ポイント2・　データ同士を参照させることができる

“@graph” を使用する場合、”@id” が必須です。

“@id” 自体は以前からあり、url と同じ値を指定したりしていましたが、現在は文末にハッシュ(#)などを付与して必ず一意となることが求められています。

この# は単なる識別子ですので、DOMのid属性とは関係ありません。

{
  "@id": "https://example.com/blog/1#article", 
}

だからといって、HTMLページに id=”article” を用意する必要はないということです。

この@id が構造化データを識別するキーとなり、他のデータから参照したりされたりすることが可能になります。

データベースを触ったことがある方だと、relationshipとFKの関係と同じと言えば分かりやすいと思います。

// パンくずの構造化データ
const breadInfo = {
  "@type": "BreadcrumbList",
  "@id": `${ArticleURL}#breadcrumb`,// この@id で pageInfo とつながっている
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "ホーム", "item": HomeURL },
    { "@type": "ListItem", "position": 2, "name": "カテゴリ",　"item" CategoryURL },
    { "@type": "ListItem", "position": 3, "name": ページタイトル },
  ]
}

const pageInfo = {
  "@type": "WebPage",
  "@id": `${ArticleURL}#webpage`,
  "isPartOf": {
    "@id": `${HomeURL}#website`, // @id でトップページに定義しているWebSiteデータを参照 
  },
  "breadcrumb": {
    "@id": `${ArticleURL}#breadcrumb`, // @id でbreadInfo を参照
  }
};

isPartOf　で指定しているように、他ページに定義しているデータを指定することができます。

検索エンジンのクローラーは他ページを指す @id をみつけると、そのページからデータを参照するようになるので、同じ内容をページごとに何度も書くような必要もなくなります。

当然ですが、@id が間違っていると参照できなくなってしまうので、その点だけは注意が必要です。