콘텐츠 임베드 기능을 사용하면 HubSpot에서 콘텐츠 섹션을 만든 다음 웹사이트에 임베드할 수 있습니다. 외부 웹사이트 페이지에 콘텐츠 임베드를 추가하려면 워드프레스의 구텐베르크 편집기용 콘텐츠 임베드 플러그인을 사용하거나 HubSpot에서 직접 임베드 코드를 복사할 수 있습니다.
아래에서 콘텐츠 임베드 코드를 복사하는 방법과 페이지의 CLS(누적 레이아웃 시프트) 점수를 유지하기 위한 모범 사례를 자세히 알아보세요.
참고: 임베드된 콘텐츠는 iframe을 통해 로드되는 것이 아니라 JavaScript를 통해 삽입됩니다. 검색 엔진은 자바스크립트를 실행할 수 있고 임베드된 콘텐츠를 인식할 수 있으므로 아이프레임으로 인해 발생할 수 있는 SEO 문제를 피할 수 있습니다.
임베드 코드 복사
콘텐츠 임베드 섹션의 임베드 코드를 복사하려면 다음과 같이 하세요:
- HubSpot 계정에서 콘텐츠 > 내장으로 이동합니다.
- 임베드 위로 마우스를 가져간 다음 자세히를 클릭하고 임베드 코드 가져오기를 선택합니다.
- 대화 상자에서 복사를 클릭하여 임베드 코드를 복사합니다.
그런 다음 필요에 따라 임베드 코드를 외부 콘텐츠에 붙여넣을 수 있습니다. 임베드 코드를 붙여넣을 때 다음 사항에 유의하세요:
- 콘텐츠 임베드는 HubSpot이 아닌 임베드된 페이지에서 해당 스타일을 받습니다. 콘텐츠 임베드의 모양을 조정하려면 페이지의 CSS를 업데이트해야 합니다. 워드프레스를 사용하는 경우 사용자 정의 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 규칙을 포함시켜 임베드의 최소 높이를 설정하는 것이 좋습니다.
외부 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 페이지의 경우 페이지 미리 보기 기능을 사용하여 페이지를 게시하기 전에 최소 높이를 찾을 수 있습니다. 워드프레스에서 콘텐츠 미리 보기에 대해 자세히 알아보세요.
콘텐츠가 임베드된 페이지를 봅니다:
- 임베드된 콘텐츠를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
- 검사기 패널에서 임베드된 콘텐츠의 최상위 레벨
<div> 위로 마우스를 가져갑니다.
- 계산된 높이를 보려면 일부 브라우저에서는 마우스오버 시 컨테이너의 높이가 표시되거나 개발자 도구 서랍에서 계산된 탭을 클릭하여 높이 속성을 찾을 수 있습니다.
Website Pages
