跳到内容

使用嵌入代码嵌入内容

上次更新时间: 二月 13, 2025

除非另有说明,否则适用于以下任何订阅

内容 Hub   Professional , Enterprise

利用内容嵌入功能,您可以在 HubSpot 中创建内容部分,然后将其嵌入到您的网站中。要将内容嵌入添加到外部网站页面,你可以使用WordPress 古腾堡编辑器的内容嵌入插件,或者直接在 HubSpot 中复制嵌入代码。

下面将详细介绍如何复制内容嵌入代码,以及维护页面累积布局偏移(CLS)得分的最佳做法。

请注意:嵌入内容不是通过 iframe 加载的,而是通过 JavaScript 注入的。搜索引擎可以执行 JavaScript 并识别嵌入内容,因此可以避免 iframe 可能带来的搜索引擎优化难题。

复制嵌入代码

复制内容嵌入部分的嵌入代码:

  • 在 HubSpot 帐户中,导航到内容 > 嵌入
  • 将鼠标悬停在嵌入内容上,然后单击 "更多"并选择 "获取嵌入代码"。

  • 在对话框中,单击 "复制 "以复制嵌入代码。

然后,您可以根据需要将嵌入代码粘贴到外部内容中。粘贴嵌入代码时,请注意以下几点:

  • 内容嵌入的样式来自其嵌入的页面,而不是 HubSpot。要调整内容嵌入的外观,你需要更新页面的 CSS。如果您使用的是 WordPress,请学习如何添加自定义 CSS
  • 内容嵌入代码不包括你的 HubSpot 跟踪代码。您需要在外部页面上单独安装跟踪代码,以利用 HubSpot 功能,如流量分析私人同意横幅广告
  • 要通过嵌入代码嵌入内容,HubSpot会通过默认的hs-sites 域页脚插入内容嵌入。这有助于保留特定域的页脚。但是,包含在hs-sites 页脚中的任何内容都将与内容嵌入一起插入到外部页面。例如,如果您在hs-sites 域页脚中设置了版权免责声明,则版权将与嵌入内容一起显示在外部页面上。了解如何修改特定域页脚中的内容

了解嵌入内容的最佳实践

根据您使用嵌入代码的方式,内容可能会影响页面的累积布局偏移 (CLS) 分数,该分数用于衡量页面内容在加载时在访问者视窗中的移动程度。有两个因素会影响 CLS 分数:

如果您在嵌入内容后发现 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-height CSS 规则,设置嵌入的最小高度。

如果您要将内容嵌入到外部内容管理系统中,外部页面编辑器中可能会有可用的布局选项来更新嵌入高度。否则,您可以手动将此样式添加到嵌入内容的顶级<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> 上。
  • 要查看计算出的高度,某些浏览器会在悬停时显示容器的高度,也可以点击开发工具抽屉中的计算选项卡,查找高度属性。

这篇文章有帮助吗?
此表单仅供记载反馈。了解如何获取 HubSpot 帮助