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

こんにちはナオミです。

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

Diviを試せるサイトを作りました！

▶︎必要なのはEメールアドレスのみ
▶︎独立したDiviのデモサイトを自動生成
▶︎Diviの機能100％使用可能
▶︎リセット機能装備
▶︎完全無料

デモは24時間後に自動削除されますので、どうぞ好きなだけDiviで遊んでみてください！https://t.co/ASwdNJO23n

— ナオミ@tofulab.app (@tofutechxyz) March 23, 2019

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

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

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

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

Yoast SEO

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

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

FacebookとTwitterの投稿の設定

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

• タイトル
• 説明文
• 画像

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

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

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

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

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

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

Facebook

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

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

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

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

Twitter

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

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

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

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

画像が表示されない場合

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

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

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

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

まとめ

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

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

是非試してください。