2020年度 レスポンシブ対応のTwitter ヘッダー画像はいくつで設定するのがベストなの?

ブログを書くときに意識して気をつけたいOGP画像 サイズと重要性とは?

OGPチェック最強ツール

みなさんブログのアイキャッチ画像ってどうやって作られてますか?ブログを書くときに意識して気をつけたい WordPressのアイキャッチ画像のサイズ、デザインなどの重要性について説明していきたいと思います。

なぜアイキャッチ画像(OGP画像)が重要なのか

みなさんブログを書いたらより多くの方に見てもらえるよう、SNSなどでシェアされ、たくさんの方々に読んでもらいたいと思うはずです。

TwitterやFacebook、LINEなどのSNSで自分がブログに設定した「OGP画像」はどのように見えてるか投稿前にチェックしていますか?

突然Twitterがバズったり、自分が書いたブログ記事が SmartNews に取り上げられない限り、ブログのアクセス数がいきなり跳ね上がることはありません。

今回紹介する方法を地道にコツコツとセオリー通りにやっていければ、ブログを見てくれる訪問者やファンが増えることで、少しづつアクセス数が増えていきます。

アクセス数が増えていくのは結構楽しくなる数字のひとつだと思います。また、OGP画像をちゃんと作ることでブログのライティングスキルのほか、自分のデザインスキルもあがりデザインの仕事に多少興味が湧くかもしれません。

アイキャッチ画像(OGP画像)のサイズ

Twitter、Facebook、LINEなどでシェアされた場合、どのSNSでも美しく表示される画像のサイズをご存知ですか?

正解は…

NORI

1200px × 630px(比率 1:0.525)です!

このサイズでOGP画像を作れば、上記のSNSでシェアされても綺麗に表示されるのは間違いありませんが、デザインにちょっとした工夫も必要です。

OGP画像 サイズ 2020版 早見表

利用SNS画像サイズ画像の拡張子画像の比率(横:縦)
Facebook1200×630px(最低ライン).jpg .png1.91:1
Twitter1024×512px.jpg .png1.91:1
LINE正方形(切り抜かれる).jpg .png不明
はてなブックマークアイキャッチ概念なし.jpg .png不明

1200px × 630px(比率 1:0.525)の画像を作って実際にどのように表示されるかチェックしてみました。

各SNSでのOGP一括確認

画像をクリックすると拡大

SNSへ一括で設定できるテンプレート

SNSで美しくデザインができるテンプレートをIllustrator(イラレ)とPhotoshop(フォトショ)で制作しました。
テンプレートを利用するには最新版のIllustrator(イラストレーター)Photoshop(フォトショップ)が必要になります

これに当てはめてOGP画像を作ればTwitter、Facebook、LINEなどでシェアされた場合、どのSNSでも美しく表示されます。(確認済)

SNSでのOGP一括設定テンプレート案内

画像をクリックすると拡大

テンプレートの使い方

IllustratorPhotoshopでのテンプレートの使い方は簡単です。design(デザイン部分)と記載されたレイヤーを選択してここにデザインを入力します。

MEMO
LINEでシェアされたときもきっちりと考えたい場合には青い中に必要な要素(文字/イラスト)を入れると綺麗に仕上がります。

デザインして書き出しすればOGP画像はできあがりです。

テンプレートのレイヤー構成

このテンプレートを使うことで、Facebook、TwitterのOGP画像サイズを気にすることなくデザインができます。(2020年現在)

OGP一括設定デザインテンプレートのダウンロード

ダウンロードしたファイルを開くには最新版のAdobeCC製品が必要となりますのでご注意ください。

この続きはcodocで購読

PayPal支払いでデザインテンプレート ダウンロード

テンプレートの購入方法
テンプレート価格:500円(税抜)
お支払い方法:PayPal
ボタンをクリック後、PayPalアカウントをご利用いただきお支払いいただくか、お手持ちのクレジットカードをご利用いただきお支払いをお願いいたします。

PayPalでのお支払い完了後に表示される「ショッピングサイトを戻る」ボタンをクリックするとダウンロード可能なファイルが表示されます。

同梱されているテンプレートの内容とファイル形式
・Adobe Illustrator(.aiファイル)
・Adobe Photoshop(.psdファイル)
・Adobe XD(.xdファイル)

ダウンロードしたファイルを開くには最新版のAdobeCC製品が必要となりますのでご注意ください。

テンプレートを購入する

OGP画像がチェックできるツール

いままで紹介してきた中でも個人的におすすめできる最強のOGP確認 ツールを紹介したいと思います。

OGPで表示される画像を一括で確認できるオンラインツールで、なんとURLを入力・画像をドラッグするだけで、Facebook/Twitter/LINE/はてぶで表示されるOGP画像を瞬時に確認することができる素晴らしいツールです。

NORI

このツールはブックマーク必須!

OGP確認 ラッコツールズの使い方

記事をすでに公開している場合には、記事のURLを「URLから確認」の項目にコピペして確認するボタンをクリックします。

OGPチェック最強ツール ラッコツールズ使い方

記事をまだ公開しておらず、現在執筆中の状態の場合には、「画像をアップして確認」の選択して、上のテンプレートなどで書き出した画像を画像をドラッグ&ドロップまたはクリックで画像を選択するだけです。

タイトルや説明(ディスクリプション)も含めて確認するには、必要なテキストを入力後タイトル、説明を反映するボタンをクリックします。

OGP確認ツール ラッコツールズ使い方

関連リンク ラッコツールズ

意識して気をつけたいOGP画像サイズと重要性のまとめ

本記事は、ブログのアイキャッチ画像(OGP画像)についての解説レビュー記事です。

無料素材サイトから写真を引っ張ってきて適当に設定してませんか?ちょっとひと工夫加えるだけでブログを読んでもらえる確率や、SNS上でシェアされたときにクリックされる確率や、エンゲージメントにも影響してきます。

是非活用してみてください。

以上、NORI(@norilog4)でした。

facebook ogp debugger 使い方 解説【2020年版】SNSでシェアされたOGP画像のキャッシュクリア方法・確認ツールの使い方 アフィリエイトってなに?アフィリエイトってなに?ブログを書いてお小遣い稼ぐ方法とその仕組みを紹介
コメントを閉じる

コメントを残す