metaタグに情報を追加する
投稿日:2020年10月9日
更新日:2020年10月9日
App.vueで設定する
参考にしたのはGridsomeでイチからブログを作る - metaタグやOGPを最適化するのサイトです。
方法としては、main.jsに記述する方法もありますが、App.vueに記載したほうが便利っぽい(?)のでApp.vueに記述する方法でやってみます。
脱線しますが、Populating headに外部のCSSやJSの読み込み方記載されてた…ほほぅ
App.vueファイルを作る
新しく「App.vue」を/scr/直下に作ります。
思考錯誤の末にこうなりました。
<template>
<router-view />
</template>
<static-query>
query {
metadata {
siteName
siteDescription
pageUrl
pageTitle
siteOgImage
siteOgType
}
}
</static-query>
<script>
export default {
metaInfo() {
return {
meta: [
{
key: 'description',
name: 'description',
content: this.$static.metadata.siteDescription
},
{
key: 'og:site_name',
property: 'og:site_name',
content: this.$static.metadata.siteName,
},
{
key: 'og:url',
property: 'og:url',
content: this.$static.metadata.pageUrl,
},
{
key: 'og:title',
property: 'og:title',
content: this.$static.metadata.pageTitle,
},
{
key: 'og:description',
property: 'og:description',
content: this.$static.metadata.siteDescription,
},
{
key: 'og:image',
property: 'og:image',
content: this.$static.metadata.siteOgImage,
},
{
key: 'og:type',
property: 'og:type',
content: this.$static.metadata.siteOgType,
},
{
name: 'twitter:card',
content: 'summary',
},
]
}
}
}
</script>
「viewport」や「charset」の指定はすでに表示されていましたので、それ以外を追加しました。
「description」とOGタグ回りですね。
ページによって変更されるものは「key」を指定します。と記載があったので、変更しそうなものは「Key」の指定を入れました。
デフォルトの設定をgridsome.config.jsで指定します
module.exports = {
siteName: 'Gridsomeでいこう!',
metadata: {
siteName: 'Gridsomeでいこう!',
siteUrl: 'https://quirky-noyce-a7e03d.netlify.app/',
siteDescription: 'かなり思い付きで立ち上げましたが、時代はJamstackへ…という流れも感じつつ。軽いノリで「Gridsome」やってみっか!というスタンスで始めています。',
pageUrl: 'index.html',
pageTitle: 'Gridsomeでいこう!',
siteOgImage: 'https://quirky-noyce-a7e03d.netlify.app/og.png',
siteOgType: 'article',
},
plugins: [
---以下省略
で、OGImageの画像ってどこに入れるわけ?
勝手に「assets」かな~と思って入れてたんですが、サッパリ表示されません!!
私の画像どこーーー!!
画像は…「/static/」ディレクトリに入れます。
「/static/」内に入ってたmdにキッチリ書いてたわ。。。
Add static files here. Files in this directory will be copied directly to
dist
folder during build. For example, /static/robots.txt will be located at https://yoursite.com/robots.txt.This file should be deleted.
そんなわけで言われた通り、画像場所は「/gridsome-site-starter/static/og.png」に入れ。
上記のmdファイルは削除すべきって書いてるので削除。
https://quirky-noyce-a7e03d.netlify.app/og.png
↑
無事画像を確認できました~!
各ページの設定は各テンプレートに記載
デフォルトの指定はしたので、各ページごとに上書きしたいものだけ、各テンプレートに記載していきます。
↓トップぺージの場合は、typeだけ変更したかったので、こんな感じ。
「index.vue」のテンプレートタグの下に入れる。
<script>
export default {
metaInfo() {
return {
meta: [
{
key: 'og:type',
property: 'og:type',
content: 'website',
},
]
}
}
}
</script>
↓私についての場合は、もうちょっとイロイロ上書きしています、こんな感じ。
「about.vue」のテンプレートタグの下に入れる。
メタ情報を上書きする前に「static-query」で「gridsome.config.js」で指定した「siteName」と「pageUrl」を呼び出しています。
呼び出さないと「ないぞー」って怒られます…
<static-query>
query {
metadata {
siteName
pageUrl
}
}
</static-query>
<script>
export default {
metaInfo() {
return {
meta: [
{
key: 'description',
name: 'description',
content: 'このサイト「Gridsomeでいこう!」を制作している私についてのページです。',
},
{
key: 'og:url',
property: 'og:url',
content: this.$static.metadata.pageUrl+'/about/',
},
{
key: 'og:title',
property: 'og:title',
content: 'わたしについて'+ ' | ' + this.$static.metadata.siteName,
},
{
key: 'og:description',
property: 'og:description',
content: 'このサイト「Gridsomeでいこう!」を制作している私についてのページです。',
},
]
}
}
}
</script>
記事ページのテンプレートはどうなる?
/step/以下にあるmdファイルで更新している記事のテンプレートは「/src/templates/StepPost.vue」です。
こっちは、「page-query」で呼び出している情報を使うことによって各ページのメタ情報を各ページごとに変えます。
「page-query」に「path」を追加しました。
<page-query>
query StepPost($id: ID!) {
stepPost(id: $id) {
title
path
tag
createdAt (format: "YYYY年M月D日")
updatedAt (format: "YYYY年M月D日")
content
}
}
</page-query>
<static-query>
query {
metadata {
siteName
pageUrl
}
}
</static-query>
<script>
export default {
metaInfo() {
return {
meta: [
{
key: 'description',
name: 'description',
content: this.$page.stepPost.title+'の記事ページです。軽いノリで「Gridsome」やってみっか!というスタンスで始めています。',
},
{
key: 'og:url',
property: 'og:url',
content: this.$static.metadata.pageUrl+this.$page.stepPost.path,
},
{
key: 'og:title',
property: 'og:title',
content: this.$page.stepPost.title + ' | ' + this.$static.metadata.siteName,
},
{
key: 'og:description',
property: 'og:description',
content: this.$page.stepPost.title+'の記事ページです。軽いノリで「Gridsome」やってみっか!というスタンスで始めています。',
},
]
}
}
}
</script>
各ページごとにメタ情報を変更することができましたーーー