Med funksjonen for innebygging av innhold kan du opprette innholdsseksjoner i HubSpot og deretter bygge dem inn på nettstedet ditt. For å legge til en innholdsinbygging på en ekstern nettside kan du enten bruke plugin-modulen for innholdsinbygging i WordPress' Gutenberg-editor, eller kopiere innbyggingskoden direkte i HubSpot.
Nedenfor finner du mer informasjon om hvordan du kopierer den innebygde innholdskoden, samt beste praksis for å opprettholde sidens CLS-poengsum (Cumulative Layout Shift).
Merk: Innebygd innhold lastes ikke inn gjennom en iframe, men injiseres via JavaScript. Søkemotorer kan utføre JavaScript og vil fange opp det innebygde innholdet, slik at du unngår SEO-utfordringer som iframes kan medføre.
Slik kopierer du innbyggingskoden for en seksjon med innebygd innhold:
Du kan deretter lime inn innebyggingskoden i det eksterne innholdet etter behov. Husk følgende når du limer inn innbyggingskoden:
hs-sites -domeneets bunntekst. Dette bidrar til å bevare dine domenespesifikke bunntekster. Alt innhold som er inkludert i bunnteksten på hs-sites, vil imidlertid bli satt inn på den eksterne siden sammen med det innebygde innholdet. Hvis du for eksempel har en ansvarsfraskrivelse for opphavsrett i bunnteksten for hs-sites -domenet, vil opphavsretten vises på den eksterne siden sammen med det innebygde innholdet. Lær hvordan du endrer innhold i domenespesifikke bunntekster.Avhengig av hvordan du bruker den innebygde koden, er det mulig at innholdet kan påvirke sidens CLS-poengsum (Cumulative Layout Shift), som måler hvor mye innholdet på siden beveger seg rundt i den besøkendes visningsvindu under innlasting . Det er to faktorer som vil påvirke CLS-poengsummen:
Hvis du ser en negativ innvirkning på CLS-poengsummen din etter å ha lagt inn innhold, kan du se gjennom avsnittene om beste praksis nedenfor for å finne mulige løsninger.
Når det er mulig, bør innhold legges inn under folden på siden. Dette er fordi CLS-poengsummen gjelder for innhold over folden, siden det vanligvis er det den besøkende ser ved første innlasting av siden. Ved å bygge inn innhold under folden reduserer du eventuelle innledende layoutforskyvninger forårsaket av det innebygde innholdet, noe som forbedrer brukeropplevelsen og reduserer den negative CLS-poengsummen.
Som standard inneholder koden for innbygging av innhold innbyggingsskriptet (linje 2 nedenfor).
<div id="hs-embed-61405464936-1wgzc8"> <script type="text/javascript" src="[EMBED SCRIPT SRC]">
</script> <script> hbspt.content.create({...}); </script></div>
Når du bygger inn innhold på en ekstern side, anbefales det å flytte innbyggingsskriptet til <head> på siden i stedet for ved siden av skriptet for oppretting av innbygging.
Høyden på den innebygde innholdsbeholderen vil påvirke hvor mye innholdet rundt den forskyves under innlasting. Høyden på beholderen avhenger av modulene og innholdet som er inkludert - jo mer innhold som er innebygd, desto mer vil siden forskyve seg.
Hvis du bygger inn innhold over folden, anbefales det derfor å angi en minimumshøyde for innbyggingen ved å inkludere en inline min-height CSS-regel i innpakningen til den innebygde containeren.
Hvis du bygger inn innhold i et eksternt CMS, kan det hende at det finnes layoutalternativer i redigeringsprogrammet for den eksterne siden som gjør det mulig å oppdatere høyden på innbyggingen. Ellers kan du legge til denne stylingen manuelt i det innebygde innholdets toppnivå <div>, som vist nedenfor.
<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>
Merk: Hvis du tilpasser det innebygde innholdet per side, kan det hende du må oppdatere regelen for minimumshøyde på hver side slik at innholdet vises på riktig måte.
For å finne minimumshøyden kan du inspisere siden der innholdet er innebygd. For HubSpot-sider kan du bruke funksjonen for forhåndsvisning av sider for å finne minimumshøyden før du publiserer siden. Finn ut mer om forhåndsvisning av innhold i WordPress.
Mens du viser siden med det innebygde innholdet:
<div> for det innebygde innholdet.