TwitterのOGPが表示されなくて困った

September 12, 2018

TwitterのOGPが表示されなくて困りました。SSLだからダメなのかと疑ったり、最近、Github PagesのHTTPSが使えるようになったのでそれが原因かと疑ったり、metaの書き方が問題かもと疑ったり、Hugoでやってるから生成されたURLが間違ってるのかなと疑ったり(最終的にはこれだったと思われる)。だけど、解決しました。いくつか必要ない変更もしてしまったのかもしれないけれど、原因はこれでした。

ダメ

https://moritanaoki.org//projects/katagiri-chokoku/feature.png

OK

https://moritanaoki.org/projects/katagiri-chokoku/feature.png

URLがちょっとおかしかったみたい。最終的なmetaタグはこちら。imageを追加したけど、metaタグはもっとシンプルでもよかったかも。

<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{{ .Title }}">
<meta property="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}">
<meta name="twitter:url" content="{{ .Permalink }}">
{{ if $feature_image }}
<meta property="twitter:image" content="{{ .Site.BaseURL }}{{ .Page.Params.feature_image }}">
{{ else }}
<meta property="twitter:image" content="{{ .Site.BaseURL }}{{ .Site.Params.profileImagePath }}">
{{ end }}
{{ with .Site.Social.twitter_id }}
<meta name="twitter:site" content="@{{ . }}">
<meta name="twitter:creator" content="@{{ . }}">
{{ end }}

Profile picture

Written by morizotter who lives and works in Tokyo building useful things. You should follow them on Twitter