Hoppa till innehåll
Observera: Översättningen av denna artikel är endast avsedd att underlätta för dig. Översättningen har skapats automatiskt med hjälp av en översättningsprogramvara och har eventuellt inte korrekturlästs. Den engelska versionen av denna artikel bör därför betraktas som den gällande versionen med den senaste informationen. Du kan komma åt den här.

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.

    content-embed-copy-code
  • 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ä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.

    hs-sites-footer-html

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:

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.

content-embed-layout-shift

Ä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.

content-embed-calculated-height

Hjälpte artikeln?
Detta formulär används endast för dokumentationsfeedback. Få reda på hur du får hjälp med HubSpot.