Nuxt.jsの最大のメリットであるサーバーサイドレンダリング(SSR)。
Vue.jsのみでつくるシングルページアプリケーション(SPA)の弱点であったサーバーサイドでレンダリングできないという点が解消されたため、
- titleやdescriptionなどのページ情報がクローラーに正しく認識されるようになった
- OGPタグが設定できるようになったため、twitterやfacebookなどのシェア用の情報が設定できるようになった
というメリットがNuxt.jsによって提供されるようになりました。
今回は、titleやdescription、OGPタグといったHTMLのhead情報をNuxt.jsで設定する方法を紹介します。
共通設定する場合
ページすべてで使う設定は、nuxt.config.jsファイルに記述します。
nuxt.config.jsファイルの
|
1 2 3 4 5 6 7 8 9 10 11 |
head: { title: pkg.name, meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: pkg.description } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, ] }, |
の部分の記述を変更して、設定していきます。
例えば、簡易的なwebページを作成していて、全ページ
- titleは【TEST WEB APP】
- descriptionは【TEST WEB APP DESCRIPTION】
- ogp titleは【TEST OGP TITLE】
に設定したい場合、
|
1 2 3 4 5 6 7 8 9 10 11 12 |
head: { title: 'TEST WEB APP', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { property: 'og:title', content: 'TEST OGP TITLE' }, { hid: 'description', name: 'description', content: 'TEST WEB APP DESCRIPTION' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, |
となります。
各ページごとに設定する
共通設定はnuxt.config.jsファイルで設定できますが、実際の運用ではページごとにOGPタグやTDK情報を設定したいもの。
ページごとにheadタグの情報を設定するには、pages配下の.vueファイルに
|
1 2 3 4 5 |
export default { head: { title: 'top ページ' } }; |
と記述すれば、各ページそれぞれの設定が可能です。
※descriptionやOG title等も同じように設定できます。
SPAのサイトが増えてくるかも！
シングルページアプリケーション(SPA)のサイトがあまり多くなかった理由は
- 技術的ハードルが高い
- SSRできないのでSEO対策やSNSマーケティングに不向き
という２つの大きな理由がありました。
しかし、Nuxt.jsの登場によって、２つめのSSRできないという欠点がなくなり、技術的課題が解決されればSPAサイトを実運用で使えるようになっています。
SPAはページ遷移スピードが格段に早く、従来のサイトにはできない動きをユーザーに提供できるためUXが格段に向上します。
これからSPAで作られた面白いサイトが増えてくるといいですね１
