anz blog

PublishでOGP画像を設定する

2020-09-22 #Publish

前の記事で書いた通り移行自体は「だいたい」終わったのですが、残タスクでOGP画像を設定するというものがあったので、その対応をしました。

OGP画像設定

READMEとかで特にサンプルが無かったため、できるだろなとは思いつつも後回しにしていたものです。
移行も大体おわったので調べてみるかなということで、Publish のコードを追っていくとそれっぽい記載があり、試してみたら無事にできました。
難しいことはなく、記事のマークダウンでメタ情報を書いているyamlに追記するだけです。

---
title: 記事タイトル
date: 公開日時
tags: タグ
description: 記事概要
image: OGP画像などに使われる
---
本文

ということで、 image: パスを書く という形で追記したらOKです。
注意点としては、スラッシュ無しで始めることというぐらいでしょうか。
image: images/article/foo.png みたいな感じです。
スラッシュ始まりでやると生成されるURL文字列が https://example.com//images/article/foo.png というようにスラッシュ連続で出力されてしまいます。

この設定をすると、twitter:card 指定も summary から summary_large_image にちゃんと切り替わるのでご安心を。