こんにちは！LIikePayの矢野です。
みなさんは普段ウェブサイトのURLをSNSに貼り付けると、自動的にサムネイル画像、タイトル、説明文が表示されていることに気がついていますか？
メッセージを受け取った人もサムネイル画像や説明文が表示されていると事前に簡易的な情報が与えられているのでクリックする抵抗が少なくなっていると思います。
あの便利な機能は、Open Graph Protocolが設定されているから表示されているんです！
簡単にOGPの説明をしましたが、今回の記事ではTwitterでOGPが表示されない際にデバッグするツールTwiter Deeloper Card validatorを使用してキャッシュを削除しようとした際にエラーが発生し削除できない時の対処方法について紹介します。
まず最初に、TwitterでOGPが正常に動作していると以下の方に表示されます。
Twitterキャッシュ削除でエラーが出る
Error: No Card Found(Card error)
このようなエラーが出てTwitterのキャッシュ削除ができません。
ラッコツールズなどでは表示されるのですが、Card Validatorでは表示されるエラーになる。（実はこの時ラッコツールズの方ではdescriptionが見つかりませんとのエラー文が表示されています）
WebflowのOpen Graph Settingsを確認しよう
WebflowのPage SettingsからOpen Graph Settingsを設定することができます。
このように情報が1つでも入力されていないとCard Validatorで削除をしようとしてもエラーが起きます。
よくよく考えると、情報がないので削除できないのは当たり前ですね笑
こちらの情報を入力することで、Card Validatorを動かすとしっかりとキャッシュの削除に成功し、TwitterでOGPを表示させることが可能になります。
結論:WebflowのOpen Graph Settingsの項目を全部埋めよう
シンプルな解決方法でした！
（自分はコレに気が付くのに沢山の時間を費やしてしまいました・・・）
みなさんもTwitterのOGPが表示されないとき是非参考にしてください！
