暮らしに役立つ写真活用のヒントとアイデア。インスタグラム、ブログ、編集...デジタルカメラと写真を楽しむためのブログ。

フォトクリエイティブ|写真のある暮らし

SNS ブログの始め方

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

投稿日:2017/01/13 更新日:

アイキャッチ画像(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 カウントゼロ問題、とりあえず解決!?

プロフィール

 ひつじさん
大阪市生まれ 京都市在住。写真は音を奏でるだろうか。そんな事を考えながら写真を撮っています。フォトクリエイターデジタル写真講座 講師フォトマスター検定1級|より多くの人がカメラと写真を楽しめるように、文章、写真、映像、音声コンテンツを発信しています。  共著:Pinterestビジネス講座(翔泳社出版)  詳しいプロフィール
 Facebook  Instagram RSS Feedly

-SNS, ブログの始め方
-, , , ,

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