Old Sunset Days

HugoのブログサイトでOGP設定をする

日付 タグ hugo カテゴリ hugo

目次

Hugoで作ったブログサイトでOGP対応をする

OGPとは「Open Graph Protocol」の略。

FacebookやTwitterなどのSNSを通じてブログの記事がシェアされた時にこのOGPメタタグを設定しておくことで、各SNSでいい感じに整形して表示してくれるようになるのだ。

OGP自体は仕様なのでHugoで作られたサイトであろうと、一般のサイトであろうと定義の仕方自体は変わらない。

また、TwitterやFacebook独自に追加で定義された設定もあるが、まずはOGP共通の部分を設定してみる。

OGP設定にはHugoのビルトインのテンプレートを利用してもいいし、自分で設定を入れ込んでもいい。

OGP設定のためのメタタグを自分で設定する場合

<head prefix=”og: http://ogp.me/ns#”>
<meta property="og:site_name" content="{{ .Site.Title }}" />
<meta property="og:url" content="{{ .Permalink }}" />
<meta property="og:title" content="{{ .Title }}" />
<meta property="og:type" content="article" />
{{ if .Summary }}
<meta property="og:description" content="{{ .Summary }}" />
{{ else }}
<meta property="og:description" content="{{ .Site.Params.description }}" />
{{ end }}
{{ if .Params.eyecatch }}
<meta property="og:image" content="{{ .Params.eyecatch | absURL }}" />
{{ else }}
<meta property="og:image" content="{{ .Site.Params.image | absURL }}" />
{{ end }}

を<head> - </head>の間で読み込めば良い。

OGPを使用する宣言を入れて、
<head prefix=”og: http://ogp.me/ns#”>

あとはこれらを指定していく。

  • og:site_name
    • サイト名
  • og:url
    • ページのURL
  • og:title
    • ページのタイトル
  • og:type
    • ページのタイプ(articleなら記事ページなど)
  • og:description
    • ページの説明文
    • 今回はsummaryがある場合はsummary、ない場合はconfig.toml中のparamで設定されたdescription
  • og:image
    • SNS上でシェアされた際に表示する画像

og:imageは今回はconfig.tomlにimage = "/images/favicon.png" を用意して、これは前にサイトのFavicon用に用意した画像の元PNGで

( ==> サイトのFavicon画像を作成して設置してみる ）

サイト共通のものを準備したが、記事にアイキャッチ画像が設定されている場合は、そこから取得するようにした。

うまく設定ができたかどうか表示がPreviewできるTwitterのCard Validatorでチェックしてみる。

https://cards-dev.twitter.com/validator　- Twitter Card Validator

ここにチェックしたいURLを入力してPreview

表示としてはこんな感じになるようだ。

Hugoでビルトインのテンプレートを使う場合

実はHugoにはビルトインのテンプレートも用意されている。

https://gohugo.io/templates/internal - Internal Templates

Use the Open Graph Template To add Open Graph metadata, include the following line between the tags in your templates:

書いてあるように

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

を<head> - </head>の間で読み込めば良い。

すると、こういう情報を自動でogメタタグに設定してくれる。

<meta property="og:title" content="HugoのブログサイトでOGP設定をする" />
<meta property="og:description" content="Hugoで作ったブログサイトでOGP対応をする OGPとは「Open Graph Protocol」の略。 FacebookやTwitterなどのSNSを通じてブログの記事がシェアされた時にこのOGPメタタグを設定しておくことで、各SNSでいい感じに整形して表示してくれるようになるのだ。 OGP自" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://localhost:1313/hugo-ogp/" />
<meta property="og:image" content="http://localhost:1313/hoge.png" />
<meta property="article:published_time" content="2020-10-03T09:38:36+09:00" />
<meta property="article:modified_time" content="2020-10-03T09:38:36+09:00" />

なお、ここで設定されているog:imageは記事のMarkdownヘッダー中に

images: ["hoge.png"]

のように指定される画像が使われる。指定がない場合は、og:imageはセットされないようだ。


この記事と関連する記事を読んでみる