nuxt compostion-apiで動的ページのOGPを設定する

ブログなどで動的に生成されるページにOGPを付与した場合があると思います。
option APIでやる方法はたくさん検索で出るのですが、nuxt-compostion-apiでやる方法がなかったため記載します。

実装方法

• useMetaを利用して、ページ内にmeta情報を設定する

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  useAsync,
  useMeta,
} from '@nuxtjs/composition-api'

export default defineComponent({
  // useMetaを利用する場合、headを定義しておかないと怒られる
  head: {},
  setup() {
    const { meta } = useMeta()
    meta.value = [
      {
        hid: 'og:description',
        property: 'og:description',
        content: 'OGPの説明',
      },
      {
	hid: 'og:url',
	property: 'og:url',
	content: 'OGPのURL',
      },
      {
	hid: 'og:image',
	property: 'og:image',
	content: 'OGPの画像',
      },
    ]
  }
</script>