ブログ・SNS

【アフィンガー】Twitterでブログシェア時のアイキャッチ設定方法

2020年3月29日

アフィンガーOGP画像設定

どうも、アフィンガー歴1年半のズーキー(@zookie098)です。

 

アフィンガーのブログを、Twitterでシェアした時のアイキャッチ画像ってどうやって設定するんだ?
サイズなんかも知りたい。
フラン君

 

ズーキー
そえばTwitterなんかで未設定の人たくさん見かけるなぁ。
アフィンガーなら簡単にOGP設定できるよ。

 

OGPとは

「Open Graph Protocol」の略称。
TwitterやFacebookなどのSNSでサイトやブログがシェアされた時のタイトル、URL、概要、画像を表示させる仕組みのこと。

 

僕もどこで設定すればいいのかわからずこんな画面でした。

Twitterシェア画面

 

それが今ではキレイに表示されてスッキリとしています。

 

この記事ではTwitterでブログをシェアした時の画像(OGP)の設定方法、サイズをわかりやすく説明します

 

アイキャッチ画像はブログの大事な玄関なのでキレイにしましょう。

 

アフィンガー5ブログSNSシェア画像(OGP)設定方法

アフィンガーOGP画像設定方法

 

アフィンガー5はすでにOGP設定項目が用意されているので3ステップでできます。

 

  1. アフィンガー管理画面OGP設定
  2. 画像挿入
  3. Twitterシェア画面確認

 

順に説明します。

 

アフィンガー管理画面OGP設定

 

まずはアフィンガー管理画面を開きSNSアップロードをクリックして画像を選択します。

 

Affinger管理画面

 

のマークがあるのでFacebookの設定と勘違いしていて僕も設定していませんでしたが、ここがSNSでブログシェアされた時の画像になります。

 

下にあるTwitterカードサイズは大(summary_large_image)に設定して下さいね。

Twitterカードサイズ

 

タイムライン上で大きい画像が表示されるので、かなりアピールすることができます。

 

そしてsaveボタンをお忘れなく。

 

画像挿入

 

アフィンガーでは200 × 200px以上(8MB以下)の画像が推奨されています

 

圧縮した画像を使用すると、ボヤケた感じで表示されたので調整が必要。

 

参考までに僕の設定は、1024 × 536px(45KB)の画像を使用しています。

 

適正画像サイズに関して知りたい方はこちらからスキップして下さい。

 

Twitterシェア画面確認

 

Twitterでブログをシェアした時の画面を以下のサイトで確認できます。

 

Twitter Card Validator

 

カードのURLにブログドメインを入力し、プレビューカードをクリックで右側に表示されます。

 

Twitterカード検証画面

 

ズーキー
どうです?いい感じでしょ(笑)

 

いい感じに表示されるようOGP画像の適正サイズを紹介します。

 

アフィンガー5OGP画像の適正サイズ

OGP画像サイズ

 

Twitterカード(大サイズ)は1.91 : 1で表示されるので、1200 × 630pxで作成しています。

 

逆にアフィンガー管理でTwitterカードを小に設定すると、正方形で表示されるので注意しましょう。

 

その他にLINEでシェアした時、グーグルアプリのおすすめ記事あたりも正方形に切り取られます。

 

長方形・正方形どちらにも対応したい方向け

 

どうしても見切れるのが嫌だって人は、正方形で切り取られてもおかしく見えないように、中央寄せで作ることをおすすめします。

 

OGP画像サイズ2

 

両端の余白部分は切り取られても良い背景画像とかにしてもGood。

 

文字などがはみ出ると、理解に苦しむので注意しましょう

 

【アフィンガー】Twitterでブログシェア時のアイキャッチ設定方法|まとめ

【アフィンガー】Twitterでブログシェア時のアイキャッチ設定方法|まとめ

 

  • アフィンガーのOGP設定はアフィンガー管理から
  • Twitterの適正画像サイズは1.91 : 1
  • 正方形にも対応したいなら中央寄せ

 

「神は細部に宿る」ということで、SNSシェア画面も大事な部分だと思います。

 

この記事を参考に上手に画像設定できた方は、拡散しますのでTwitterで僕宛てにメンション下さい。

 

関連記事【アフィンガー5】ガチの口コミ評判まとめ【デメリットも暴露】

関連記事【当ブログ限定特典つき】アフィンガー5を初心者ブロガーがレビュー

\この記事は役に立ちましたか?/

-ブログ・SNS
-

© 2020 written by zookie