JSON-LDでSiteNavigationElementを追加してみました-すたすた式

JSON-LDでSiteNavigationElementを追加してみました。

自信はありませんが、ラベルのリンクには、SearchResultsPageを使ってみました。

不具合や間違いに気が付いたら変更しようと考えています。

HTMLを編集します。必ずバックアップを取ってから作業してください。

単体のコード

クリックすると開きます

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SiteNavigationElement",
  "hasPart": [
    {
      "@type": "WebPage",
      "name": "ホーム",
      "url": "https://sutasutashiki.blogspot.com/"
    },
    {
      "@type": "SearchResultsPage",
      "name": "暮らし",
      "url": "https://sutasutashiki.blogspot.com/search/label/%E6%9A%AE%E3%82%89%E3%81%97?max-results=10"
    },
    {
      "@type": "SearchResultsPage",
      "name": "DIY",
      "url": "https://sutasutashiki.blogspot.com/search/label/DIY?max-results=10"
    },
    {
      "@type": "SearchResultsPage",
      "name": "Blogger",
      "url": "https://sutasutashiki.blogspot.com/search/label/Blogger?max-results=10"
    },
    {
      "@type": "SearchResultsPage",
      "name": "QooQ",
      "url": "https://sutasutashiki.blogspot.com/search/label/QooQ?max-results=10"
    }
  ]
}
</script>

設置後、スキーママークアップ検証ツールで確認してください。

このブログでは、graphを使いidで連結しています。

WebPageとSiteNavigationElementの連結用として、SiteNavigationElementブロックにidを付与。

{
  "@type": "SiteNavigationElement",
  "@id": "<data:blog.url.canonical.jsonEscaped/>#SiteNavigationElement",

  "hasPart": [
    {
      "@type": "WebPage",
      "name": "ホーム",
      "url": "https://sutasutashiki.blogspot.com/"
    },

    ......

    {
      "@type": "SearchResultsPage",
      "name": "QooQ",
      "url": "https://sutasutashiki.blogspot.com/search/label/QooQ?max-results=10"
    }
  ]
}

次に、WebPageにhasPartを設け、SiteNavigationElementと連結させた。

{
  "@type": "WebPage",
  "@id": "<data:blog.url.canonical.jsonEscaped/>#webpage",
  "url": "<data:blog.url.canonical.jsonEscaped/>",

  ......

  "hasPart": {
    "@id": "<data:blog.url.canonical.jsonEscaped/>#SiteNavigationElement"
  }
}