Hugoで構造化データ(JSON-LD)に対応する【Google推奨SEO】
GoogleのWebマスター向けガイドラインの中の一つに「構造化データ: Google 検索デベロッパー ガイド」というものがあります。
構造化データは、検索エンジンが読みやすいように「json-ld」というデータ形式でそのページの概要等を記述したもので、ページのヘッダ内に記述します。
WordPressはこのあたりも考えて作られていますが、僕の使っているHugoというブログ作成ソフトは未対応のようなので、対応することにしました。
これで、このブログもGoogleに好かれる！
先に中身を磨け！
Googleの推奨する構造化データとは
Google 検索では、ページのコンテンツを理解するよう取り組んでいます。ページに構造化データを含めて、ページの内容についての明確な判断材料を提供すると、Google でそのページをより正確に理解できるようになります。構造化データとは、ページに関する情報を提供し、ページ コンテンツ（たとえばレシピのページでは、材料、加熱時間と加熱温度、カロリーなど）を分類するための標準化されたデータ形式です。
web 構造化データの仕組みについて | Google 検索デベロッパー ガイド | Google Developers
マークアップした情報は検索時に表示されるため、検索ユーザーの目を引くのにも役立ちますね。
(検索順位が上の方じゃないと表示されないようですが。。)
Hugoへの構造化データ導入
構造化データは「schema.org」というところで定義されていて、「json-ld」という書き方で書きます。
ブログの場合使える構造データは、
記事に対して
- 「BlogPosting(ブログ記事)」
- 「BreadcrumbList(パンくずリスト)」
サイト全体を通して
- 「Organization(組織)」
といったあたりです。
schema.htmlの作成
/layouts/partials/schema.htmlというファイルを作成して構造データのテンプレートを作ります。
今回は「ブログ記事」と「ブログ記事が属するカテゴリ=パンくずリスト」としてデータを作ります。
<script type="application/ld+json">
[
{{ if .IsPage }}
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": {{ .Title }},
"image": {{ .Params.image | absURL }},
"datePublished": {{ .PublishDate }},
"dateModified": {{ .Lastmod }},
"author": {
"@type": "Person",
"name": {{ .Site.Params.author.name }}
},
"mainEntityOfPage": { "@type": "WebPage" },
"publisher": {
"@type": "Organization",
"name": {{ .Site.Params.header }},
"logo": {
"@type": "ImageObject",
"url": {{ .Site.Params.logo }}
}
},
"description": {{ .Summary | plainify | safeHTML }},
"keywords": [{{ range $i, $e := .Params.tags }}{{ if $i }}, {{ end }}{{ $e }}{{ end }}]
},
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": {{ index .Params.categories 0 }},
"item": {{ path.Join (.Site.BaseURL) ("/categories/" | relLangURL) (index .Params.categories 0 | urlize) }}
}]
},
{{ end }}
{
"@context": "https://schema.org",
"@type": "Organization",
"name": {{ .Site.Params.header }},
"url": {{ .Site.BaseURL }},
"sameAs": [
"https://twitter.com/{{ .Site.Params.twitter }}"
]
}
]
</script>“@type”: “BlogPosting”, “@type”: “BreadcrumbList”, “@type”: “Organization”、のそれぞれのデータ構造を作っています。
.htmlの作成
/layouts/partials/_shared/head.htmlのヘッダ部分(
)/head»)にschema.htmlを読み込みます。<head>
...
...
<!-- json-ld -->
{{- partial "schema.html" . -}}
<!-- json-ld -->
</head>config.tomlへのパラメータ設定
テンプレートで使うパラメータをconfig.tomlに設定しておきます。
[params]
logo = "/images/logo.png"
header="enjoyall"
twitter="heisakusaku"
[params.author]
name = "へーさく"構造化データ(json-ld)が正しく動いているか試す
Googleがテスト用のサイトを用意しています。
構造化データ テストツール
ここに新しく生成されたページのURLを入れて右側に設定した構造化データが表示されればOKです。
enjoy!!
マイナスは入れられないの？