Nuxt.jsでOGPをSSRする。
バックエンドJavaでフロントがVue.jsのSPAなコンテンツを作っている時に、 APIで取ってきた値でOGPの値をバインドしてもSNSでクロールできず悲しい問題にあたってしまった。 ※こちらの記事でとてもわかりやすく現象がまとめられていた。
色々な手段がありそうでない中、そもそもSSRすれば確実でしょうなってことで検証がてらトライ。
せっかくVue.jsで構成されているフロントだったので、Nuxt.jsをチョイスしました。
Nuxt.js - ユニバーサル Vue.js アプリケーション
検証環境準備
npm, vue-cli入れる辺りは省略…
※nodeがv6.* 以上でないとnpm run dev でコケるのでnodeのversion要確認。
Running in Node v5.12.0 doesn't work · Issue #1276 · nuxt/nuxt.js · GitHub
公式で用意されているsampleを使ってやります。
$ vue init nuxt/starter nuxxxt ? Project name nuxxxt ? Project description Nuxt.js project ? Author pdo99 pdo@example.jp vue-cli · Generated "nuxxxt". To get started: cd nuxxxt npm install # Or yarn npm run dev
↑通りやっていきましょう。
起動
$ npm run dev DONE Compiled successfully in 6390ms 23:44:28 OPEN http://localhost:3000
起動できました。
vue-metaをつかってメタ情報をvueから書き換える
Nuxt.jsではnuxt.config.js
にこのアプリケーション共通の設定が追加できる。とのこと
例を参考にとりあえずtitleは「page名 - site名」か、くらいなのでそこだけ修正。
head: { title: '%s - nuxxxt', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: 'Nuxt.js project' } ],
ここで予めproperty: 'og:title'
みたいなのは特に追加せずとも,vue側で
export default { head: { title: 'TEST', meta: [ { property: 'og:title', content: 'Home page description' }, { hid: 'description', name: 'description', content: 'Home page description' } ] } }
といきなり突っ込んでみてもちゃんと
<head> <meta data-n-head="true" charset="utf-8"/> <meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1"/> <meta data-n-head="true" property="og:title" content="Home page description"/> <meta data-n-head="true" data-hid="description" name="description" content="Home page description"/> <title data-n-head="true">TEST</title> ...
と入れてくれていました。
コレでやるとpages/以下のvueすべてで↑みたいなのやらなきゃいけないので、head用のcomponentsを作って
:metaInfo=hogehoge
して呼び出すのがいいかなっておもいました。
まとめ
ローンチ前に知りたかった。
…とは言え、自分含め他のメンバーが学習コストを割いてまで採択するかはなんとも言えない感じです。 個人的にはVuejsに慣れてきたこともあってVueVue!フー!って感じで楽しいんですけどね。 SSRは勿論vue-metaやルーティングがいい感じだったり、 特に設定なくファイルの変更でリローディングしてくれたりと気が利く感じはビシバシ感じました、そういうの好きです!
まあこんなところです、こちらからは以上です。