サイトをシェアする上で、OGPはクリック率を上げるとても重要な要素になります。
以前、OGP画像を設定したはずなのに、SlackのみOGP画像が正しく表示されないことがありました。
調べても対処方法が分からず困っていたのですが、簡単な方法で解決することができたので、今回はその方法を紹介したいと思います。
同じように困っている方は、ぜひこの記事を参考にしてみてください！
目次
OGP画像とは
OGP画像とは、Open Graph Protocol （オープングラフプロトコル）の略称で、メタデータの一部です。
WebページがSNSで共有された際に、指定された画像やタイトルなどの情報を表示してくれます。
OGP画像の必要性
OGP画像はページの内容を一目で見せることができるため、詳細な情報を伝えることができます。 ページのクリック率を向上させる重要な要素です！
簡単な表示設定でも、その言語化がゆえに可識性を高める効果が期待できます。
↓このサイトのトップページをSNSで共有すると、このような感じになります。
OGP画像が表示されない原因を調査
それでは早速、SlackにOGP画像が表示されない原因を調査します。
まず、Slackに表示されるサイトと、されないサイトの違いを調べてみました。 どちらもX（旧 Twitter）やLINEでは正常に表示を確認できました。 WordPressの設定を見てみると、１箇所だけ異なるところがありました。それは「Twitterのカードタイプ」です。
「Twitterのカードタイプ」には、「summary」と「summary_large_image」があります。 Slackで表示されるようにするには、「summary_large_image」にする必要があるようでした！こちらを修正すると、全てのサイトでSlackでもOGP画像が表示されるようになりました。
summaryとsummary_large_imageの違い
解決策がわかりましたが、これら2つの違いは何でしょうか？ それは英語そのままの意味で、画像のサイズの違いです。
| カードの種類 | 画像の比率 | 最小サイズ(px) |
| summary | 1:1 | 144×144 |
| summary_large_image | 1.91:1 | 600×314 |
どちらを指定すべきか
「Twitterのカードタイプ」には2種類あることを紹介しましたが、どちらを設定すべきかは、目的や好みで選んで良いと思います。
- 画像を大きく目立たせたい
- 引きのある画像を設定している
- SlackでもOGP画像が表示されるようにしたい
このように考える方は、「summary_large_image」を設定しましょう。
- 小さくてもわかりやすい画像を使用している
- 画像には注目してもらわないでいい
- Slackでシェアされることを想定していない
このように考える方は、「summary」を設定しましょう。
最後に
今回、OGP画像がSlackに表示されない場合の対処法として、「Twitterのカードタイプ」を変更する方法を挙げました。
それ以外にも原因や方法が分かったら、都度更新していきたいと思います。
同じように困っている方の参考になれば嬉しいです！