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

Vueを活用する中で、

「Nuxt」

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

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

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

そんな中で、

  • useHead

を使って、

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

このような、

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

設定を試した時のメモ。

ちなみに、

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

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

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

Nuxtを試している。

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

Nuxt.jsの公式サイト

Nuxt.jsに関しては、

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

リンクをメモ。

useHeadの公式情報

Nuxtの設定の中で、

useHeadについては、

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>

こちらを動かすと、

このように、

タイトルがうまく変更されました。

メタ情報なども、

検証ツールで確認してみると、

このように、

うまくメタ情報が設定されていますね。

スキルを使って、就職/転職/副業する時のサイト

プログラミングのスキルなどを、自分なりに高めた上で、

自分のスキルをアピールして就職や転職を行い、年収をあげるか、

副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。

まずはできる範囲で取り組むことで、

少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。

おすすめ書籍

スポンサー

人気記事

おすすめ記事