Google搜索结果可以以特殊样式展示结构性数据。实现这种效果的推荐结构化数据格式是 JSON-LD。
我的博客是使用hugo生成的，本来就是一个结构化的生成系统，再添加这种元数据应该是很简单方便的。
参考 schema-markup-for-hugo/ 这篇文章，在主题目录下的 partial 目录添加 site-schema.html 文件，然后再在 head.html 里引入这个文件即可。
site-schema.html 的内容是：
{{ "<!-- ENTERING partial seo-schema.html -->" | safeHTML }}
{{ if .IsHome -}}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "{{ .Site.BaseURL }}",
{{ if .Site.Author.name -}}
"author": {
"@type": "Person",
"name": "{{ .Site.Author.name }}"
},
{{- end }}
{{ if .Site.Params.description -}}
"description": "{{ .Site.Params.description }}",
{{- end }}
{{ with .Site.Params.image -}}
"image": "{{ .url | absURL }}",
{{- end }}
{{ with .Site.Params.logo -}}
"thumbnailUrl": "{{ .url | absURL }}",
{{- end }}
{{ with .Site.Copyright -}}
"license": "{{ . }}",
{{- end }}
"name": "{{ .Site.Title }}"
}
</script>
{{- else if .IsPage -}}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BlogPosting",
"headline": "{{ .Title }}",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "{{ .Permalink }}"
},
{{ if ge (.Param "image.width") 696 -}}
"image": {
"@type": "ImageObject",
"url": "{{ .Param "image.url" | absURL }}",
"width": {{ .Param "image.width" }},
"height": {{ .Param "image.height" }}
},
{{- else if ge .Site.Params.image.width 696 -}}
"image": {
"@type": "ImageObject",
"url": "{{ .Site.Params.image.url | absURL }}",
"width": {{ .Site.Params.image.width }},
"height": {{ .Site.Params.image.height }}
},
{{- end }}
"genre": "{{ .Type }}",
{{ with .Params.tags -}}
"keywords": "{{ delimit . ", " }}",
{{- end }}
"wordcount": {{ .WordCount }},
"url": "{{ .Permalink }}",
{{ if not .PublishDate.IsZero -}}
"datePublished": "{{ .PublishDate.Format "2006-01-02T15:04:05-07:00" | safeHTML }}",
{{- else if not .Date.IsZero -}}
"datePublished": "{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}",
{{- end }}
{{ with .Lastmod -}}
"dateModified": "{{ .Format "2006-01-02T15:04:05-07:00" | safeHTML }}",
{{- end }}
{{ with .Site.Copyright -}}
"license": "{{ . }}",
{{- end }}
{{ with .Site.Params.publisher -}}
"publisher": {
"@type": "Organization",
"name": "{{ .name }}",
"logo": {
"@type": "ImageObject",
"url": "{{ .logo.url | absURL }}",
"width": {{ .logo.width }},
"height": {{ .logo.height }}
}
},
{{- end }}
{{ if .Params.author -}}
"author": {
"@type": "Person",
"name": "{{ .Params.author }}"
},
{{- else if .Site.Author.name -}}
"author": {
"@type": "Person",
"name": "{{ .Site.Author.name }}"
},
{{- end }}
{{ if .Description -}}
"description": "{{ .Description }}"
{{- else -}}
"description": "{{ .Summary }}"
{{- end}}
}
</script>
{{- end }}
{{ "<!-- LEAVING partial seo-schema.html -->" | safeHTML }}
检查生成效果
Google structured data testing tool 可以实时爬取并检查生成的错误。这样可以避免在Google真正开始收录新的网页版本的时候才发现错误，大大缩短调试周期。
但是这个测试版本需要放在公网上，才能被Google爬取到。我用了 frp 把本地的 HTTP 服务暴露到公网。
服务端配置
# frps.ini
[common]
bind_port = 7000
vhost_http_port = 10080
客户端配置
# frpc.ini
[common]
server_addr = v.bitsflow.org
server_port = 7000
[web]
type = http
local_port = 10080
custom_domains = test.bitsflow.org
- 分别安装服务端和客户端
go get -u github.com/fatedier/frp/cmd/frps,go get -u github.com/fatedier/frp/cmd/frpc。 - 再把
test.bitsflow.orgCNAME到可被公网访问的服务器地址。 - 服务端启动
frps -c frps.ini，客户端启动frpc -c frpc.ini。 - 访问
http://test.bitsflow.org:10080即可看到效果。 - 在 testing tool 检查结果。
