ワードプレス フェイスブック

FacebookのOGP画像とWordPressブログのアイキャッチ画像の最適なサイズは?

更新日:

アイキャッチ画像(OGPイメージ)の最適サイズ

ブログを書くときのサムネイル画像。WordPressを使っている場合アイキャッチ画像ともいう。この画像をOGPのイメージに設定していると Facebook や Twitter でシェアされたときに表示されるのでよく目立つわけです。最近では当たり前になってきました。

この記事の下部にソーシャルメディアへの共有ボタンが並んでますね。その中の Facebook というボタンをクリックしてみると共有画面が開きます。そこに表示されているのがアイキャッチ画像(OGPイメージ)です。

他の誰かに紹介したいブログ記事を見つけて共有しようとしたときに画像付きで無かった場合、シェアすることを躊躇してしまう人も少なからずいるようですのでOGPイメージはしっかり設定しておきたいですね。

設定は HTML の HEAD の所に OGP用の meta タグを記載します。

<meta property="og:title" content="記事のタイトル">
<meta property="og:url" content="記事のURL">
<meta property="og:image" content="アイキャッチ画像のURL">
<meta property="og:description" content="記事の概要文(説明文)">

WordPressのテーマであれば簡単に追記することが可能です。当ブログで使っているテーマ AFFINGER4pro は始めから OGP用のmetaタグが入っているので安心です。

当ブログでは AFFINGER4pro のOGPを使わずに ALL in ONE SEO Pack という WordPressプラグインの OGP設定を使っています。どちらにしても WordPress なら簡単に OGP設定が可能です。

そのアイキャッチ画像(OGPイメージ)のサイズを気にしたことはありますか?

当ブログは、これまで大人の事情で最適ではないサイズの画像を使っていました。
横幅700ピクセル×高さ366ピクセル
という中途半端な数値です。

現在 Facebook の OGPイメージとして最適とされているサイズは
横幅 1200ピクセル × 高さ 630ピクセル
です。

大きいですね。ということはつまり、700ピクセルでは半分くらいのサイズです。
比率はだいたい同じなので見え方は問題なさそうですが、最近の高画質な端末の場合に画質的に問題がありそうです。ブログのアクセス端末を調べて見れば分かりますが、高解像度のスマートフォンやタブレットからのアクセスが年々増えてきています。既に700ピクセルでは足りないという時代になっています。1200ピクセルでも大きすぎるということはありません。

ということで当ブログのアイキャッチ画像も 1200ピクセル × 630ピクセルに変えることにします。
過去の記事も変えていくのは大変そうなので、最新記事から新しいサイズのテンプレートでアイキャッチ画像を作ることにします。

OGPイメージの表示確認サービス

記事用に作成したアイキャッチ画像(OGPイメージ)がFacebook共有投稿でどんな風に見えるのか、切れてしまっている要素はないのかを確認できるツールがありました。

 OGP画像シミュレータ | og:image Simulator

最上部のエリアに画像をドロップアウトすると各サイズで表示確認ができるようです。
記事の投稿前に確認が必要なときは利用してみてはいかがでしょうか。

ブログ記事一覧のアイキャッチ画像(サムネイル画像)

ブログ記事一覧の画像が正方形の場合、アイキャッチ画像を横長すると左右が切れてしまいます。この記事のようにテキストを幅いっぱいまで入れていると記事一覧で画像の文字が読めなくなってしまいます。

そこで、当ブログは AFFINGER4pro のテーマを少しカスタマイズして横長のまま表示できるようにしています。

いかがですか?
この方が見やすいと思いませんか?
記事一覧の画像を横長にカスタマイズする方法はまた別の機会に書きます。

過去記事のアイキャッチ画像を変えて更新しても、それだけでは Facebook の OGPイメージは上書きされません。下記の記事を参考に更新してみましょう。
 Facebookシェアのサムネイル画像を変更する方法。デバッガーで確認!

まとめ

シント
ストックフォト写真販売で副業収入を得るための「ストックフォトクリエイタースタート講座」はじまりはじまり。」でも書きましたが、ブログ記事のアイキャッチ画像は読者を惹きつけるためにとても重要です。切り取られ方によっては重要な部分が隠れてしまうことも考えられます。今回はテキストのアイキャッチ画像でしたが、写真のアイキャッチでも同じ事が言えます。いろいろ試してみて効果を比較してみよう!

関連記事

 Facebookシェアのサムネイル画像を変更する方法。デバッガーで確認!
 Adobe Lightroom から直接 WordPress ブログに写真の書き出しするプラグイン。
 Facebook新機能!フォト仲間で共有アルバムを作成。
 インスタグラムとフェイスブックの連携、注意すべき盲点。
 WordPress プラグイン SNS Count Cache の Facebook カウントゼロ問題、とりあえず解決!?

ワードプレスを使いこなせるテンプレートWING AFFINGER5|凄い特典付き 5/15迄

WING AFFINGER5

当ブログでも利用しているワードプレス用のテンプレートです。

WING AFFINGER5 をおすすめする理由

  1. ブログへの訪問者増減に大きな影響力を持つグーグルなどの検索エンジンで、上位表示するための対策に効果的な機能がたくさん搭載されています。
  2. 検索エンジンで上位に表示されるだけではなく、収益化に結びつくことを意識しなければブログ運営は成功とはいえません。収益化に効果的な機能が豊富です。
  3. スマホでの表示速度が読者への満足度を左右します。そのために、検索エンジンのグーグルが推奨するAMP化。記事ごとにAMP化を選択可能なのが WING AFFINGER5 の強さでもあります。

WING(AFFINGER5版)

プロフィール

畑本伸一

 奏でる写真作家| 畑本伸一
1969年 大阪市生まれ 京都市在住。写真作家|写真は音を奏でるだろうか。そんな事を考えながら写真を撮っています。デジタル写真教室 講師フォトマスター検定1級写真印刷ツールデザイン制作|写真・カメラ・Webメディアに関する執筆。  共著:Pinterestビジネス講座(翔泳社出版)  詳しいプロフィール
 Facebook  Twitter  Instagram  Google+ RSS Feedly

PickUp

見上げる桜 1

トップページの記事一覧に表示されているサムネイル画像を大きくしたいと思いませんか? 当ブログで利用しているワードプレステーマを WING - AFFINGER5 に変えて数日が経ちます。多くの事が管理 ...

京都 円山公園の桜|2018.3.28 2

当ブログでも採用しているワードプレスのテーマ「AFFINGER」の最新版「AFFINGER5 WING」の公開及び販売が始まりました。今回も大幅に機能アップや高速化が図られている模様です。早速購入。AFFINGER4購入者は期間限定でお買い求め安くなっています。

-ワードプレス, フェイスブック
-, , , ,

Copyright© フォトクリエイティブ|写真のある暮らし , 2018 All Rights Reserved.