かめ。ブログ

フロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。

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

おすすめの本

Javascriptを勉強する際に読んでおくと良いなと思った本たちです。
特にリーダブルコードは綺麗なコードを書く考え方が身に付きます。いまでもその考え方が根付いています。

よくみられてる記事