Med funktionen för innehållsinbäddning kan du skapa innehållsavsnitt i HubSpot och sedan bädda in dem på din webbplats. För att lägga till en innehållsinbäddning på en extern webbplatssida kan du antingen använda plugin-programmet för innehållsinbäddning för WordPress Gutenberg-redigerare eller kopiera inbäddningskoden direkt i HubSpot.
Nedan kan du läsa mer om hur du kopierar inbäddningskoden för innehåll, tillsammans med bästa praxis för att upprätthålla sidans CLS-poäng (Cumulative Layout Shift).
Observera: inbäddat innehåll laddas inte genom en iframe, utan injiceras via JavaScript. Sökmotorer kan exekvera JavaScript och kommer att plocka upp det inbäddade innehållet, och undviker därför alla SEO-utmaningar som iframes kan ge.
Så här kopierar du inbäddningskoden för ett avsnitt med inbäddat innehåll:
Du kan sedan klistra in inbäddningskoden i ditt externa innehåll efter behov. När du klistrar in inbäddningskoden bör du tänka på följande:
hs-sites domänfot. Detta hjälper till att bevara dina domänspecifika sidfötter. Allt innehåll som ingår i sidfoten på hs-sites kommer dock att infogas på den externa sidan tillsammans med det inbäddade innehållet. Om du t.ex. har en ansvarsfriskrivning för upphovsrätt i sidfoten för domänen hs-sites kommer upphovsrätten att visas på den externa sidan tillsammans med det inbäddade innehållet. Lär dig hur du ändrar innehåll i domänspecifika sidfötter.Beroende på hur du använder inbäddningskoden är det möjligt att innehållet kan påverka sidans CLS-poäng (Cumulative Layout Shift), som mäter hur mycket sidans innehåll flyttas runt i besökarens vy under inläsningen. Det finns två faktorer som kommer att påverka din CLS-poäng:
Om du ser en negativ inverkan på din CLS-poäng efter att ha bäddat in innehåll kan du granska avsnitten om bästa praxis nedan för potentiella lösningar.
När det är möjligt bör innehåll bäddas in under sidans vikning. Detta beror på att CLS-poängen gäller för innehåll ovanför vecket, eftersom det vanligtvis är vad besökaren ser vid den första sidladdningen. Om du bäddar in innehåll under vecket minskar den initiala layoutförskjutningen som orsakas av det inbäddade innehållet, vilket förbättrar användarupplevelsen och mildrar den negativa CLS-poängen.
Som standard innehåller koden för inbäddning av innehåll inbäddningsskriptet i sig (rad 2 nedan).
<div id="hs-embed-61405464936-1wgzc8"> <script type="text/javascript" src="[EMBED SCRIPT SRC]">
</script> <script> hbspt.content.create({...}); </script></div>
När du bäddar in innehåll på en extern sida rekommenderas det att du flyttar inbäddningsskriptet till <head> på sidan i stället för bredvid skriptet för skapande av inbäddning.
Höjden på behållaren för inbäddning av innehåll påverkar hur mycket innehållet runt den flyttas under laddningen. Behållarens höjd beror på vilka moduler och vilket innehåll som ingår - ju mer innehåll i inbäddningen, desto mer kommer sidan att förskjutas.
Av denna anledning, om du bäddar in ditt innehåll ovanför vikningen, rekommenderas att du anger en minsta höjd för inbäddningen genom att inkludera en inline min-height CSS-regel i inbäddningsbehållarens omslag.
Om du bäddar in innehåll i ett externt CMS kan det finnas layoutalternativ tillgängliga för dig i den externa sidredigeraren för att uppdatera inbäddningshöjden. Annars kan du manuellt lägga till denna styling i det inbäddade innehållets toppnivå <div>, enligt nedan.
<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>
Observera: om du anpassar det inbäddade innehållet per sida kan du behöva uppdatera regeln om minsta höjd på varje sida så att innehållet visas korrekt.
För att hitta den lägsta höjden kan du inspektera sidan där innehållet är inbäddat. För HubSpot-sidor kan du använda funktionen för förhandsgranskning av sidan för att hitta den lägsta höjden innan du publicerar sidan. Läs mer om förhandsgranskning av innehåll i WordPress.
Medan du visar sidan med det inbäddade innehållet:
<div> för det inbäddade innehållet.