使用嵌入代码嵌入内容
上次更新时间: 二月 13, 2025
除非另有说明,否则适用于以下任何订阅:
|
利用内容嵌入功能,您可以在 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>
上。 - 要查看计算出的高度,某些浏览器会在悬停时显示容器的高度,也可以点击开发工具抽屉中的计算选项卡,查找高度属性。