FB外部リンクの説明文をスマホで表示させるには？

ブログ

11.142017

【Facebook】外部リンクの説明文をスマホで表示させるには？

安達

フェイスブックで外部リンクをシェアする場合、
パソコンでは、画像下に「タイトルと説明文」が表示されますが
スマホで見た場合、説明文がある場合とない場合があります。

Description(説明文)の表示なし

Description(説明文)の表示あり

タイトル文字数を全角24文字以内に抑えるのがポイント！

安達

※安達調べ (環境 iPhone6s iOS11)
iPhone版Facebookアプリで文字数カウントしました。
他の機種、アンドロイドでの表示はわかりません。

安達

画像が小さく表示されちゃってる場合は、タイトルの文字数に関係なく説明文も表示されます。↓↓↓↓
リンク画像が小さく表示

Facebookの推奨しているOGPの画像のサイズは
縦630px×横1200px(縦:横の比率1:1.91)
この縦横比を守ると、画像の上下左右が切れずに、また大きな画像サイズで表示されます。
※画像を大きく表示させるには縦315px×横600pxは必要

　
フェイスブックのシェア画像

安達

　↑↑↑↑縦横比を守っていると上のようなことにはなりません。
縦横比が違う場合は、文字など必要な部分を真ん中に配置して切れないようにしましょう。

OGPとは、SNS（フェイスブックなど）でリンクをシェアした場合に、
自動的に表示される画像や説明文の設定のことです。
設定した覚えがないですか？

ワードプレスの場合は、
アイキャッチ画像が自動的に表示されることが多いです。

●アイキャッチ画像を指定していない
●無料ブログでOGPの設定がない
場合は、　
タイトル、本文の前半部分、記事中に使われている画像が
自動的にOGPの設定に使われます。

安達

フェイスブックで、リンクをシェアした場合に
どのように表示されるか、
Open Graphオブジェクトデバッガー　で確認、
また古い情報を新しく更新することができます。