Nuxt初心者に多いtitle設定の間違い
NuxtでWebサイトを制作しているとページごとにtitleを変更したり、サイト名をタイトルの末尾に追加したりする機会があります。
Nuxt初心者の場合、titleの設定方法を間違えて正しく設定できていないケースがあります。
この記事ではNuxtでtitleを設定するときによくある3つの間違いを紹介します。
1. useHeadでtitleだけ使用する
以下のようにuseHeadでtitleを指定すれば、titleが「マイページ | 株式会社サンプル」になります。
mypage.vue
<script setup lang="ts">
useHead({
title: 'マイページ | サイトタイトル'
})
</script>しかし、このようにtitleに設定すると「| サイトタイトル」を必ず記載しなければならなくなるため、手間や記述ミスが増える原因になります。
2. titleTemplateで%sを使用する
app.vueのtitleTemplateで%sを使用すると、ほかのページでuseHeadにtitleが設定されている場合はtitleが「マイページ | サイトタイトル」になります。
app.vue
<script setup lang="ts">
useHead({
titleTemplate: '%s | サイトタイトル'
})
</script>mypage.vue
<script setup lang="ts">
useHead({
title: 'マイページ'
})
</script>しかし、これだとトップページが「| サイトタイトル」になってしまいます。
トップページの場合はtitleに「サイトタイトル」だけが表示されるのが一般的なので、これでは実装できません。
3. Nuxt公式サイトのコードを使用する
Nuxt公式サイトのドキュメントにはtitleTemplateを使用した以下のコードが記載されています。
app.vue
<script setup lang="ts">
useHead({
// or as a function
titleTemplate: (productCategory) => {
return productCategory
? `${productCategory} - Site Title`
: 'Site Title'
},
})
</script>Nuxt公式サイトに記載されているコードなので正しいように見えますが、「TypeScriptなのに型が書かれていない」「Site Title」の文字列が2回記載されています。
以下のように型を付けて、サイトタイトルを定数として定義するほうが安全ですので、こちらのコードを使用することを推奨します。
app.vue
<script setup lang="ts">
useHead({
titleTemplate: (pageTitle?: string): string => {
const SITE_TITLE = 'サイトタイトル'
return pageTitle ? `${pageTitle} | ${SITE_TITLE}` : SITE_TITLE
}
})
</script>
