- サイト制作のノウハウと最適化を目指して-

2018.9.24【Nuxt.js】SSR+OGP対応をするために必要な設定(Twitter/Facebookサンプルコード付)

【Nuxt.js】SSR+OGP対応をするために必要な設定(Twitter/Facebookサンプルコード付)

Vue.jsではTwitter/FacebookのOGPを使えずNuxt.jsなら実現出来るよって記事はよくみますが、具体的な設定方法を記載しているのは無かったのでまとめてみます。


OGPの設定

HTMLのprefix設定方法

他のサイトで誰も設定していなかった内容がHTMLタグのprefix、The Open Graph
protocol
で推奨してる記述方法はhtmlタグに設定していますので私はこの記述方法で行なっています。

設定はシンプルでnuxt.jsの「nuxt.config.js」に次の記述をします

nuxt.config.js
module.exports = { head: { htmlAttrs: { prefix: 'og: http://ogp.me/ns#' }, } }

これでファイルをコンパイルするとhtmlタグにprefixが付与された形で出力されましたね。

index.html
<html prefix="og: http://ogp.me/ns#" data-n-head="prefix">...</html>

Twitter向けOGPタグの設定

metaタグの設定は各pageでCSS/Js同様記載すれば設定可能

次の例では実際にブログで記載しているコードになります。

index.html
export default { head() { return { meta: [ // OGP共通 { name: 'og:url', content: 'https://domain.com' + this.$route.path }, { name: 'og:title', content: this.title }, { name: 'og:description', content: this.description }, { name: 'og:image', content: this.img }, { name: 'og:type', content: 'article' }, // Twitter { name: 'twitter:card', content: 'summary' }, { name: 'twitter:site', content: '@アカウント名' },

Facebook向けOGPタグの設定

Facebook用のタグを追加した例になります。

index.html
export default { head() { return { meta: [ // OGP共通 { name: 'og:url', content: 'https://domain.com' + this.$route.path }, { name: 'og:title', content: this.title }, { name: 'og:description', content: this.description }, { name: 'og:image', content: this.img }, { name: 'og:type', content: 'article' }, // Facebook { name: 'fb:app_id', content: 'AppID(15文字半角英数)' }, { name: 'fb:admins', content: 'AdminId(15文字半角英数)' },

以上でOGPタグの設定が出来ました。メタタグ周りは他のサイトでも紹介していますが、htmlタグへのogp宣言が無かったので改めて紹介させていただきました。

今回の動作環境