TwitterやFacebookの投稿に、ワードプレスのページや記事の画像を表示させる方法【OGP画像】

こんにちはナオミです。

FacebookやTwitterに記事やサイトへのリンクを貼ると、自動でそのリンク先で使われてる画像が表示されたりしますよね。

こんな感じでdemodivi.comのリンクを貼っただけで、画像と説明文が表示されます。
この記事ではどうやってこれを可能にし、好きな画像や説明文をSNSの投稿に表示させるのか説明します。

ワードプレスにYoast Seoというプラグインをインストールする

いきなりプラグインですが、これが一番手っ取り早い方法です。

インストールするプラグインは『Yoast Seo』と言います。


とっても使えるSEO全般のプラグインです。

このプラグインをインストールして有効化したら、ワードプレスの記事かページに行ってみてください。

FacebookとTwitterの投稿の設定

YoastでFacebookとTwitterの投稿の設定

こんな感じの設定画面が、投稿やページの下に出てくると思います。
上の画像のタブを押します。

YoastでFacebookとTwitterの投稿の設定
  • タイトル
  • 説明文
  • 画像

これらを埋めるフォームが表示されます。

上のタブでFacebookとTwitterを切り替えられます。

これらのフィールドが、どういう風に記事がSNSの投稿で表示されるか決定します。

YoastでFacebookとTwitterの投稿の設定。OGP画像の設定

これらのフィールドを記入して記事を保存したら、次はテストします。

SNS投稿で記事がどう表示されるのかテストする

FacebookもTwitterもそれぞれテストできるページがあります。

Facebook

Facebookの投稿がどう表示されるかチェックするにはこのページにいきます。

https://developers.facebook.com/tools/debug/sharing/?locale=ja_JP

Facebookシェアデバッガーの使い方

URLを入力してデバックボタンをクリックします。

Facebookシェアデバッガーの使い方

成功すればこのように表示されます。

Twitter

Twitterへの投稿がどう表示されるかは、このリンクからチェックできます。

https://cards-dev.twitter.com/validator

ツイッターへの投稿のリンクがどう表示されるかをチェック

これもまた同じようにチェックしたいリンクを入れ、Preview cardを押します。

ツイッターのカードがどう表示されるのかチェック

このように表示されれば成功です。

画像が表示されない場合

ちゃんとYoastで設定したのに画像が表示されない場合は、次のことが考えられます。

  • 画像が設定されていない
  • 保存し忘れ
  • キャッシュ

まず、画像がしっかり設定され、保存されてることを確認しましょう。
その後はワードプレスのキャッシュをクリアします。
そしてもう一度試してみましょう。

Facebookに関しては、『もう一度スクレイピング』というボタンがあるので、それを押します。
その後に何も変わらなければ、もう一度デバッグを押します。

まとめ

  1. Yoast Seoをインストール
  2. 記事の下のYoast Seoの設定でFacebookとTwitterの設定
  3. デバッガーでテスト

この手順を踏めば、あなたのワードプレスの記事はSNSでカッコよく表示されます。
Diviでも同じ方法で設定できますよ。

是非試してください。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です