Bädda in innehåll med hjälp av en inbäddningskod
Senast uppdaterad: oktober 1, 2024
Tillgänglig med något av följande abonnemang, om inte annat anges:
Content Hub Professional , Enterprise |
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.
Kopiera den inbäddade koden
Så här kopierar du inbäddningskoden för ett avsnitt med inbäddat innehåll:
- I ditt HubSpot-konto navigerar du till Innehåll > Inbäddningar.
- Håll muspekaren över en inbäddning, klicka sedan på Mer och välj Hämta inbäddningskod.
- I dialogrutan klickar du på Kopiera för att kopiera inbäddningskoden.
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:
- En innehållsinbäddning får sin styling från sidan som den är inbäddad på, inte från HubSpot. För att justera utseendet på innehållsinbäddningen måste du uppdatera sidans CSS. Om du använder WordPress kan du lära dig hur du lägger till anpassad CSS.
- Koden för inbäddat innehåll innehåller inte din HubSpot-spårningskod. Du måste installera spårningskoden separat på externa sidor för att dra nytta av HubSpot-funktioner som trafikanalys och privata samtyckesbanners.
- För att bädda in innehåll via inbäddningskoden infogar HubSpot innehållsinbäddningen genom standard
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änenhs-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.
Förstå bästa praxis för inbäddning av innehåll
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:
- Inbäddningens placering, inklusive om den är ovanför eller under vecket och var skriptet är inbäddat.
- Inbäddningens höjd, som är direkt relaterad till de moduler som ingår i innehållsinbäddningen. Ju fler moduler som ingår, desto mer kan din sidlayout förändras när innehållet laddas.
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.
Bädda in under vecket
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.
Ändra platsen för inbäddningsskriptet
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.
Ange en minsta höjd
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:
- Högerklicka på det inbäddade innehållet och välj Inspektera.
- I inspektörspanelen håller du muspekaren över den översta nivån
<div>
för det inbäddade innehållet. - För att visa den beräknade höjden visar vissa webbläsare behållarens höjd vid hovring, eller så kan du klicka på fliken Computed i lådan med utvecklarverktyg och leta efter höjdattributet.