ブログでSEO対策に大切なJSON-LD

2021年9月27日

webのこと

web設定

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.title
return [
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も変わってくるので、その時々で気をつけて
記述していきたいですね。

かめ。ブログ

ブログでSEO対策に大切なJSON-LD

JSON-LDとは

JSON-LDの書き方

JSON-LDの確認方法

このブログで記述しているJSON-LD

トップページ

記事ページ

カテゴリー

タグ

自己紹介

JSON-LDを生成しているコード（Typescript）

siteConfig.ts

jsonld.ts

参考リンク

まとめ

前の記事

辛くて美味しい麻婆豆腐の作り方

次の記事

NextとmicroCMSでの「前の記事」「次の記事」の実装方法

おすすめの本

よくみられてる記事

microCMS × Reactで吹き出しで会話してるUIを作る

HTML,CSSを覚えたあとにこれだけでも覚えておくと便利なJavascript

【模写・Photoshopデータ配布】パララックス効果を使ったサイト作成「full bloom」

フロントエンドやデザインを教えるメンター（Menta）はじめました。

VScode ChatGPT genieでコミットメッセージ作成やレビューをしてもらう

modalはdialogを使えばいい

gridでよくあるヘッダーの作り方

bunについて少しだけ、つまづいたところなど

iColudでMarkdownファイルを管理してメモアプリとして使う