NuxtでuseHeadを使ってメタ情報を設定する方法
Vueを活用する中で、
「Nuxt」
のフレームワークを使用して、
既存で作っていたものを、
試しにリプレイスしようとしている。
そんな中で、
- useHead
を使って、
このような、
メタ情報を表示をするために、
設定を試した時のメモ。
ちなみに、
Nuxtのバージョンについても、
バージョン2系ではなく、
バージョン3系を導入して、
Nuxtを試している。
個人用の備忘録としてメモを残しておく。
Nuxt.jsの公式サイト
Nuxt.jsに関しては、
こちらのサイトを参考にしました。
リンクをメモ。
useHeadの公式情報
Nuxtの設定の中で、
useHeadについては、
SEO and Meta
のページに記載されています。
上記の公式サイトの中から、
メニューで検索してもらっても大丈夫ですが、
以下にリンクをメモ。
useHeadを試す
上記ページに記載があるので、
そちらを最新情報については、
確認して頂くと良いです。
実際に自分が試した時のメモ。
公式サイトによると、
という書き方で、
TypeScriptで実装できます。
自分の環境だと、
JavaScriptで試しているので、
上記に加えて、
リンクタグについても、
動かすパターンがこちら。
こちらを動かすと、

このように、
タイトルがうまく変更されました。
メタ情報なども、
検証ツールで確認してみると、

このように、
うまくメタ情報が設定されていますね。
就職/転職に向けてスキルを高めるために
プログラミングのスキルを高めるために、
以下のサイトを参考にしてみてください。
おすすめ書籍
コメント一覧
コメントはまだありません。
コメントを残す