更新日時 2023年 1月 19日
以下の 製品でご利用いただけます（別途記載されている場合を除きます）。
Marketing Hub Professional, Enterprise
|
| Marketing Hub Basic（旧製品） |
HubSpotでソーシャル投稿へのリンクを追加すると、サムネイル画像、ページタイトル、およびページの説明を含むプレビューが表示されます。画像、タイトル、または説明が表示されない場合やサムネイル画像に伴う問題が確認された場合は、以下の手順を使用してトラブルシューティングを行います。
ソーシャルプレビューは、ページHTMLの<head>セクション内のメタタグに基づいています。これらのタグは、Facebook、LinkedIn、Twitterなどのソーシャルメディアサイトで共有リンクのプレビューを作成する際に、注目すべき箇所を示します。基本的なメタタグは次のとおりです。
- og:title：コンテンツのタイトル。
- og:type：動画やウェブページなどのコンテンツのタイプ。
- og:image：コンテンツを表す画像のURL。
- og:URL：永続的なIDとして使用されるコンテンツ固有のURL。
- og:description：画像の概要に関する説明。
ブログ記事にはタイトル、メタディスクリプション、およびサムネイル画像が自動的に設定されます。ランディングページとウェブサイトページでは、タイトルとメタディスクリプションは自動的に設定されますが、サムネイル画像は手動で設定する必要があります。
注：LinkedInは、サムネイル画像、ページタイトル、およびURLをプレビューカードに表示しますが、メタディスクリプションは含まれません。
サムネイル画像、ページタイトル、またはページの説明が記事プレビューに表示されない
ソーシャル投稿のプレビューにサムネイル画像、ページタイトル、またはページの説明が表示されない場合は、HubSpotでまたは外部のデバッグツールを使用して、トラブルシューティングすることができます。
HubSpot内でのトラブルシューティング
HubSpotでホストされているブログ記事、ランディングページ、またはウェブサイトページにリンクしている場合は、サムネイル画像がページまたは投稿の設定で設定されていることを確認してください。
og:imageタグを手動で設定してサムネイル画像を追加することもできます。
-
HubSpotアカウントで、ランディングページまたはウェブサイトページに移動します。
- ページの上にカーソルを重ねて［編集］をクリックします。
- コンテンツエディターで、［設定］タブをクリックし、［詳細オプション］をクリックします。
- ［追加のコードスニペット］セクションで、［ヘッダーHTML］フィールドこのコードスニペットを追加します。
<meta property="og:image" content="IMG URL">
- IMG URLを画像ファイルのURLと置換します。
- Twitter用画像をさらに最適化するには、この追加のコードスニペットを［ヘッダーHTML］フィールドに入力します。
<meta name="twitter:card" content="summary_large_image">
- 右上の［公開］または［更新］をクリックして、変更を適用します。
ブラウザー開発者ツールを使用したトラブルシューティング
ソーシャル投稿で外部ページを共有している場合は、Chromeデベロッパーツールなどのブラウザー開発者ツールを使用して、ページのメタタグが正しく設定されていることを確認できます。ページのソースを表示してから、以下をチェックして確定します。
og:imageやその他のメタタグが正しく表示される。- 各タグの詳細が正しい。例えば、
og:imageタグのサムネイル画像のURLが正しいことをチェックします。 - 各タイプのメタタグが1回しか出現しない。同じメタタグが複数存在する場合は、ソーシャルネットワークがリンクプレビューを生成するときに正しいものを選択しない可能性があります。
- メタタグがHTMLの最上部近くにある。メタタグの前に余分なコードやマークアップがある場合は、ソーシャルネットワーククローラーがこれらのタグを特定できない可能性があります。
ソーシャルネットワークのデバッグツールを使用したトラブルシューティング
ソーシャルプレビューとメタタグが一致しない場合は、ソーシャルネットワークがそのページを再クロールする必要があります。ソーシャルネットワークごとに次の検証ツールを使用して、エラーを明らかにしたり、ページの再クロールをトリガーしたりします。
- Facebookシェアデバッガー： Facebookは、24時間ごとに共有コンテンツを自動的に再クロールします。手動で再クロールをトリガーするには、シェアデバッガーで［Scrape Again（再スクレイプ）］をクリックします。
- Twitter Card Validator：Twitterは、投稿の公開後7日間コンテンツをキャッシュします。Card Validatorで［カードをプレビュー］をクリックして、コンテンツの再クロールをトリガーします。
- LinkedIn Post Inspector：LinkedInは、投稿の公開後7日間コンテンツをキャッシュします。Post Inspectorで［検査］をクリックして、コンテンツの再クロールをトリガーします。
通常、ページを再クロールする前に公開された投稿には、まだ正しくない画像が含まれています。og:imageタグがページに設定されていない場合は、ソーシャル投稿に含める最も適切な画像を見つけるため、ソーシャルネットワークによってページがスキャンされます。通常は検出された最初の画像になります。ページクロールを防ぐためにrobots.txtファイルまたはセキュリティーソフトウェアが使用されている場合は、リンクプレビュー画像がまったく表示されない場合があります。
サムネイル画像の表示の問題
ソーシャル投稿のプレビューにサムネイル画像が表示されるが、間違った画像が表示される場合は、以下をチェックする必要があります。
画像のサイズまたは比率が正しくない
ソーシャルプレビューでサムネイル画像が正しく表示されない場合（画像が切り捨てられたり、画像の比率が正しくなかったりする場合）は、投稿先となるソーシャルネットワークに適切な寸法になるように画像を編集し、ページを再公開する必要があります。
各ネットワークでサムネイル画像を最適化するには、次の寸法にすることをお勧めします。
- 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のソーシャルパブリッシングツールに警告が表示され、画像の調整に役立てることができます。
