OGPを設定したい(/layouts/partials/head.html
)
{{ template "_internal/opengraph.html" . }}
Hgoの内部テンプレートを使ってOGPを設定できます。
_internal/opengraph.htmlをhead
用の部分テンプレートに書いておけばOKです。
OGP画像などの設定は、サイト全体の設定ファイル(config.toml
)
もしくは各コンテンツのフロントマターで設定します。
設定できる項目は、ドキュメントでは網羅されていないため、内部テンプレート(opengraph.html
)のソースを直接確認したほうがよいです。
サイト全体のOGP
1[params]
2description = "サイトの説明"
3images = ["画像1", "画像2"]
4title = "サイトのタイトル"
5
6[taxonomies]
7series = "series"
サイト全体のOGPはconfig.toml
に整理します。
og:title
したい
<meta property="og:title" content="{{ .Title }}" />
og:title
はconfig.toml
やフロントマターのtitle
で設定します。
og::description
したい
<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
og:description
はフロントマターのdescription
で設定します。
description
が設定されていない場合、個別ページの場合はsummary
、それ以外(=一覧ページなど)はconfig.toml
に設定したparams.description
が適用されます。
og:type
したい
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
og:type
は自分で設定する必要はありません。
ページのタイプに応じて自動で適用されます。
og:url
したい
<meta property="og:url" content="{{ .Permalink }}" />
og:url
は自分で設定する必要はありません。
ページのパーマリンク(=絶対URL)が自動で適用されます。
og:image
したい
{{- with $.Params.images -}}
{{- range first 6 . }}<meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
{{- else -}}
{{- $images := $.Resources.ByType "image" -}}
{{- $featured := $images.GetMatch "*feature*" -}}
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
{{- with $featured -}}
<meta property="og:image" content="{{ $featured.Permalink }}"/>
{{- else -}}
{{- with $.Site.Params.images }}<meta property="og:image" content="{{ index . 0 | absURL }}"/>{{ end -}}
{{- end -}}
{{- end -}}
フロントマターのimages
で画像を設定できます。
ソースコードを確認すると、最大6枚の画像を適用できます。
また、コンテンツファイルと同じディレクトリにある画像ファイルがある場合、
ファイル名に*feature*
、*cover*
、*thumbnail*
を含む画像ファイルが自動で適用されます。
上記が設定されていない場合は、config.toml
のparams.images
の画像が適用されます。
params.images
は複数枚設定できますが、og:image
として利用できるのは最初の1枚だけです。