NuxtでuseHeadを使ってメタ情報を設定する方法

Vueを活用する中で、

「Nuxt」

のフレームワークを使用して、

既存で作っていたものを、

試しにリプレイスしようとしている。

そんな中で、

useHead

を使って、

<meta name="description" content="メタ情報">

このような、

メタ情報を表示をするために、

設定を試した時のメモ。

ちなみに、

Nuxtのバージョンについても、

バージョン２系ではなく、

バージョン３系を導入して、

Nuxtを試している。

個人用の備忘録としてメモを残しておく。

Nuxt.jsの公式サイト

Nuxt.jsに関しては、

こちらのサイトを参考にしました。

リンクをメモ。

Nuxtの公式サイト

useHeadの公式情報

Nuxtの設定の中で、

useHeadについては、

SEO and Meta

のページに記載されています。

上記の公式サイトの中から、

メニューで検索してもらっても大丈夫ですが、

以下にリンクをメモ。

Nuxtの公式サイト情報「SEO and Meta」ページ

useHeadを試す

上記ページに記載があるので、

そちらを最新情報については、

確認して頂くと良いです。

実際に自分が試した時のメモ。

公式サイトによると、

<script setup lang="ts">
useHead({
  title: 'My App',
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  bodyAttrs: {
    class: 'test'
  },
  script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
})
</script>

という書き方で、

TypeScriptで実装できます。

自分の環境だと、

JavaScriptで試しているので、

上記に加えて、

リンクタグについても、

動かすパターンがこちら。

<script setup>
useHead({
  title: 'タイトル',
  meta: [
    { name: 'description', content: '説明' },
  ],
  script: [ { src: 'https://example.com/script.js' } ],
  link: [{
    rel: 'stylesheet',
    href: 'https://example.com/style.css'
  }],
})
</script>

こちらを動かすと、