OGPを設定したい(/layouts/partials/head.html

{{ template "_internal/opengraph.html" . }}

Hgoの内部テンプレートを使ってOGPを設定できます。 _internal/opengraph.htmlhead用の部分テンプレートに書いておけば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:titleconfig.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.tomlparams.imagesの画像が適用されます。 params.imagesは複数枚設定できますが、og:imageとして利用できるのは最初の1枚だけです。

リファレンス