Nuxt.jsのSSGで動的ルーティングを含むサイトを作成していた時に、ページごとにLD-JSONの構造化データを設定するため、head要素内へ動的にスクリプトを挿入するケースがありました。Nuxt.jsではVue-metaというライブラリが含まれており、headメソッドというhead内の要素を個別で指定できる関数が用意されていて、これを使うことで手軽にhead要素内へスクリプトを追加することができるのですが、デフォルトではエスケープされてしまうようで、なかなか思うように設定することができませんでした。そこで、今回はLD-JSONの構造化データを設定するケースを例に、Nuxt.jsでhead要素内に動的にスクリプトを設定する時の対応をまとめておきたいと思います。   そもそも、Nuxt.jsではhead要素の中身は設定ファイルである「nuxt.config.js」の中の「head」キーの値として下記のように指定していきます。もちろんscript要素以外にも各種meta要素やlink要素などhead要素に含まれるものは全てこちらに記述しておきます。 【nuxt.config.js】※一部抜粋

export default {
  .....
  head: {
    script: [
      src: 'https://polyfill.io/v3/polyfill.min.js',
      async: true
    ]
  },
  .....
}

  全ページ共通など静的にコーディングされる場合にはこのような指定で問題ないですね。ただし、ページごとに個別で設定する場合には以下のように、ページコンポーネントにてheadメソッドで上書きで追加してあげる形になります。例えば、LD-JSONの構造化データの場合ですとこのようになります。「hid」でキーを指定して、「innerHTML」キーの値にはタグ内の文字列が入ります。 【pages/index.vue】※一部抜粋

<script>
  export default {
    .....
    head() {
      return {
        script: [
          {
            hid: 'ld-json',
            type: 'application/ld+json',
            innerHTML: `{
              "@context": "http://schema.org", 
              "@type": "BreadcrumbList", 
              "itemListElement": [ { "@type": "ListItem", "position": 1, "item": { "@id": "https://exmaple.com/", "name": "HOME" } } ]
            }`
          }
        ] 
      }
    },
    .....
  }
</script>

  この形で問題なくスクリプトが挿入されるように思っていたのですが、実際に確認すると下記のようにダブルクオーテーションマークがエスケープされてしまっていました。当然これはセキュリティを考慮した仕様で仕方ないのですが、この表記ですと、構造化データの形式をチェックするリッチリザルトテストでエラーが出てしまいます。

<script data-n-head="ssr" data-hid="ld-json" type="application/ld+json">
  {
    &quot;@context&quot;: &quot;http://schema.org&quot;, 
    &quot;@type&quot;: &quot;BreadcrumbList&quot;, 
    &quot;itemListElement&quot;: [ { &quot;@type&quot;: &quot;ListItem&quot;, &quot;position&quot;: 1, &quot;item&quot;: { &quot;@id&quot;: &quot;https://exmaple.com/&quot;, &quot;name&quot;: &quot;HOME&quot; } } ]
  }
</script>

  そこで、色々と調べてみるとエスケープさせずに出力するオプションが用意されているとのことです。その方法ですが「__dangerouslyDisableSanitizersByTagID」のキーを指定し、値には「hid」キーで指定した値をキーにして、エスケープの対象となるものを値に指定してあげる形になります。ここでは「innerHTML」が該当しますね。__dangerouslyDisableSanitizersByTagIDでは、hidキーで指定したものだけがエスケープの対象外として出力してくれるようになるので、セキュリティが担保されているとのことです。

head() {
  return {
    script: [
      {
        hid: 'ld-json',
        type: 'application/ld+json',
        innerHTML: `{
          "@context": "http://schema.org", 
          "@type": "BreadcrumbList", 
          "itemListElement": [ { "@type": "ListItem", "position": 1, "item": { "@id": "https://exmaple.com/", "name": "HOME" } } ]
        }`
      }
    ],
    __dangerouslyDisableSanitizersByTagID: {
      'ld-json': ['innerHTML']
    }
  }
},

  これで改めて確認してみると、先ほどエスケープされていた部分はそのまま文字列として表示されているのが確認できました。リッジリザルトテストでも問題なくクリアできますね。

<script data-n-head="ssr" data-hid="ld-json" type="application/ld+json">
  {
    "@context": "http://schema.org", 
    "@type": "BreadcrumbList", 
    "itemListElement": [ { "@type": "ListItem", "position": 1, "item": { "@id": "https://exmaple.com/", "name": "HOME" } } ]
  }
</script>

  ちなみに、scriptの指定でjsonキーを指定した場合、値にはJSONデータとなるオブジェクトをそのまま指定できるようです。innerHTMLで文字列として使う必要がない場合にはこちらの方がわかりやすそうですね。

head() {
  return {
    script: [
      {
        hid: 'ld-json',
        type: 'application/ld+json',
        json: {
          '@type': 'ListItem',
          'position',
          'item': {
            '@id': 'https://exmaple.com',
            'name': 'HOME'
          }
        }
      }
    ],
  }
}

 

---

  今回はhead要素に動的にscriptを埋め込む際にVue-metaを使った方法についてまとめてみました。エスケープされないようにするための方法を調べるまでちょっと時間がかかってしまったのですが、イレギュラーなケースだと思いますし、セキュリティのリスクにさらされることにもなるので、使う際には十分気をつけたいですね。   （参考にさせて頂いたサイト） Vue Meta - metaInfo properties nuxtでGTMタグをheadとbodyに埋め込む（非SPA、モジュール不使用、シンプル）