ワードプレスの記事のOGP画像の設定方法

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でも同じ方法で設定できますよ。

是非試してください。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

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

Elementorの無料テンプレートサイト
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通