2020/05/20
NuxtJSでOGP対応
概要
NuxtJSベースのサイト(本サイトですが)にOGPタグを入れました。
以下を参考にしながら対応しました。
- The Open Graph protocol
- API: head プロパティ - NuxtJS
- いまさら聞けない!OGPとは? | ホームページ制作・作成なら大阪のweb制作.com
- OGP image 画像のサイズ仕様( 2020 年時点) | gotohayato.com
- Nuxt.js(v2.6.x)やっておきたい設定:その2/3|SEOに必要なmetaとogpの設定及びpwa(Manifest、Icon、Workbox)の設定 - Qiita
実施事項
modify global config
nuxt.config.js
headプロパティを修正していきます。
- htmlAttrsを追加しました
- metaタグに以下を追加しました
- og:site_name
- og:type (defaultはwebsiteで、子ページは’article’に上書きします)
- og:url
- og:title
- og:description
- og:image
- twitter:card
- linkにapple-touch-iconを追加しました
/*
** Headers of the page
*/
head: {
htmlAttrs: {
prefix: 'og: http://ogp.me/ns#'
},
titleTemplate: '%s - ' + process.env.APP_NAME,
title: process.env.APP_NAME || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || ''
},
{
hid: 'og:site_name',
property: 'og:site_name',
content: process.env.APP_NAME
},
{ hid: 'og:type', property: 'og:type', content: 'website' },
{ hid: 'og:url', property: 'og:url', content: process.env.BASE_URL },
{ hid: 'og:title', property: 'og:title', content: process.env.APP_NAME },
{
hid: 'og:description',
property: 'og:description',
content: process.env.npm_package_description || ''
},
{
hid: 'og:image',
property: 'og:image',
content: `${process.env.BASE_URL}/images/ogp/common.png`
},
{ name: 'twitter:card', content: 'summary_large_image' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{
rel: 'apple-touch-icon',
sizes: '180x180',
href: '/apple-touch-icon.png'
}
]
},
modify index(top) page
pages/index.vue
topページのタイトルは、サイト名だけになるようにtitleTemplateにはnullを設定しておきます。
export default {
head() {
const appName = this.$constants.appName
return {
titleTemplate: null,
title: appName
}
}
}
modify child page
pages/about.vue
子ページでは、上書きしたいmetaタグやtitleタグなどを上書きしていきます。
export default {
head() {
const title = 'About Us'
const description = '合同会社Kumanoteの企業情報です'
const baseUrl = this.$constants.baseUrl
return {
title,
meta: [
{ hid: 'og:title', property: 'og:title', title },
{ hid: 'og:type', property: 'og:type', content: 'article' },
{
hid: 'description',
name: 'description',
content: description
},
{
hid: 'og:description',
name: 'og:description',
content: description
},
{
hid: 'og:url',
property: 'og:url',
content: `${baseUrl}/about`
}
]
}
}
}
関連する記事
Nuxt2からNuxt3への移行とNextJSとNuxt3の比較について
弊社ホームページとブログサイトをNuxt2からNuxt3ベースに移行しました。
Nuxt.jsからNext.jsへのリニューアルを経て思うこと
Nuxt.jsからNext.jsへフルリニューアルしたことで見えてきた個人的なメリットとデメリットを整理します
NuxtJSにEditor.jsを導入
リッチでカスタマイズが自由なテキストエディタであるEditor.jsをNuxtJSのサイトに導入しました。
AOSをNuxtJSのサイトに導入する
スクロールアニメーションを簡単に実装できるAOSというライブラリをNuxtJSベースのサイトに導入しました