まず、個別ページにタイトルを設定しました。加筆していく予定です。
nuxtのvue-metaの使い方
vue-headやvue-metaというプラグインがありますが、nuxtが公式で推奨しているのはvue-metaです。
nuxtにvue-metaの機能が最初から入っているからインストールすらいりません。
nuxt.confingのheadの設定をそのまま個別ページにコピペすると使えます。それだけでブラウザのタイトルが変わるはず。
ただ、vue-metaのリファレンスを見るとうまく動きません。書き方が少し違うため注意が必要です。metainfoではなくheadなのです。
export default {
metainfo() {
return {
title: 'タイトル'
}
}
}export default {
head() {
return {
title: 'タイトル'
}
}
}タイトル + サイト名
SEO対策の都合上、タイトルのサイト名を表記するのがよくあるパターンです。
export default {
head: {
titleTemplate: '%s - サイト名',
}
}個別ページはreturnで返す形でいけます。
export default {
head() {
return {
title: 'ページ名'
}
}
}nuxt.jsでSpaのSEO対策
そのあと、nuxt側でprerender-spa-pluginの導入、まだ奥の手として、サブドメインにWordPressをインストールする2本立てでSEO対策を考えています。spaはseoが弱いからssrがよいとよく言われますが、そのぶん開発コストがかかります。作り直しの労力はかなり重たいでしょう。
WordPressの方はFirebase直下にサブディレクトリにWPは入らないようなので、サブドメインでスターサーバーやエックスサーバーなどを借りて共有サーバーで運用する必要があります。エックスサーバーの方が管理画面は使いやすいですが、個人的にはリーズナブルなスターサーバーのスランダードプランがおすすめです。スタードメインと併用すると割引になります。詳しくはこちらの記事をみてください。
ご参考になれば幸いです。