nuxt composion-api로 동적 페이지의 OGP 설정

블로그 등 동적으로 생성된 페이지에 OGP를 부여한 경우가 있다고 생각합니다.
option API로 하는 방법은 검색이 많지만 nuxt-composion-api로 하는 방법이 없어서 기재했습니다.

설치 방법

useMeta를 이용하여 페이지에 메타 정보를 설정

<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>