ツイートにこのサイトのリンクを添付した際、card が表示されず味気ないので OGP 画像を設定する。
OGP 情報を設定する
head.html を編集して OGP に必要な情報をヘッダに入れます。
画像は固定で良いので記事毎に画像を生成するようなことは今回しません。
<!-- Open Graph / Facebook -->
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
<meta property="og:url" content="{{ .Permalink }}" />
<meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}" />
<meta property="og:description" content="{{ if .Params.Description }}{{ .Params.Description }}{{ else if .Summary }}{{ .Summary | truncate 160 }}{{ else }}{{ .Site.Params.Description }}{{ end }}" />
<meta property="og:image" content="{{ .Site.BaseURL }}images/190_20241116221355_1.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:locale" content="ja_JP" />
<meta property="og:site_name" content="{{ .Site.Title }}" />
{{ if .IsPage }}
<meta property="article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}" />
<meta property="article:modified_time" content="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}" />
{{ if .Params.tags }}
{{ range .Params.tags }}
<meta property="article:tag" content="{{ . }}" />
{{ end }}
{{ end }}
{{ end }}
<!-- Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content="{{ .Permalink }}" />
<meta name="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}" />
<meta name="twitter:description" content="{{ if .Params.Description }}{{ .Params.Description }}{{ else if .Summary }}{{ .Summary | truncate 160 }}{{ else }}{{ .Site.Params.Description }}{{ end }}" />
<meta name="twitter:image" content="{{ .Site.BaseURL }}images/190_20241116221355_1.png" />OGP 情報が設定されているか確認する
OGP が設定されているか確認してって Claude Code に聞いたら Chrome DevTools MCP で確認してくれました。楽すぎ。
しかし視覚的にも確認したいです。
「localhost OGP」で検索すると localhost の内容を公開してくれるサービスが出てきますが、できればローカルで完結してほしいです。
調べたら asuto15/ogp-checker というのがあったので、これで確認してみます。
ちゃんと設定されてそうなのでこれで publish してみます。
OGP がすぐに反映されないことは分かっていたので、一晩経ってリンクをツイートしたらちゃんと出るようになっていました🎉
PC から閲覧
過去にツイートされたリンクはどのタイミングで表示されるようになるのか分からないですが、気長に待ってみようと思います。
おわり
