Nuxt.js（Vue）でイベントの構造化データ マークアップの書き方と例

Nuxt.js（vue）でイベントの構造化データ マークアップの書き方と例になります。
JSON-JDやmicrodataと言った書き方がありますが、本記事ではJSON-JDの例になります。

Nuxt.js（Vue）でイベントの構造化データ マークアップの書き方

<script>
export default {
  head() {
    return {
      __dangerouslyDisableSanitizers: ['script'],
      script: [
        {
          innerHTML: `{
            "@context": "http://schema.org",
            "@type": "Event",
          }`,
          type: 'application/ld+json'
        }
      ]
    }
  }
}
</script>

headの中に記載していきます。

Nuxt.js（vue）でイベントの構造化データ マークアップの例

<script>
export default {
  data() {
    return {
      name: 'demo',
      description: 'demo',
      img: 'https://demo.jp/demo.jpg'
    }
  },
  head() {
    return {
      __dangerouslyDisableSanitizers: ['script'],
      script: [
        {
          innerHTML: `{
            "@context": "http://schema.org",
            "@type": "Event",
            "name": "${this.name}",
            "description": "${this.description}",
            "startDate": "2021-01-28T15:00+09:00",
            "endDate": "2021-01-28T18:00+09:00",
            "eventAttendanceMode":
              "https://schema.org/OfflineEventAttendanceMode",
            "eventStatus": "https://schema.org/EventScheduled",
            "location": {
              "@type": "VirtualLocation",
              "url": "https://demo.jp"
            },
            "offers": {
              "@type": "Offer",
              "price": "0",
              "priceCurrency": "JPY",
              "url": "https://demo.jp",
              "availability": "http://schema.org/InStock",
              "validFrom": "2021-01-24T10:00+09:00"
            },
            "performer": {
              "@type": "PerformingGroup",
              "name": "${this.name}"
            },
            "organizer": {
              "@type": "Organization",
              "name": "demo",
              "url": "https://demo.jp"
            },
            "image": "${this.image}"
          }`,
          type: 'application/ld+json'
        }
      ]
    }
  }
}
</script>

上記がNuxt.js(Vue)イベントの構造化データ マークアップの例になります。
構造化データについては、下記が参考になります。
https://developers.google.com/search/docs/data-types/event?hl=ja