HubSpotでソーシャルメディアへの投稿を作成して公開すると、対応するソーシャルネットワークで投稿の画像プレビューの生成が試みられます。投稿に入力したリンクに基づき、ソーシャルネットワークではページのソースコードに含まれるメタタグをスキャンし、ウェブサイトのrobots.txtファイルをクロールします。
WordPressなどの外部プロバイダーでウェブサイトをホスティングしている場合、投稿のプレビューが想定どおりに表示されなければ、以下の手順に従ってください。
robots.txtを更新する
robots.txtは検索エンジンに対し、ウェブサイトをインデックス化する方法を伝えるためのファイルです。robots.txtファイルが追加されていなかったり、適切に構成されていなかったりすると、ソーシャルネットワークではページのコンテンツを解析できません。FacebookとTwitterではいずれもユーザーエージェント文字列を指定しています。これらの文字列をrobots.txtファイルに追加する必要があります。
User-agent: facebookexternalhit
Disallow:
User-agent:Twitterbot
Disallow:
LinkedInではユーザーエージェント文字列に関するドキュメントを提供していませんが、LinkedIn投稿インスペクターを使用して、ウェブサイトのコンテンツをLinkedInでクロールできるかどうかを確認できます。
ウェブサイトページの<head>セクションにメタグタグを追加する
検索エンジンとソーシャルネットワークはHTMLのヘッドセクションを解析して、ページのプレビューを生成するために必要なメタデータを探します。次のように、プライマリ メタ タグの後にFacebookとTwitterのメタデータを含める必要があります。
<!-- Primary Meta Tags -->
<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="title" content="Meta Tags — Preview, Edit and Generate">
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta property="og:title" content="Title of your Website Page">
<meta property="og:description" content="Description of your Website Page">
<meta property="og:image" content="https://example.com/image.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://example.com/">
<meta property="twitter:title" content="Title of your Website Page">
<meta property="twitter:description" content="Description of your Website Page">
<meta property="twitter:image" content="https://example.com/image.png">
上記の各メタタグのcontent属性には、ページに応じた値を入力します。メタタグを検証するには、Facebookデバッガツール、Twitterカードバリデーター、LinkedIn投稿インスペクターを使用できます。
サムネイル画像のサイズ要件
挿入したリンクのサムネイル画像がソーシャルプレビューで正しく表示されない場合（画像の一部が切り取られていたり、縦横比が誤っていたりする場合）、ソーシャルネットワークでの正しい寸法になるように画像を編集してから、ページを再公開する必要があります。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のソーシャル パブリッシング ツールに警告が表示されるので、それに応じて画像を調整します。
それでもリンクプレビューが正しく表示されない場合は、トラブルシューティングガイドをご覧ください。
Social
Marketing Hub Professional, Enterprise
