お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Social

ソーシャルツールでリンクプレビューをトラブルシューティングする

更新日時 2020年 10月 27日

対象製品

Marketing Hub  Professional, Enterprise
Marketing Hub Basic(旧製品)

ソーシャル投稿を公開する前に、投稿のサムネイル画像がどのように表示されるかをプレビューできます。ソーシャルプレビューのサムネイル画像に伴う問題をトラブルシューティングする方法を確認してください。

ソーシャルプレビューは、ページHTMLの<head>セクション内のメタタグに基づいて作成されます。これらのタグは開封グラフプロトコルの一部であり、これにより、ウェブページをソーシャルグラフ内のリッチオブジェクトにすることができます。これらのタグは、Facebook、LinkedIn、Twitterなどのソーシャルメディアサイトで共有リンクのプレビューを作成する際に、注目すべき箇所を示します。基本的なメタタグは次のとおりです。

  • og:title:コンテンツのタイトル。
  • og:type:動画やウェブページなどのコンテンツのタイプ。
  • og:image:コンテンツを表す画像のURL。
  • og:URL:永続的なIDとして使用されるコンテンツ固有のURL。
  • og:description:画像の概要に関する説明。

ブログ記事にはタイトル、メタディスクリプション、およびサムネイル画像が自動的に設定されます。ランディングページとウェブサイトページでは、サムネイル画像を手動で設定する必要があります

 

サムネイル画像、ページタイトル、またはページの説明が記事プレビューに表示されない

ソーシャル投稿のプレビューに想定していたサムネイル画像、ページタイトル、またはページの説明が表示されない場合は、この問題を解決するために使用可能ないくつかのデバッグツールがあります。

サムネイル画像が指定されていて、メタタグが検出可能であることを確認します

HubSpotでホストされているブログ記事、ランディングページ、またはウェブサイトページにリンクしている場合は、サムネイル画像が選択されていることを確認してください。

投稿内で外部ページが共有されている場合は、Chromeデベロッパーツールなどのブラウザーの開発者ツールを使用して、ページのソースを表示してから、og:imageタグを探して、どの画像が表示されるかを確認します。

inspect-for-featured-image

og:imageタグが存在しており、サムネイル画像URLが正しいことを確認したにもかかわらず、投稿のリンクプレビューが表示されない場合は、以下の点も確認できます。

  • 各タイプのメタタグの出現が1回だけであることを確認します。ページに同じメタタグが複数回出現している場合、一部のソーシャルネットワークでは、リンクプレビューを生成しようとして適切なものを選択しない場合があります。 
  • メタタグがHTMLの先頭近くにあることを確認します。メタタグの前に余分のコードやマークアップがある場合、一部のソーシャルネットワークのクローラーがそれらを見つけられない場合があります。

ソーシャルネットワークのデバッグツールを使用して画像とメタタグを検証する

og:imageタグとして設定されたものとは別の画像がソーシャルプレビューに表示される場合は、ソーシャルネットワークでそのページを再クロールする必要がある場合があります。以下の検証ツールを使用して、ページの再クロールをトリガーし、公開に影響する可能性のあるエラーを表示することができます。

  • Facebook:Facebookシェアデバッガーを使用してメタタグの警告とエラーの表示やコンテンツURLの再取得を行うと、最新のFacebookリンクプレビューが生成されます。
  • Twitter:Twitter Card Validatorを使用してメタタグの警告とエラーの表示やコンテンツURLの再取得を行うと、最新のTwitterカードプレビューが生成されます。
  • LinkedIn:LinkedIn Card Inspectorを使用してメタタグの警告とエラーの表示やコンテンツURLの再取得を行うと、最新のLinkedInカードプレビューが生成されます。

注:LinkedInは、サムネイル画像、ページタイトル、およびURLをプレビューカードに表示しますが、メタディスクリプションは含まれません

og:imageタグがページに設定されていない場合は、ソーシャル投稿に含める最も適切な画像を見つけるため、ソーシャルネットワークによってページがスキャンされます。通常は検出された最初の画像になります。ページクロールを防止するためにrobots.txtファイルまたは特定のセキュリティソフトウェアが使用されていると、リンクプレビュー画像がまったく表示されない場合があります。

 

サムネイル画像のサイズ要件

挿入されたリンクのサムネイル画像がソーシャルプレビューに正しく表示されない(画像が切れていたり、比率がおかしかったり)場合は、投稿先のソーシャルネットワークの正しい寸法になるように画像を編集してから、ページを再公開する必要があります。Facebookに投稿する場合は、Facebookのドキュメントに記載されているサムネイル画像の要件で詳細を確認できます。

各ネットワークでサムネイル画像を最適化するには、次の寸法にすることをお勧めします。

  • Facebook:1.91:1
  • Twitter:リンク記事内の写真投稿は16:9で、サムネイル画像は1.91:1
  • Instagram(正方形):1:1
  • Instagram(縦向き):4:5
  • Instagram(横向き):1.91:1
  • LinkedIn(横向き):1.91:1

ソーシャルメディアへの投稿に含めるメディアが各ネットワークのファイルサイズのガイドラインに従っていることを確認してください。特定のネットワークに投稿するにはファイルが大きすぎるとHubSpotが判断すると、警告が表示されます。各ソーシャルネットワークの最大ファイルサイズは以下のとおりです。

  • Facebook:8MB(ピクセル化を避けるためPNGファイルの場合1MB未満を推奨)
  • Instagram:8MB
  • Twitter:5MB(GIFの場合は15MB)
  • LinkedIn:10MB

画像の色と鮮明さの不一致

画像の色の違い

ソーシャルメディアへの投稿にサムネイル画像がどのように表示されるかは、埋め込みカラープロファイルによって影響される可能性があります。共通ではないカラープロファイルはシステムによって異なる方法で処理されます。ファイルマネージャーで画像をプレビューする際に色が異なって見える場合があるのは、このことが原因です。外部ツールを使用して画像URLを表示することにより、共通ではないカラープロファイルを使用しているかどうかを確認できます。必要に応じて、Photoshopなどの写真編集ツールを使用して問題の原因となっているカラープロファイルを削除してから、ページを再公開した後、ソーシャルメディアへの投稿を公開できます。

画像の鮮明さの違い

HubSpotのファイルマネージャーでは、HubSpotでホストされているコンテンツの読み込み速度を最適化するためにJPEGとPNGで画像の圧縮を使用します。ソーシャルメディアネットワークでも投稿で画像の圧縮を使用していますが、HubSpotで表示される品質とは異なる場合があります。そのため、各ネットワークの(推奨されるアスペクト比で)比較的高い解像度の画像を使用することをお勧めします。画像がソーシャルネットワークの要件に準拠していない場合、HubSpotのソーシャルパブリッシングツールに警告が表示されるので、それに応じて画像を調整します。