シェル(@takasqr)のブログ

Vue.js で head タグを設置する

Vue3 で<head>タグを制御するには Unhead というパッケージを使うのがメジャーな方法なようです。 Unhead は Nuxt3 でも採用されています。

やり方

試しに noindex を設置してみます。

パッケージをインストール

npm install @unhead/vue

パッケージを読み込む

import { createApp } from 'vue'
import { createHead } from '@unhead/vue'

const app = createApp()

const head = createHead()
app.use(head)

app.mount('#app')

ページごとに設置

<script setup lang=ts>
import { useHead } from '@unhead/vue'

useHead({
 meta: [
   { name: 'robots', content: 'noindex' }
 ]
})
</script>

Install Vue Unhead | Unhead

title & description

useHead({
  meta: [
    { name: 'title', content: 'シェルの技術ブログ' },
    { name: 'description', content: 'シェル(@takasqr)の技術ブログです。' },
  ],
})

Open Graph(OGP)

useHead({
  meta: [
    // Open Graph
    { property: 'og:url', content: 'https://blog.takasqr.dev/' },
    { property: 'og:title', content: 'シェルの技術ブログ' },
    { property: 'og:description', content: 'シェル(@takasqr)の技術ブログです。' },
    { property: 'og:image', content: 'https://blog.takasqr.dev/ogp_image.jpg' }
  ],
})

Google Tag Manager(GTM)

GTM の ID は.envで設定しています。

useHead({
  script: [
    {
      innerHTML: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                  })(window,document,'script','dataLayer','${process.env.GTM_ID}');` 
    }
  ],
  noscript: [
    {
      innerHTML: `<iframe src="https://www.googletagmanager.com/ns.html?id=${process.env.GTM_ID}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
      tagPosition: 'bodyOpen'
    }
  ]
})

Twitter(X) Card

useHead({
  meta: [
    // Twitter Card
    { name: 'twitter:card', content: 'summary_large_image' },
    { name: 'twitter:site', content: '@takasqr' },
    { name: 'twitter:creator', content: '@takasqr' },
  ],
})

サムネイル

useHead({
  meta: [
    { name: 'thumbnail', content: 'https://blog.takasqr.dev/thumbnail.jpg' }
  ],
})