nuxt/contentでOGPを生成する
2020-09-24
# knowledgeOGPを作ります。
こういうやつ。
nuxtのOGPについてはこの記事が詳しいです。
nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい
nuxt/contentでは動的にコンテンツを生成しているので、各ページで自動でmetaタグを設定できるようにしたいです。まずはmixinファイルを作成します。
assets/mixins/meta.js
export default {
data() {
return {
meta: {
title: "",
type: "",
url: "",
},
// ベースとなるurl。自分の環境に合わせてください。
base: "https://hukurouo.web.app"
};
},
head() {
// 相対パスを取得。例えば'/item/1'とか
const path = this.$route.path;
// ここでmetaの中身を更新
this.meta.title = this.articles.title;
this.meta.type = "article";
this.meta.url = this.base + path;
// ここから先でmetaタグを書いていく
return {
title: this.meta.title,
meta: [
{ hid: "og:title", property: "og:title", content: this.meta.title },
{ hid: "og:type", property: "og:type", content: this.meta.type },
{ hid: "og:url", property: "og:url", content: this.meta.url },
{ name: "twitter:title", content: this.meta.title },
{ name: "twitter:text:title", content: this.meta.title }
]
};
}
};
あとはこれを_slug
でimportして起動させます。
pages/articles/_slug.vue
import Meta from '~/assets/mixins/meta'
export default {
async asyncData ({ $content, params }) {
const articles = await $content('articles', params.slug || 'index').fetch()
const [prev, next] = await $content('articles')
.only(['title', 'slug'])
.sortBy('createdAt', 'asc')
.surround(params.slug)
.fetch()
return { articles, prev, next }
},
mixins: [Meta],
}
これにて完了。
Card validator でURLを打ち込むと、twitterでのOGPが確認できます。