更新日時 2024年 10月 24日
以下の 製品でご利用いただけます（別途記載されている場合を除きます）。
Content Hub
Professional
,
Enterprise
|
コンテンツ埋め込み機能を使用すると、HubSpotでコンテンツのセクションを作成して、それらをウェブサイトに埋め込むことができます。外部ウェブサイトページにコンテンツ埋め込みを追加するには、WordPressのGutenbergエディター用のコンテンツ埋め込みプラグインを使用するか、埋め込みコードをHubSpotで直接コピーすることができます。
以下では、コンテンツ埋め込みコードをコピーする方法について、またページの累積レイアウトシフト（CLS）スコアを維持するためのベストプラクティスについて説明します。
注：埋め込みコンテンツはiframeを介して読み込まれるのではなく、JavaScriptを介して挿入されます。検索エンジンはJavaScriptを実行でき、埋め込みコンテンツを認識するようになるので、iframeで生じる可能性のあるSEOの課題が回避されます。
埋め込みコードのコピー
コンテンツ埋め込みセクション用の埋め込みコードをコピーするには：
- HubSpotアカウントにて、［コンテンツ］＞［埋め込み］の順に進みます。
- 埋め込みの上にマウスポインターを置いて［その他］をクリックし、［埋め込みコードを取得］を選択します。
- ダイアログボックスで［コピー］をクリックして埋め込みコードをコピーします。
その後、必要に応じて埋め込みコードを外部コンテンツの中に貼り付けることができます。埋め込みコードを貼り付けるときは、次の点に注意してください。
- コンテンツ埋め込みのスタイル設定は、HubSpotからではなく、埋め込み先のページから取得されます。コンテンツ埋め込みの外観を調整するには、そのページのCSSを更新する必要があります。WordPressをご使用の場合は、カスタムCSSを追加する方法をご覧ください。
- コンテンツ埋め込みコードには、HubSpotトラッキングコードが含まれていません。トラフィックアナリティクスやプライベート同意バナーなどのHubSpot機能を活用するには、外部ページに個別にトラッキングコードをインストールする必要があります。
- 埋め込みコードを介してコンテンツを埋め込むとき、HubSpotでは既定の
hs-sitesドメインフッターによってコンテンツ埋め込みを挿入します。これにより、ドメイン固有のフッターを保持しやすくなります。ただし、hs-sitesフッターに含まれるコンテンツは、コンテンツ埋め込みとともに外部ページに挿入されます。例えば、hs-sitesドメインフッターに著作権に関する免責事項がある場合、コンテンツが埋め込まれた外部ページに著作権が表示されます。詳しくは、ドメイン固有のフッターでコンテンツを変更する方法をご覧ください。
コンテンツの埋め込みに関するベストプラクティス
埋め込みコードの使用方法によっては、コンテンツがページの累積レイアウトシフト（CLS）スコアに影響を与える可能性があります。このスコアは、読み込み中にページコンテンツが訪問者のビューポート内をどれだけ移動するかを測定します。CLSスコアに影響を与える要因は次の2つです。
- 埋め込む場所（ファーストビューの上か下か、どこにスクリプトが埋め込まれるかなど）。
- 埋め込みの高さ。これはコンテンツ埋め込みに含まれるモジュールに直接関係します。含まれるモジュールが多いほど、コンテンツが読み込まれるにつれてページレイアウトが大きく変化する可能性があります。
コンテンツを埋め込んだ後にCLSスコアに悪影響が見られる場合は、下記のベスト プラクティス セクションを参照して、考えられる解決策を検討してください。
ファーストビューの下に埋め込む
可能であれば、ページのファーストビューの下にコンテンツを埋め込みます。なぜなら、ファーストビューの上にあるコンテンツにCLSスコアが適用されるからです（初期のページ読み込みでは通常、これが訪問者に表示されます）。ファーストビューの下にコンテンツを埋め込むと、コンテンツ埋め込みによって生じる初期レイアウトシフトが減り、ユーザーエクスペリエンスが向上し、CLSスコアへの悪影響が軽減されます。
埋め込みスクリプトの場所を変更する
既定では、コンテンツ埋め込みコードの中に埋め込みスクリプトが含まれます（下記の2行目）。
<div id="hs-embed-61405464936-1wgzc8"> <script type="text/javascript" src="[EMBED SCRIPT SRC]">
</script> <script> hbspt.content.create({...}); </script></div>
外部ページにコンテンツを埋め込む際には、埋め込みスクリプトを埋め込み作成スクリプトの横ではなく、ページの<head>に移動することをお勧めします。
最小限の高さを設定する
コンテンツ埋め込みコンテナーの高さは、読み込み中に周囲のコンテンツがどれだけ移動するかに影響を与えます。コンテナーの高さはモジュールとそれに含まれるコンテンツに依存し、埋め込み内のコンテンツが多いほどページが大きく移動します。
このため、コンテンツをファーストビューの上に埋め込む場合は、埋め込みコンテナーラッパーにインラインmin-heightCSSルールを含めることで、埋め込みの高さを最小限にすることをお勧めします。
外部CMSにコンテンツを埋め込む場合は、外部ページエディターのレイアウトオプションを使用して埋め込みの高さを更新できる可能性があります。それ以外の場合は、以下に示すように、埋め込みコンテンツの最上位<div>にこのスタイルを手動で追加できます。
<div id="hs-embed-61405464936-1wgzc8" style="min-height: 500px;"> <script type="text/javascript" src="[EMBED SCRIPT SRC]"></script> <script> hbspt.content.create({...}); </script></div>
注：ページごとに埋め込みコンテンツをカスタマイズする場合、コンテンツが正しく表示されるように、各ページの最小限の高さルールを更新する必要が生じることがあります。
最小限の高さを見つけるには、コンテンツが埋め込まれるページを調べることができます。HubSpotページの場合、ページを公開する前にページプレビュー機能を使用して最小限の高さを確認できます。詳しくは、WordPressでのコンテンツのプレビューについてご覧ください。
コンテンツが埋め込まれたページを表示しているときに：
- コンテンツ埋め込みを右クリックして、［検査］を選択します。
- インスペクターパネルで、埋め込まれたコンテンツの最上位
<div>の上にマウスポインターを置きます。 - 計算された高さを表示するには、ブラウザーによってはマウスポインターを置いたときにコンテナーの高さが表示されますが、開発者ツールドロワーの［Computed］タブをクリックして「高さ」属性を探すこともできます。
