たまりば

  お薦めショップ/企業/団体 お薦めショップ/企業/団体  八王子市 八王子市

ブログの投稿画像をFacebookに大きく表示させる方法とは

こんばんは。
コンテンツマーケティング実践者こぐまです。

今日は、ブログとFacebookを連携させてお使いの方に、ちょっとしたひと手間で
ブログのアクセス数をアップさせられるかもしれない方法をご案内します。

ブログに投稿した記事をFacebookに連携させる

ブログに投稿した記事や画像を、自分のFacebookやFacebookページに
リンクを貼るのは、結構皆さんやられてるんじゃないかと思います。

毎回、手動でブログ記事のURLを貼っている方もいるかもしれませんが、
実は、「たまりば」には自動でブログの更新をFacebookに反映させる機能があるので、
ご興味ある方は、こちらをお試し下さい。
→ブログとFacebook自動連携機能

Facebookに連携投稿される画像の最適サイズは?

Facebookって、よーく見ると外部サイトからリンクされた記事は、
表示される画像サイズが大中小バラバラなんですよね。

例えばこんな感じ。





どちらも僕のブログの新着記事が自動でFacebookにも投稿された例なんですが、
写真の表示のされ方が明らかに違う。

1枚目が小さくて、2枚目が大きい。
「いいね!」数も、Facebook経由でのブログへのアクセス数も、
やっぱり2枚目が高くなる傾向があります。

ブログ上での見た目はどうかというと、どちらも幅480pxで同じ。
なのに、どうしてFacebook上ではこんなに違ってるのか?

実は、Facebook上に表示されるときに最適な画像サイズというのがあって、
通常の画像投稿の仕方にひと手間加えてます。

大きい画像で表示されるために最適な画像サイズは、幅1200px×高さ630pxです。
これを下回る画像の場合は、1枚目のような小さめの画像表示になってしまうんです。

幅1200pxじゃブログ画面から飛び出しちゃう!?

Facebook上に表示されるときに、2つ目のキャプチャのように大きく表示させるには、
幅1200px×高さ630pxないとダメだと先に述べました。

だけど、幅が1200pxもあったら、ブログ画面から飛び出しちゃう可能性が高いです。
現に、僕のブログのPC版では、幅480pxがぎりぎりで、
これより大きい画像を掲載しようとすると、レイアウトが崩れちゃいます。

じゃあ、どうすればいいのか?
画像投稿時に、ちょっとした裏技を使います。

まず、画像のアップ画面では幅1200px以上×高さ630px以上の、
大きな画像サイズでアップロードします。
※アプリをご利用の場合は、あらかじめPCかスマホの管理画面でサイズ調整をお願いします。

僕は、スマホアプリから投稿することが多いので、
あらかじめ管理画面の設定で画像サイズを幅1200px以上に指定しておきます。



次に、スマホアプリ側では、選択できる最大値の800pxとしておきましょう。
※PC管理画面から投稿する場合は、この設定は不要です



これで画像投稿前の下準備は完了。
いよいよ、画像投稿に入ります。

記事タイトルを書き、本文を書くところまでは、いつもと同じでOKです。
画像を投稿する際に、PC管理画面からの人は画像サイズを幅1200px以上にしましょう。
※リサイズで480pxなど小さな数値にしないよう注意

画像アップロードが済んだら、記事本文入力欄で、ほんの一手間。



上の画像で色付けしているように、画像ファイル名を表す記述の最後、「>」の直前に
width=480px
と書き加えて下さい。

これは、「本当はFacebook用に幅1200pxでアップした画像なんだけど、
ブログ画面上では480pxで表示するようにしてねー」
という意味の呪文だと思って下さい。
これをやることで、ブログ画面から画像が飛び出しちゃう事態を防げます

※お使いのテンプレートによっては480pxでも大きすぎる場合がありますので、
 480pxの箇所を300pxにするなどでご対応下さい。

ここまでできたら、ブログへ投稿し、Facebookにもリンクを貼ってみましょう。
このように、横いっぱいに画像が表示されれば、成功です。



ソーシャルメディア活用、コンテンツマーケティングのご相談は、
下記のお問い合わせフォームからお願いします。 


  • にほんブログ村 ネットブログ ネット広告・ネットマーケティングへ
    「にほんブログ村」のランキングに参加中、クリックで応援して下さい!



    ▼留学生・外国人の社員採用に役立つ「ジェイ・ラインキャリアセンター」コラム [一覧]

    ▼ブログのビジネス活用に役立つ!「たまりば」マーケティングコラム [一覧]
    red_rightビジネスブログ・オウンドメディア運営に最適!ビジネス会員サービスについて
    同じカテゴリー(たまりば(多摩地区))の記事画像
    中東・西アジアからの留学生も学んでます、東京工科大学
    実はバス通学も便利、帝京大学キャリアサポートセンターさんにお邪魔しました
    多摩キャンパスの留学生も集まる、法政大学市ヶ谷キャンパスへ
    広~い中央大学の国際センターさん・ キャリアセンターさんへ
    首都大学東京さん、キャリア支援課だけじゃなく国際センターさんにもお邪魔させて頂きました
    杏林大学のキャリアセンターで留学生の就職活動支援についてお話してきました
    多摩地域にある大学のキャリアセンターさん、留学生の就職支援はどうされてますか?
    本日、八王子古本まつりに「たまりば」パートナーの皆さんと出店、たき坊バッジもフラチナ提灯も一緒に
    同じカテゴリー(たまりば(多摩地区))の記事
     中東・西アジアからの留学生も学んでます、東京工科大学 (2017-06-21 14:51)
     実はバス通学も便利、帝京大学キャリアサポートセンターさんにお邪魔しました (2017-06-10 08:00)
     多摩キャンパスの留学生も集まる、法政大学市ヶ谷キャンパスへ (2017-06-09 08:30)
     広~い中央大学の国際センターさん・ キャリアセンターさんへ (2017-06-08 08:00)
     首都大学東京さん、キャリア支援課だけじゃなく国際センターさんにもお邪魔させて頂きました (2017-06-07 08:00)
     杏林大学のキャリアセンターで留学生の就職活動支援についてお話してきました (2017-06-06 08:00)
     多摩地域にある大学のキャリアセンターさん、留学生の就職支援はどうされてますか? (2017-06-01 08:00)
     本日、八王子古本まつりに「たまりば」パートナーの皆さんと出店、たき坊バッジもフラチナ提灯も一緒に (2017-05-06 09:00)

     
    上の画像に書かれている文字を入力して下さい
     
    <ご注意>
    書き込まれた内容は公開され、ブログの持ち主だけが削除できます。