コピペで簡単！OGPキャッシュ更新フォームを自サイトに設置しよう！

2016年5月21日 2017年7月29日
ブログ運営 Facebook

WordPressでサムネイル画像を新しいものに変えると、Facebookに表示される画像が真っ白になったり、変わっていなかったりすることってありますよね。

これは古いキャッシュがネット上に残っていることが原因なので、キャッシュを削除すればすぐに新しい情報に上書きすることが可能です。

このページでは、そのOGPキャッシュを更新するためのフォームを用意しました。
これでサムネイル問題は解決できます。

ただ、OGPキャッシュを更新するたびにフォームの設置されたサイトを検索するのも面倒ではありませんか？
そういった方のために、フォームを自サイトに設置するためのHTMLコードも紹介しています。

ぜひこちらも参考にしてみてください。

一発でOGPキャッシュを更新する専用フォーム

キャッシュプラグインを使用している場合は、OGPに古い情報が記録されているのでキャッシュを削除しなければいけません。

下記フォームにOGPキャッシュを削除したいURLを入力してボタンをクリックしてください。

その後、公式のデバッガーにてデバッグすると新しい情報に書き替えられます。

参考デバッガー – 開発者向けFacebook

OGPキャッシュ更新フォームのHTMLコード

次に、OGPキャッシュ更新フォームのHTMLコードを紹介します。

下記のコードをフォームを設置したい場所に追加してください。
HTMLなのでWordPress以外でも使えるかと思います。

HTML

<div class="ogp-cache">
<form action="https://graph.facebook.com/" method="post"><input type="text" name="id" size="30" class="form-control" placeholder="OGPキャシュを更新したいURL"><input type="hidden" name="scrape" value="true"><input type="submit" value="更新する" class="submit-button"></form>
</div>

次にCSSでフォームのデザインを変更します。

CSS

/*===============================
	OGP更新フォーム
=================================*/
.ogp-cache {
	text-align: center;
}
.ogp-cache input.form-control {
	display: inline-block;
    width: 65%;
	margin: 5px;
}
input.submit-button {
    width: 100px;
    height: 35px;
	margin: 5px;
    color: #616161;
	border-radius: 4px;
}

自分でわざわざ作るのは面倒という方は、以下のページをブックマークしていただくと便利です。