vue-metaを使用してVue.jsのメタデータを変更する方法
序章
vue-meta
ライブラリは、コンポーネントレベルからアプリケーションのメタデータを制御できるVueプラグインを提供します。
検索エンジン最適化(SEO)のためにWebアプリのメタデータをキュレートすることは重要ですが、単一ページのWebアプリケーション(SPA)を操作する場合、これは多くの場合面倒な作業になる可能性があります。 動的メタデータは、このvue-routerチュートリアルですでに部分的にカバーされています。
この記事では、vue-meta
プラグインがこれを簡潔かつ論理的な方法で処理すると同時に、アプリケーションのメタデータをさらに細かく制御する方法について説明します。
前提条件
この記事をフォローしたい場合は、次のものが必要になります。
- ある程度の知識 、
- Vue.jsプロジェクトの設定にある程度精通している。
このチュートリアルは、Node v15.8.0、npm
v7.5.4、Vue v12.6.11、およびvue-meta
v2.4.0で検証されました。
vue-meta
を使用する
まず、vue-meta
を使用するには、ターミナルを開き、既存のVueプロジェクトディレクトリに移動します。 次に、次のコマンドを実行します。
- npm install vue-meta@2.4.0
次に、コードエディタで、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
をブートストラップできます。
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-meta
とvue-router
がアプリケーションで使用できるようになります。
サーバーサイドレンダリングとの統合
サーバーサイドレンダリング(SSR)を使用している場合は、ルートVue
インスタンスが実行される前に、サーバーとクライアントの両方で実行されるファイルでvue-meta
をブートストラップする必要があります。マウントされています。
Vueフレームワークとの統合
NuxtJS など、すでにvue-meta
を使用しているフレームワークを使用している場合は、ブートストラップする必要はありません。 代わりに、選択したフレームワークのドキュメントを参照する必要があります。
すでにvue-meta
を使用している他のフレームワークには、 Gridsome 、 Ream 、 Vue-Storefront 、および FactorJSがあります。
プラグインオプションのカスタマイズ
vue-meta
は、プラグインの動作をカスタマイズするためのオプションを提供します。 NuxtJS
は、これを利用して、「metaInfo
」プロパティの名前を「head
」に変更します。
これを複製するには、vue-meta
をkeyName
でブートストラップします。
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
を定義することもできます。
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>
多くの場合、ページのcharset
、description
、viewport
など、ブラウザーまたはWebクローラーに渡す他の情報を含める必要があります。 ページのhtml
およびhead
タグに属性を追加することもできます。 また、外部スクリプトを挿入します。
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-meta
APIドキュメントのmetaInfoプロパティ仕様を確認してください。
親および子コンポーネントのmetaInfo
の動作を理解する
子コンポーネントは、メタデータを親と再帰的にマージします。 これにより、現在マウントされているコンポーネントに基づいてページのメタデータを更新できます。
App
コンポーネントは、title
およびtitleTemplate
が定義された親コンポーネントです。
<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
コンポーネントの子コンポーネントです。
<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
を無効にすることもできます。
export default {
name: 'HelloWorld',
metaInfo: {
title: 'Hello World!',
titleTemplate: null
}
}
このコードは、次の出力を生成します。
Output<title>
Hello World!
</title>
2つの子コンポーネントがマウントされ、両方にmetaInfo
が含まれている場合、最後にマウントされる子がページのメタデータの入力に使用されます。
HelloWorld2
という2番目の子コンポーネントを作成したとします。 前の例のように、App
コンポーネントを次のように変更します。
<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
とは異なります。 :
<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トピックページで演習とプログラミングプロジェクトを確認してください。