Laatst bijgewerkt: oktober 1, 2024
Beschikbaar met elk van de volgende abonnementen, behalve waar vermeld:
Content Hub
Professional
,
Enterprise
|
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.
De insluitcode kopiëren
Kopieer de insluitcode voor een sectie waarin inhoud is ingesloten:
- Ga in je HubSpot-account naar Inhoud > Insluitingen.
- Ga met de muis over een insluiting, klik op Meer en selecteer Insluitcode ophalen.
- Klik in het dialoogvenster op Kopiëren om de insluitcode te kopiëren.
Je kunt de insluitcode vervolgens naar behoefte in je externe inhoud plakken. Houd bij het plakken van de insluitcode rekening met het volgende:
- Een content embed krijgt zijn styling van de pagina waarop het is ingesloten, niet van HubSpot. Om het uiterlijk van de insluiting aan te passen, moet je de CSS van de pagina bijwerken. Als je WordPress gebruikt, lees dan hoe je aangepaste CSS kunt toevoegen.
- De content insluitcode bevat niet je HubSpot trackingcode. Je moet de trackingcode afzonderlijk op externe pagina's installeren om te kunnen profiteren van HubSpot-functies zoals verkeersanalyses en privétoestemmingsbanners.
- Om content in te sluiten via de insluitcode, voegt HubSpot de content in via de standaard
hs-sitesdomein footer. Dit helpt om je domeinspecifieke voetteksten te behouden. Echter, alle content die is opgenomen in dehs-sitesvoettekst wordt samen met de content embed ingevoegd op de externe pagina. Als u bijvoorbeeld een disclaimer over auteursrecht in de voettekst van het domeinhs-siteshebt opgenomen, wordt de copyright samen met de ingesloten inhoud op de externe pagina weergegeven. Leer hoe u inhoud in domeinspecifieke voetteksten kunt wijzigen.
Best practices voor het insluiten van inhoud begrijpen
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:
- De locatie van de insluiting, inclusief of deze zich boven of onder de vouw bevindt en waar het script is ingesloten.
- De hoogte van de insluiting, die direct gerelateerd is aan de modules die zijn opgenomen in de insluiting van de inhoud. Hoe meer modules er zijn opgenomen, hoe meer de paginalay-out kan verschuiven als de inhoud wordt geladen.
Als je een negatief effect ziet op je CLS-score na het insluiten van inhoud, bekijk dan de onderstaande best practices voor mogelijke oplossingen.
Insluiten onder de vouw
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.
Wijzig de locatie van het insluitingsscript
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.
Stel een minimale hoogte in
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:
- Klik met de rechtermuisknop op de ingesloten inhoud en selecteer Inspecteren.
- Ga in het inspectorpaneel met de muis over het bovenste niveau
<div>van de ingesloten inhoud. - Om de berekende hoogte te bekijken, geven sommige browsers de hoogte van de container weer als je er met de muis overheen gaat, of je kunt op het tabblad Berekend in de ontwikkelgereedschappenlade klikken en zoeken naar het hoogte-attribuut.
