Social

ソーシャルメディアのプレビューでサムネイル画像が正しく表示されない場合はどうすればよいですか?

更新日時 February 21, 2018

対象製品

Marketing Hub Basic, Professional, Enterprise

ソーシャルメディアでページをシェアする場合、サムネイル画像はリンクと共にプレビュー表示されます。しかし、画像が必ずしも意図した通りに表示されるとは限りません。ソーシャルメディアのプレビューの問題に効果的に対処するには、ソーシャルメディアのプレビューの仕組み、最適な画像サイズ、各ソーシャルメディアサイト固有の特徴がサムネイル画像の外観にどのように影響するかについて理解を深めることが重要です。

ソーシャルメディアのプレビューの仕組み

ソーシャルメディアのプレビューは、ページのセクションに設定されているHTMLタグのメタタグの影響を受けます。メタタグは、Open Graph Protocol(OGP)の一部です。OGPはサイトのHTML内にある一連のタグで、これによりページをソーシャルメディアサイトと連携させることができます。OGPタグによって、シェアリンクのプレビューを作成するときに何にフォーカスするかをFacebook、LinkedIn、Google Plus、Twitterに伝えます。基本タグは次のとおりです。 

  • og:title - シェアするコンテンツのタイトル。
  • og:type - 動画やウェブページなどシェアするコンテンツのタイプ。
  • og:image - 画像のURL。これがサムネイル画像になります。
  • og:url - ページの一意のURL。

上記以外のタグは、FacebookのリンクプレビューやTwitterカードにて、リンクプレビューの生成に使用される基本タグです。

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

画像が意図したサイズで表示されない場合、どうすればいいですか?

ソーシャルサイトのプレビューでサムネイル画像が理想的に表示されない場合(端が切れていたり、サイズが小さく見えるなど)、最適な画像サイズに適合するように画像を調整する必要があります。

サムネイル画像の外観はプラットフォームによって異なりますが、一貫性を維持するために、16:9の比率(1600×900px、縁なし、上下パディング65px、左右パディング130px)で作成することをお勧めします。最適な画像サイズについての詳細は、こちらをご覧ください。 

サムネイル画像の外観に影響を与える可能性のあるサイト固有の特徴とは?

最適なサイズで画像を作成し、og:imageタグを正しく設定していても、サムネイル画像の外観に問題が生じる場合があります。以下は、Facebook、Twitter、LinkedInに共通する問題事例です。

  • Facebook:Facebookでリンクをシェアした後、画像がHubSpotソーシャルツールとは異なって見える場合があります。その場合、 Facebook Debuggerのご使用をお勧めします。このツールを使うと、Facebookのプレビューでどのように表示されるか、エラーの有無、プレビューが意図した通りに見えない理由(og:imageタが未設定であることや画像サイズが小さすぎるなど)を把握できます。
  • Twitter:Facebook Debuggerツールと同様に、 Twitter Card Validator(here)を使用して、サムネイル画像でのエラーを確認することができます。また、Twitterでは、ogタグに加えて専用のMetaタグ が必要です。 ブログの投稿には自動的にこの設定が適用されますが、ランディングページやウェブサイトページには手動で設定する必要があります。このタグは、コンテンツ設定またはページのヘッドHTMLに設定できます。
    • コンテンツ設定でこのタグを設定する場合、[Content(コンテンツ)] > [Content Settings(コンテンツ設定)]にて、左側の[Page Publishing(ページの公開)]を選択します。[Site Header HTML(サイトのヘッダーHTML)]フィールドにスクロールして、タグに貼り付け、[Save changes(変更を保存)]をクリックします。これで、コンテンツ設定で指定しているドメインのすべてのページにタグが適用されます。 
    • 特定のページにタグを設定する場合は、ページのエディターの上部にある[Settings(設定)]をクリックします。[Advanced Options(詳細オプション)]にスクロールして、[Edit Head HTML(ヘッドHTMLを編集)]をクリックします。ポップアップウィンドウにて、[Save changes(変更を保存)]をクリックします。

  • LinkedIn新しいサムネイル画像がすぐに表示されない場合があります。 LinkedInにはリンクのプレビューを生成するツールがなく、さらには週1回程度だけページをクロールします。そのため、新しい画像を設定した場合、すぐにはプレビューに表示されません。