Met de functie voor het insluiten van inhoud kun je inhoudsdelen maken in HubSpot en deze vervolgens insluiten op je website. Om content in te sluiten op een externe websitepagina, kun je de content insluitplugin voor WordPress's Gutenberg editor gebruiken of de insluitcode rechtstreeks in HubSpot kopiëren.
Hieronder lees je hoe je de code voor het insluiten van content kopieert, samen met best practices voor het behouden van de CLS-score (Cumulative Layout Shift) van je pagina.
Let op: ingesloten inhoud wordt niet geladen via een iframe, maar wordt geïnjecteerd via JavaScript. Zoekmachines kunnen JavaScript uitvoeren en pikken de ingesloten inhoud op, waardoor SEO-uitdagingen die iframes kunnen opleveren, worden vermeden.
Kopieer de insluitcode voor een sectie waarin inhoud is ingesloten:
Je kunt de insluitcode vervolgens naar behoefte in je externe inhoud plakken. Houd bij het plakken van de insluitcode rekening met het volgende:
hs-sites domein footer. Dit helpt om je domeinspecifieke voetteksten te behouden. Echter, alle content die is opgenomen in de hs-sites voettekst wordt samen met de content embed ingevoegd op de externe pagina. Als u bijvoorbeeld een disclaimer over auteursrecht in de voettekst van het domein hs-sites hebt opgenomen, wordt de copyright samen met de ingesloten inhoud op de externe pagina weergegeven. Leer hoe u inhoud in domeinspecifieke voetteksten kunt wijzigen.Afhankelijk van hoe je de insluitcode gebruikt, is het mogelijk dat de content invloed heeft op de CLS-score (Cumulative Layout Shift) van je pagina, die meet hoeveel de inhoud van je pagina beweegt in de viewport van de bezoeker tijdens het laden. Er zijn twee factoren die je CLS-score beïnvloeden:
Als je een negatief effect ziet op je CLS-score na het insluiten van inhoud, bekijk dan de onderstaande best practices voor mogelijke oplossingen.
Waar mogelijk moet inhoud onder de vouw van de pagina worden ingesloten. De CLS-score is namelijk van toepassing op content boven de vouw, omdat dat meestal is wat de bezoeker ziet als de pagina voor het eerst wordt geladen. Door inhoud in te sluiten onder de vouw wordt de initiële verschuiving van de lay-out die wordt veroorzaakt door het insluiten van inhoud verminderd, waardoor de gebruikerservaring wordt verbeterd en de negatieve CLS-score wordt verlaagd.
De insluitcode voor inhoud bevat standaard het insluitscript (regel 2 hieronder).
<div id="hs-embed-61405464936-1wgzc8"> <script type="text/javascript" src="[EMBED SCRIPT SRC]">
</script> <script> hbspt.content.create({...}); </script></div>
Als je inhoud insluit op een externe pagina, is het aan te raden om het insluitscript te verplaatsen naar de <head> van de pagina in plaats van naast het insluitscript.
De hoogte van de container voor het insluiten van inhoud heeft invloed op de mate waarin de inhoud eromheen verschuift tijdens het laden. De hoogte van de container is afhankelijk van de opgenomen modules en inhoud - hoe meer inhoud in de embed, hoe meer de pagina zal verschuiven.
Als je inhoud insluit boven de vouw, is het daarom aan te raden een minimale hoogte in te stellen door een inline min-height CSS-regel op te nemen in de embed container wrapper.
Als je inhoud insluit in een extern CMS, zijn er mogelijk opmaakopties beschikbaar in de externe pagina-editor om de insluithoogte aan te passen. Anders kun je deze styling handmatig toevoegen aan het topniveau van de ingesloten inhoud <div>, zoals hieronder wordt getoond.
<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>
Let op: als u de ingesloten inhoud per pagina aanpast, moet u mogelijk de regel voor de minimale hoogte op elke pagina bijwerken zodat de inhoud goed wordt weergegeven.
Om de minimale hoogte te vinden, kun je de pagina inspecteren waarop de inhoud is ingesloten. Voor HubSpot pagina's kun je de pagina preview functie gebruiken om de minimale hoogte te vinden voordat je de pagina publiceert. Meer informatie over het bekijken van inhoud in WordPress.
Terwijl je de pagina bekijkt met de ingesloten inhoud:
<div> van de ingesloten inhoud.