Social

サムネイル画像がソーシャルプレビューで正しく表示されません。どうすればよいですか?

更新日時 October 12, 2018

対象製品

Marketing Hub
marketing-basic-pro-enterprise
Basic, Professional, Enterprise

ソーシャルメディアでページを共有すると、ソーシャルプレビューでリンクと一緒にサムネイル画像が表示されますが、思い通りに画像が表示されないことがあります。ソーシャルプレビューの問題を効率よく解決するには、ソーシャルプレビューの仕組みや最適なサムネイル画像のサイズ、画像の見え方に影響する各ソーシャルメディアサイトの特性をしっかりと理解しておくことが重要です。  

ソーシャルプレビューの仕組みとは? 

ソーシャルプレビューの見え方はメタタグやお客様のページの 部分に設定される HTML タグによって決まります。 こういったタグは、Open Graph Protocol (OGP: オープン・グラフ・コントロール) と呼ばれる、ウェブページをソーシャルメディアのウェブサイトと統合することを可能にする、お客様のウェブサイトの HTML 内にある複数のタグの一部です。こういったタグは共有リンクのプレビューを作成する際にどの情報に注目すればよいかをFacebook や LinkedIn、Google Plus、Twitter に伝達する役割を果たします。主なタグは以下の通りです: 

  • og:title - 共有するコンテンツのタイトル。
  • og:type - 動画や画像など、共有するコンテンツの種類。
  • og:image - 写真のURL。これがサムネイル画像になります。
  • og:url - そのページのURL。 

このほかにもタグはたくさんありますが、Facebook のリンクプレビューや Twitter カードなど、リンクのプレビューを生成する際に使われる基本的なタグはこの4つとなります。  

ブログ記事のタイトル、メタディスクリプション、そしてサムネイル画像のタグは自動的に設定されますが、ランディングページやそのほかのページでは自動設定されるタグはタイトルとメタディスクリプションのみとなり、サムネイル画像の手動設定が必要となります。ランディングページやウェブサイトページのサムネイルを設定する方法についてはこちらの記事をご覧ください。  

画像のサイズが希望通りに表示されないのですがどうすればよいですか? 

ソーシャルプレビューでサムネイル画像が途中で切れていたり、サイズがずれていたりと思い通りに表示されない場合は、最適なサムネイル画像サイズに合うよう調整する必要があるかもしれません。

サムネイル画像の見え方はプラットフォームによって異なりますが、均一性を確保するには 16:9 の比率に従うことをおすすめします。1600px × 900px 境界線なし、上下に 65px のパディング、そして左右に 130px のパディングを設定します。最適な画像サイズについての詳細は こちらをご覧ください。 

サムネイル画像の見え方に影響を与えるサイト特性にはどのようなものがありますか? 

最適な画像サイズを設定し、og:image タグを正しくセットアップしてもサムネイル画像がきちんと表示されない場合もあります。Facebook や Twitter、LinkedIn で起こりやすい問題を下にまとめました: 

  • Facebook: Facebook 上でリンクを共有すると、HubSpot のソーシャルツールとは画像が異なって表示される場合があります。 このような時に便利なツールが Facebook Debuggerです。Debugger を使用すると Facebook がソーシャルプレビューに用いる画像のほか、現在どのようなエラーがあり、なぜプレビューが正しく表示されないのかを知ることができます (og:image タグが抜けている、画像が小さすぎるなど) 。 
  • Twitter: Facebook デバッガーツールと同じように、 こちら の Twitter カードバリデータを使ってサムネイル画像のエラーを検出します。 また、Twitter は og タグに加えて特殊なメタタグ が必要です。ブログ記事の場合は自動的に設定されますが、ランディングページやウェブサイトのページの場合は手動設定が必要となります。 このタグはコンテンツ設定またはそのページの タグ HTML 内に配置します。
    • メタタグをコンテンツ設定に配置するには、[Content (コンテンツ)] > [Content Setting (コンテンツ設定)] を開き、左から[Page Publishing (ページの公開)] を選択します。 Site Header HTML (サイトヘッダー HTML) の項目までページをスクロールし、ここにタグを貼り付けてから [Save changes (変更を保存)]をクリックしてください。これで、コンテンツ設定で指定するドメインのすべてのページにこのタグが適用されます。  
    • 特定のページにタグを配置するには、そのページのエディターの上にある[Settings (設定)] をクリックし、 Advanced Options (詳細設定) までスクロールして [Edit Head HTML (ヘッド HTML を編集)]をクリックしてください。 ポップアップ画面にタグを貼り付けたら [Save changes (変更を保存)]をクリックします。

  • LinkedIn: LinkedIn で最も一般的な問題は、新しいサムネイル画像がすぐに表示されないことです。 LinkedIn にはリンクプレビューを生成するツールがないうえ、ページ情報が一週間に一度ほどの頻度でしか更新されません。よって新しい画像を設定してもソーシャルプレビューにはすぐに表示されない場合があります。