Com o recurso de incorporação de conteúdo, você pode criar seções de conteúdo no HubSpot e, em seguida, incorporá-las ao seu site. Para adicionar uma incorporação de conteúdo a uma página de site externa, você pode usar o plug-in de incorporação de conteúdo para o editor Gutenberg do WordPress ou copiar o código de incorporação diretamente no HubSpot.
Abaixo, saiba mais sobre como copiar o código de incorporação de conteúdo, além das práticas recomendadas para manter a pontuação de Cumulative Layout Shift (CLS) da página.
Observação: o conteúdo de incorporação não é carregado através de um iframe, mas é injetado via JavaScript. Os mecanismos de pesquisa podem executar JavaScript e escolherão o conteúdo de incorporação, evitando, portanto, quaisquer problemas de SEO que os iframes possam apresentar.
Para copiar o código de uma seção de incorporação de conteúdo:
Em seguida, você pode colar o código de incorporação no conteúdo externo conforme necessário. Ao colar o código de incorporação, lembre-se do seguinte:
hs-sites. Isso ajuda a preservar os rodapés específicos do seu domínio. No entanto, qualquer conteúdo incluído no rodapé hs-sites será inserido na página externa junto com a incorporação de conteúdo. Por exemplo, se você tiver uma isenção de direitos autorais no rodapé de domínio hs-sites, os direitos autorais aparecerão na página externa com o conteúdo de incorporação. Saiba como modificar conteúdo em rodapés específicos de domínio.Dependendo de como você usa o código de incorporação, é possível que o conteúdo possa afetar a pontuação de Cumulative Layout Shift (CLS), que mede quanto o conteúdo da página se move no viewport do visitante durante o carregamento. Há dois fatores que afetarão sua pontuação de CLS:
Se você tiver um impacto negativo na pontuação de CLS após incorporar o conteúdo, consulte as seções de práticas recomendadas abaixo para obter possíveis soluções.
Quando possível, o conteúdo deve ser incorporado abaixo da dobra da página. Isso ocorre porque a pontuação de CLS se aplica ao conteúdo acima da dobra, já que é isso o que o visitante normalmente vê no carregamento inicial da página. A incorporação abaixo da dobra reduzirá qualquer mudança de layout inicial causada pela incorporação de conteúdo, melhorando a experiência do usuário e reduzindo a pontuação negativa de CLS.
Por padrão, o código de incorporação de conteúdo inclui o script de incorporação (linha 2 abaixo).
<div id="hs-embed-61405464936-1wgzc8"> <script type="text/javascript" src="[EMBED SCRIPT SRC]">
</script> <script> hbspt.content.create({...}); </script></div>
Ao incorporar o conteúdo em uma página externa, é recomendado mover o script de incorporação para o <head> da página em vez de ao lado do script de criação de incorporação.
A altura do contêiner de incorporação de conteúdo afetará o quanto o conteúdo em torno dele será deslocado durante o carregamento. A altura do contêiner depende dos módulos e do conteúdo incluído — quanto mais conteúdo for incorporado, mais a página será deslocada.
Por esse motivo, se você estiver incorporando o conteúdo acima da dobra, é recomendado definir uma altura mínima para a incorporação, incluindo uma regra de CSS min-height inline no wrapper do contêiner de incorporação.
Se você estiver incorporando conteúdo em um CMS externo, poderá haver opções de layout disponíveis no editor de página externa para atualizar a altura da incorporação. Caso contrário, você poderá adicionar manualmente esse estilo ao <div> de nível superior do conteúdo incorporado, como mostrado abaixo.
<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>
Observação: se você personalizar o conteúdo incorporado por página, talvez seja necessário atualizar a regra de altura mínima em cada página para que o conteúdo seja exibido corretamente.
Para encontrar a altura mínima, você pode inspecionar a página onde o conteúdo está incorporado. Para páginas da HubSpot, você pode usar o recurso de visualização de página para encontrar a altura mínima antes de publicar a página. Saiba mais sobre como visualizar conteúdo no WordPress.
Ao exibir a página com o conteúdo incorporado:
<div> do conteúdo incorporado.