nuxt3でuseHeadの書き方まとめ
2022-10-22 2022-10-27
nuxt3
はじめに
nuxt3でheadの情報を設定したかったので調べました。
nuxt3のバージョンは3.0.0-rc.12で試してみました。
useHead使い方
nuxt3でtitleやmeta情報などを設定するにはuseHeadを使って設定します。
useHeadは下のように使います。
<script setup></script>の中で useHead関数を使い、引数でtitleなどの情報を指定します。
<script setup lang="ts">
useHead({
// タイトル。<title></title>
// ブラウザのタイトル欄に表示される
title: "タイトル",
// タイトルテンプレート。 タイトルをカスタマイズ出来る
// サイト名をタイトルの後ろに付けたりするときに使える
titleTemplate: (title) => `${title} | サイト名`,
htmlAttrs: {
// htmlのlang属性。<html lang='ja'></html>
// 日本語だと'ja'、英語だと'en'
lang: "ja",
},
// link要素。 <link/>
link: [
// アイコン
// <link rel="icon" type="image/x-icon" href="/favicon.ico">
{
rel: "icon",
type: "image/x-icon",
href: "/favicon.ico",
},
// 正規URLを指定。例としてhttps://example.com/のURLを入れている。
// <link rel="canonical" href="https://example.com/">
{
rel: "canonical",
href: "https://example.com/",
},
],
// meta要素。<meta/>
meta: [
// charsetの指定。初期utf-8なので変更しないなら書く必要なし
{
charset: "utf-8",
},
// 説明。
// <meta name="description" content="説明">
{ name: "description", content: "説明" },
// OGP関連
// <meta property="og:locale" content="ja_JP">
{
property: "og:locale",
content: "ja_JP",
},
// <meta property="og:title" content="タイトル">
{
property: "og:title",
content: "タイトル",
},
// <meta property="og:description" content="説明">
{
property: "og:description",
content: "説明",
},
// <meta property="og:site_name" content="サイト名">
{
property: "og:site_name",
content: "サイト名",
},
// <meta property="og:type" content="article">
{
property: "og:type",
content: "article", // 'website','article','book'など,
},
// <meta property="og:url" content="https://example.com/">
{
property: "og:url",
content: "https://example.com/", // URL
},
// <meta property="og:image" content="<<画像URL>>">
{
property: "og:image",
content: "<<画像URL>>",
},
// <meta property="og:image:width" content="500">
{
property: "og:image:width",
content: "500", // 画像横幅
},
// <meta property="og:image:height" content="600">
{
property: "og:image:height",
content: "600", //画像縦幅
},
// Twitter関連
//https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started
{
name: "twitter:card",
content: "summary", // summary, summary_large_image, app, player
},
],
});
</script>