Nuxt.jsでOGPをSSRする。

バックエンドJavaでフロントがVue.jsのSPAなコンテンツを作っている時に、 APIで取ってきた値でOGPの値をバインドしてもSNSでクロールできず悲しい問題にあたってしまった。 ※こちらの記事でとてもわかりやすく現象がまとめられていた。

cly7796.net

色々な手段がありそうでない中、そもそも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

f:id:pdo99:20170913013932p:plain 起動できました。

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やルーティングがいい感じだったり、 特に設定なくファイルの変更でリローディングしてくれたりと気が利く感じはビシバシ感じました、そういうの好きです!

まあこんなところです、こちらからは以上です。