1. HOME
  2. ブログ
  3. ブログ
  4. テックブログ
  5. テックブログ
  6. Facebookシェア時のサムネイルをコントロールするーその1

Article

記事一覧

テックブログ

Facebookシェア時のサムネイルをコントロールするーその1

WordPressで作った自分の記事を、少しでも見てもらおうとFacebookでシェアしたはいいが、
サムネイル画像が表示されていない、表示はされたが思った画像じゃない…などといった経験はございませんか?

こんにちは。Takeyemaです。
FacebookでブログやWEBページをシェアすると、Facebook側で何らかの画像をサムネイルとして使おうとしますね。

Facebookシェア時のサムネイル

それがWordpressで自分で作ったページでなかなかうまく行かなかったことがあったんです。
今回はその時やったことを備忘録として残します。

望んだ画像がサムネイルにならなかった

まずFacebookが何をサムネイルとして採用するかですが、
WEBページ側で特に指定がない場合はページ内で一番最初に表示される画像が使用されます。
ロゴなんかが使われるといいですが、リンクボタンとかが使われると悲しいことになりますね。

OGP設定してやれば望んだ画像を使ってくれる

サムネイルとして使用する画像をWEBページ側でしてしてやれば、そんな悲しい紹介のされ方はしないで済むのです。
サイトの<head>内で指定することができます。

<meta property="og:image" content="https://ssilab.co.jp/wp-content/uploads/2019/04/20190404_tech_blog_02.jpg">
こんな具合です。
<meta>タグにて og:image という形で指定してやれば、Facebookは優先的にサムネイルとして使用してくれます。

WordPressの場合どのように指定してやるか

これがスタティックなWEBページなら、直接<head>に書き込んであげればいいわけですが、
ページによっては効果的な画像を使いたいものです。
Wordpressではもちろん便利なプラグインがあります。
All in One SEO こちらはWordpress使うなら必ず入れろというほどのどメジャーなプラグインですので、インストールなど詳細については省きます。

全ページに渡る基本設定

All In One SEOの「ソーシャルメディア」にて、全体に渡るFacebookの設定ができます。
左のメニューから飛びます。

プラグインの設定へのリンク

「画像設定」のところで、デフォルトで使用する画像を指定できます。

ロゴやアイキャッチキャラクターなどを指定してやるといいかもしれないですね。

個別の投稿ページの設定

それぞれのページに合わせた効果的な画像をサムネイルにして、より多くの人の興味をひきつけたい・・・。
それは最もなことです!
ちゃんと個別に設定できるので安心してください。

投稿ページ中に「All in One SEO Pack」というタブがありますので、右の三角をクリックしてください。

「All in One SEO Pack」というタブが見当たらなくても慌てないでください。
右上の「表示オプション」をクリックすると、All in One SEOの表示できるようになります。

All in One SEOの設定画面が開けたら、「ソーシャル設定」というタブをクリックしてください。
これでこのページに対する、サムネイル画像についての、詳細な設定ができます。

今回はFacebookのサムネイルだけ説明しますので、「カスタム画像」というところに、使いたい画像を指定してあげてください。

さあ、これでFacebookでシェアしたときのサムネイルはバッチリです!!!
…と言いたいところですが、いろいろと不具合があるのがWEB制作の常。
次回は不具合発生したときにワタクシが行ったことなどご紹介していきたいと思ってます。

それでは。

この記事が気に入ったら
いいね ! してください

Twitter で