ブログでSEO対策に大切なJSON-LD
2021年9月27日
2021年9月27日
JSON-LDとは
イメージとしては、HTMLのマークアップだけでは与えられない情報をJSON-LDを使って付与する。
というイメージかと思います。
これを入れておくことでSEO的に良いとされています。
下記のGoogleで詳しい仕組みが解説されているので、深く知りたい方は下記をみてください。
構造化データの仕組みについて | Google 検索セントラル | Google Developers
JSON-LDの書き方
<script type="application/ld+json">
{
'@context': 'http://schema.org/',
'@type': '####'
}
</script>
このように<script type="application/ld+json"></script>
で囲って記述していきます。
JSON-LDの確認方法
下記から、URL入力、コード入力の両方で確認できます。
リッチリザルト テスト - Google Search Console
このブログで記述しているJSON-LD
トップページ
{
"@context": "http://schema.org",
"@type": "Organization",
"logo": "https://kame.blog/icon-256x256.png",
"name": "かめ。ブログ",
"url": "https://kame.blog/",
"headline": "かめ。ブログ",
"description": "フロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。",
"author": {
"@type": "Person",
"name": "かめ"
}
}
https://search.google.com/test/rich-results?hl=ja&id=UhNxqB_RhOdGU-swR1lzBg
記事ページ
[
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "かめ。ブログ",
"item": "https://kame.blog/"
},
{
"@type": "ListItem",
"position": 2,
"name": "webのこと",
"item": "https://kame.blog/category/web"
},
{
"@type": "ListItem",
"position": 3,
"name": "フロントエンドやデザインを教えるメンター(Menta)はじめました。",
"item": "https://kame.blog/entry/menta"
}
]
},
{
"@context": "http://schema.org",
"@type": "Article",
"name": "フロントエンドやデザインを教えるメンター(Menta)はじめました。 - かめ。ブログ",
"headline": "フロントエンドやデザインを教えるメンター(Menta)はじめました。 - かめ。ブログ",
"datePublished": "2021-09-06T00:00:02.703Z",
"dateModified": "2021-09-21T04:16:16.612Z",
"url": "https://kame.blog/entry/menta",
"mainEntityOfPage": "https://kame.blog/entry/menta",
"image": [
"https://images.microcms-assets.io/assets/8d63ea55db89496cbf00ccb8c6bf8880/77d1b4678ce74e5889c234336b892507/menta.png"
],
"description": "Mentaを使って、Photoshop / Illustrator / Figma / HTML / CSS / Javascript / React / Vue / Nuxt / Next などのweb制作を教え始めました。",
"author": {
"@type": "Person",
"url": "https://kame.blog/profile/",
"name": "かめ"
},
"publisher": {
"@type": "Organization",
"name": "かめ",
"logo": {
"@type": "ImageObject",
"url": "https://kame.blog/image/abubu.png"
}
}
}
]
https://search.google.com/test/rich-results?hl=ja&id=nvnH4aOZbiNU_OAJaHdowg
カテゴリー
[
{
"@context": "http://schema.org",
"@type": "Organization",
"logo": "https://kame.blog/icon-256x256.png",
"name": "かめ。ブログ",
"url": "https://kame.blog/",
"headline": "かめ。ブログ",
"description": "フロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。",
"author": {
"@type": "Person",
"name": "かめ"
}
},
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "かめ。ブログ",
"item": "https://kame.blog/"
},
{
"@type": "ListItem",
"position": 2,
"name": "webのこと",
"item": "https://kame.blog/category/web"
}
]
}
]
https://search.google.com/test/rich-results?hl=ja&id=FsYifecy4m4Gk7NKLBvH9Q
タグ
[
{
"@context": "http://schema.org",
"@type": "Organization",
"logo": "https://kame.blog/icon-256x256.png",
"name": "かめ。ブログ",
"url": "https://kame.blog/",
"headline": "かめ。ブログ",
"description": "フロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。",
"author": {
"@type": "Person",
"name": "かめ"
}
},
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "かめ。ブログ",
"item": "https://kame.blog/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Next.js",
"item": "https://kame.blog/tag/nextjs"
}
]
}
]
https://search.google.com/test/rich-results?hl=ja&id=34ZVEzMCr41cOI06fgR5QQ
自己紹介
[
{
"@context": "http://schema.org",
"@type": "Organization",
"logo": "https://kame.blog/icon-256x256.png",
"name": "かめ。ブログ",
"url": "https://kame.blog/",
"headline": "かめ。ブログ",
"description": "フロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。",
"author": {
"@type": "Person",
"name": "かめ"
}
},
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "かめ。ブログ",
"item": "https://kame.blog/"
},
{
"@type": "ListItem",
"position": 2,
"name": "自己紹介",
"item": "https://kame.blog/profile"
}
]
}
]
https://search.google.com/test/rich-results?hl=ja&id=PBnrFNjpEnImFsuF129YZw
JSON-LDを生成しているコード(Typescript)
siteConfig.ts
export default { domain: 'https://kame.blog/', title: 'かめ。ブログ', description: 'フロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。', mainImage: 'https://kame.blog/image/mainImage.jpg', adminUser: 'かめ' }
jsonld.ts
import { Entry } from '~/components/entry/Entry' import siteConfig from 'const/siteConfig'export const generateCommonJsonld = (option?: { title?: string }) => { const t =
${option?.title ?
${option?.title} -: ''}${siteConfig.title}
|| siteConfig.title return { '@context': 'http://schema.org', '@type' : 'Organization', 'logo':${siteConfig.domain}icon-256x256.png
, 'name': t, 'url': siteConfig.domain, 'headline': siteConfig.title, 'description': siteConfig.description, 'author': { '@type': 'Person', 'name': siteConfig.adminUser }, } }export const generateEntryJsonld = (entry: Entry) => { const path =
entry/${entry.id}
const url =${siteConfig.domain}${path}
const imageUrl = entry.image?.url ||${siteConfig.domain}image/mainImage.jpg
const t =${entry.title ?
${entry.title} -: ''}${siteConfig.title}
|| siteConfig.titlereturn [ generateEntryBreadcrumbList(entry), { '@context': 'http://schema.org', '@type': 'Article', name: t, headline: t, datePublished: entry.publishedAt, dateModified: entry.updatedAt, url: url, mainEntityOfPage: url, image: [imageUrl], description: entry.description, author: { '@type': 'Person', url:
${siteConfig.domain}profile/
, name: siteConfig.adminUser, }, publisher: { '@type': 'Organization', name: siteConfig.adminUser, logo: { '@type': 'ImageObject', url:${siteConfig.domain}image/abubu.png
, }, }, } ] }export const generateBreadcrumbList = (option: { name?: string, url: string }) => { const base = { '@context': 'https://schema.org', '@type': 'BreadcrumbList', 'itemListElement': [{ '@type': 'ListItem', 'position': 1, 'name': siteConfig.title, 'item': siteConfig.domain }] }
base.itemListElement.push({ '@type': 'ListItem', 'position': 2, 'name': option.name || '', 'item':
${siteConfig.domain}${option.url}
})return base }
export const generateEntryBreadcrumbList = (entry: Entry) => { const base = { '@context': 'https://schema.org', '@type': 'BreadcrumbList', 'itemListElement': [{ '@type': 'ListItem', 'position': 1, 'name': siteConfig.title, 'item': siteConfig.domain }] }
const category = entry.categories![0]
if (category?.id) { base.itemListElement.push({ '@type': 'ListItem', 'position': 2, 'name': category.label, 'item':
${siteConfig.domain}category/${category.value}
}) }base.itemListElement.push({ '@type': 'ListItem', 'position': category ? 3 : 2, 'name': entry.title, 'item':
${siteConfig.domain}entry/${entry.id}
})return base }
参考リンク
まとめ
SEO対策にも、JSON-LDは大切になってきます。
ページ一つ一つに対して考えて設定していきたいですね。
今回はブログを作る時のJSON-LDについて書きました。
サイトによって記載するべきJSON-LDも変わってくるので、その時々で気をつけて
記述していきたいですね。