SPA(Vue.js)でのmetaタグ管理について

Question

vue.jsのmetaタグの管理について質問です。
VueRouterを用いて簡単なWEBサイトを制作しましたが、metaタグの管理で困っています。

例えばvue-cliから生成した構築環境だと.vueファイルをまとめて最終的に1つのhtmlに出力しているに過ぎないので、最初に指定されているindex.htmlのmetaタグがどのページにとんでも適用されており、ページごとに切り替える解決法はあるのでしょうか？

ページごとにあらかじめhtmlファイルを用意しておいて、それぞれmetaタグを書き分け一旦は解決できたのですが、このような事をしなければいけないのかと疑問に思ったしだいです。

Nuxt.jsを使用した方が静的ファイル生成もでき、metaの管理含めSEO的にも強いのでしょうか。
また、そもそもVue.jsは静的WEBサイトにおいて使用するにはあまり合わないのでしょうか？

Answer 1

Vue.jsでのメタタグ管理はvue-metaが有名です。
いわゆる「メタ情報」だけでなく、head要素に書き込めるタグもページごとに管理可能です。
Nuxt.jsでもheadオプションとして利用されています。

Nuxt.jsを使用した方が静的ファイル生成もでき、metaの管理含めSEO的にも強いのでしょうか。

Vue.jsはじめクライアントサイドのSPAが、SEOの観点でどれだけ有利になるかは、SPAそのものよりも、評価を下す検索エンジンのクローラーがJavaScriptで表示される要素を評価できるかなどに依存します。
Nuxt.jsなど、サーバーサイドでレンダリングされている方が、「確実にHTMLとして評価される」点で確かにSEOで有利になる可能性は大きいでしょう。

また、そもそもVue.jsは静的WEBサイトにおいて使用するにはあまり合わないのでしょうか？

「静的サイト」の定義が不明瞭ですが、少なくとも「共通部分を毎回ロードしなくてよい」などのメリットはあります。また、開発者の観点から言えば、jQueryよりも開発の効率は高いと思いますので、その分コンテンツの価値向上などに注力できるかもしれません。
結局のところ、ケースバイケースで、一概には言えません。「やってみて、計測して、分析して、効果がでていなければやめる」くらいの姿勢が(Web開発全般に)いいと思います。

Comments

[okpk]

わかりやすい回答をありがとうございました。
vue-metaの使い方勉強してみます。
Nuxtなら最初から組み込まれているので導入が楽なのですね。

確かにjQueryに頼らない開発ができるのはメリットでした。

[NozomuIkuta]

参考になったようでよかったです。