序章

vue-metaライブラリは、コンポーネントレベルからアプリケーションのメタデータを制御できるVueプラグインを提供します。

検索エンジン最適化(SEO)のためにWebアプリのメタデータをキュレートすることは重要ですが、単一ページのWebアプリケーション(SPA)を操作する場合、これは多くの場合面倒な作業になる可能性があります。 動的メタデータは、このvue-routerチュートリアルですでに部分的にカバーされています。

この記事では、vue-metaプラグインがこれを簡潔かつ論理的な方法で処理すると同時に、アプリケーションのメタデータをさらに細かく制御する方法について説明します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

このチュートリアルは、Node v15.8.0、npm v7.5.4、Vue v12.6.11、およびvue-metav2.4.0で検証されました。

vue-metaを使用する

まず、vue-metaを使用するには、ターミナルを開き、既存のVueプロジェクトディレクトリに移動します。 次に、次のコマンドを実行します。

  1. npm install vue-meta@2.4.0

次に、コードエディタで、main.jsファイルを開き、プラグインをブートストラップします。

src / main.js
import Vue from 'vue'
import VueMeta from 'vue-meta'
import App from 'App.vue'

Vue.use(VueMeta)

new Vue({
  render: h => h(App),
}).$mount('#app')

変更を保存すると、vue-metaがアプリケーションで使用できるようになります。

Vueルーターとの統合

vue-router のようなルーティングソリューションを使用している場合は、router/index.jsファイルでvue-metaをブートストラップできます。

src / router / index.js
import Vue from 'vue'
import Router from 'vue-router'
import VueMeta from 'vue-meta'

Vue.use(Router)
Vue.use(VueMeta)

export default new Router({})

変更を保存すると、vue-metavue-routerがアプリケーションで使用できるようになります。

サーバーサイドレンダリングとの統合

サーバーサイドレンダリング(SSR)を使用している場合は、ルートVueインスタンスが実行される前に、サーバーとクライアントの両方で実行されるファイルでvue-metaをブートストラップする必要があります。マウントされています。

Vueフレームワークとの統合

NuxtJS など、すでにvue-metaを使用しているフレームワークを使用している場合は、ブートストラップする必要はありません。 代わりに、選択したフレームワークのドキュメントを参照する必要があります。

すでにvue-metaを使用している他のフレームワークには、 Gridsome Ream Vue-Storefront 、および FactorJSがあります。

プラグインオプションのカスタマイズ

vue-metaは、プラグインの動作をカスタマイズするためのオプションを提供します。 NuxtJSは、これを利用して、「metaInfo」プロパティの名前を「head」に変更します。

これを複製するには、vue-metakeyNameでブートストラップします。

src / main.js
import Vue from 'vue'
import VueMeta from 'vue-meta'
import App from 'App.vue'

Vue.use(VueMeta, {
  keyName: 'head'
})

new Vue({
  el: '#app',
  render: h => h(App)
})

公式ドキュメントで利用可能なオプションの完全なリストを確認してください。

メタデータの入力

vue-metaを使用すると、親コンポーネントと子コンポーネントの両方で<title>タグを更新できます。 ルートコンポーネントで、子コンポーネントにタイトルがない場合に表示されるデフォルトのタイトルを定義できます。 子コンポーネントのタイトルを表示するために使用されるtitleTemplateを定義することもできます。

src / App.vue
export default {
  name: 'App',
  metaInfo: {
    title: 'Default App Title',
    titleTemplate: '%s | vue-meta Example App'
  },
  // ...
}

このtitleTemplateは、次の<title>を生成します。

Output
<title> Default App Title | vue-meta Example App </title>

多くの場合、ページのcharsetdescriptionviewportなど、ブラウザーまたはWebクローラーに渡す他の情報を含める必要があります。 ページのhtmlおよびheadタグに属性を追加することもできます。 また、外部スクリプトを挿入します。

src / App.vue
export default {
  name: 'App',
  metaInfo: {
    title: 'Default App Title',
    titleTemplate: '%s | vue-meta Example App',
    htmlAttrs: {
      lang: 'en-US'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'description', content: 'An example Vue application with vue-meta.' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  },
  // ...
}

このコードは、次の出力を生成します。

Output
<html lang="en-US"> <head> <title>Default App Title | vue-meta Example App</title> <meta charset="utf-8"> <meta name="description" content="'An example Vue application with vue-meta."> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> </html>

使用可能なすべてのオプションについては、vue-metaAPIドキュメントのmetaInfoプロパティ仕様を確認してください。

親および子コンポーネントのmetaInfoの動作を理解する

子コンポーネントは、メタデータを親と再帰的にマージします。 これにより、現在マウントされているコンポーネントに基づいてページのメタデータを更新できます。

Appコンポーネントは、titleおよびtitleTemplateが定義された親コンポーネントです。

src / App.vue
<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  metaInfo: {
    title: 'Default App Title',
    titleTemplate: '%s | vue-meta Example App'
  },
  components: {
    HelloWorld
  }
}
</script>

HelloWorldコンポーネントは、titleが定義されたAppコンポーネントの子コンポーネントです。

src / components / HelloWorld.vue
<template>
  <div>Hello World!</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  metaInfo: {
    title: 'Hello World!'
  }
}
</script>

このコードは、次の出力を生成します。

Output
<title> Hello World! | vue-meta Example App </title>

子コンポーネントのtitleは、親のtitleをオーバーライドします。

次のように、子コンポーネントからtitleTemplateを無効にすることもできます。

src / components / HelloWorld.vue
export default {
  name: 'HelloWorld',
  metaInfo: {
    title: 'Hello World!',
    titleTemplate: null
  }
}

このコードは、次の出力を生成します。

Output
<title> Hello World! </title>

2つの子コンポーネントがマウントされ、両方にmetaInfoが含まれている場合、最後にマウントされる子がページのメタデータの入力に使用されます。

HelloWorld2という2番目の子コンポーネントを作成したとします。 前の例のように、Appコンポーネントを次のように変更します。

src / App.vue
<template>
  <div>
    <HelloWorld />
    <HelloWorld2 />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import HelloWorld2 from './components/HelloWorld2.vue'

export default {
  name: 'App',
  metaInfo: {
    title: 'Default App Title',
    titleTemplate: '%s | vue-meta Example App'
  },
  components: {
    HelloWorld,
    HelloWorld2
  }
}
</script>

HelloWorld2コンポーネントは、titleが定義されたAppコンポーネントの子コンポーネントであり、HelloWorldコンポーネントで定義されたtitleとは異なります。 :

src / components / HelloWorld2.vue
<template>
  <div>Hello World 2!</div>
</template>

<script>
export default {
  name: 'HelloWorld2',
  metaInfo: {
    title: 'Hello World 2!'
  }
}
</script>

このコードは、次の出力を生成します。

Output
<title> Hello World 2! | vue-meta Example App </title>

vue-metaで複数のVueインスタンスを使用すると、最後に更新されたアプリのメタデータのみが更新されます。

重複するメタデータのみが子コンポーネントによって上書きされます。 他のメタデータは連結されます。

vmidで独自のmetaInfo動作を強制する

vue-metaを使用すると、vmidという特別なプロパティをmetaInfoに割り当てて、コンポーネントツリーでの解決方法を制御できます。

親と子など、2つのメタデータセットが同じvmidを持っている場合、それらはマージされませんが、代わりに、子が親をオーバーライドします。

vmidが「description」でcontentが「Parentdescription」の親コンポーネントの例を次に示します。

Parent Component
{ metaInfo: { meta: [ { charset: 'utf-8' }, { vmid: 'description', name: 'description', content: 'Parent description.' } ] } }

そして、これは「説明」の同一のvmidと「子の説明」の異なるcontentを持つ子コンポーネントの例です。

Child Component
{ metaInfo: { meta: [ { vmid: 'description', name: 'description', content: 'Child description.' } ] } }

このコードは、次の出力を生成します。

Output
<meta charset="utf-8"> <meta data-vmid="description" name="description" content="Child description.">

子コンポーネントがvmidを親と共有し、metaInfoプロパティがnullに設定されている場合、このプロパティは親から削除されます。

子コンポーネントがmetaInfoプロパティに対してundefinedを返す場合、vue-metaは親のプロパティにフォールバックします。

結論

vue-metaは、アプリのメタデータを制御して動的に更新する場合に最適なソリューションです。

ライブラリが提供するすべての情報について詳しく知りたい場合は、公式ドキュメントを確認してください。

Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。