Sisällön upottaminen upotuskoodin avulla
Päivitetty viimeksi: lokakuuta 1, 2024
Saatavilla minkä tahansa seuraavan Tilauksen kanssa, paitsi jos toisin mainitaan:
Content Hub Professional , Enterprise |
Sisällön upottamistoiminnon avulla voit luoda HubSpotissa sisällön osioita ja upottaa ne sitten verkkosivustollesi. Voit lisätä sisällön upottamisen ulkoiselle verkkosivulle joko WordPressin Gutenberg-editorin sisällön upottamisen lisäosan avulla tai kopioimalla upotuskoodin suoraan HubSpotissa.
Alla on lisätietoja sisällön upotuskoodin kopioimisesta sekä parhaita käytäntöjä sivusi Cumulative Layout Shift (CLS) -pistemäärän ylläpitämiseksi.
Huomaa: upotettua sisältöä ei ladata iframe-kehyksen kautta, vaan se syötetään JavaScriptin kautta. Hakukoneet osaavat käyttää JavaScriptiä ja havaitsevat upotetun sisällön, joten iframen aiheuttamat SEO-haasteet vältetään.
Kopioi upotuskoodi
Voit kopioida upotuskoodin sisällön upotusosioon:
- Siirry HubSpot-tililläsi kohtaan Sisältö > Upotukset.
- Vie hiiren kursori upotetun sisällön päälle, napsauta Lisää ja valitse Hae upotuskoodi.
- Kopioi upotuskoodi valitsemalla valintaikkunassa Kopioi.
Voit sitten liittää upotuskoodin ulkoiseen sisältöön tarpeen mukaan. Kun liität upotuskoodia, pidä seuraavat asiat mielessä:
- Sisällön upotus saa muotoilunsa sivulta, johon se on upotettu, ei HubSpotista. Jos haluat säätää upotetun sisällön ulkoasua, sinun on päivitettävä sivun CSS-ominaisuudet. Jos käytät WordPressiä, opettele lisäämään mukautettua CSS:ää.
- Sisällön upotuskoodi ei sisällä HubSpot-seurantakoodia. Sinun on asennettava seurantakoodi erikseen ulkoisille sivuille, jotta voit hyödyntää HubSpotin ominaisuuksia, kuten liikenneanalytiikkaa ja yksityisiä suostumusbannereita.
- Kun haluat upottaa sisältöä upotuskoodin avulla, HubSpot lisää sisällön upotuksen oletusarvoisen
hs-sites
-verkkotunnuksen alatunnisteen kautta. Tämä auttaa säilyttämään verkkotunnuskohtaiset alatunnisteesi. Kaikkihs-sites
-alasvetoon sisältyvä sisältö lisätään kuitenkin ulkoiselle sivulle yhdessä sisällön upotuksen kanssa. Esimerkiksi jos sinulla on tekijänoikeuslausekehs-sites
-verkkotunnuksen alatunnisteessa, tekijänoikeus näkyy ulkoisella sivulla upotetun sisällön kanssa. Lue, miten verkkotunnuskohtaisissa alatunnisteissa olevaa sisältöä muokataan.
Sisällön upottamisen parhaiden käytäntöjen ymmärtäminen
Riippuen siitä, miten käytät upotuskoodia, on mahdollista, että sisältö vaikuttaa sivusi CLS-pisteytykseen (Cumulative Layout Shift), joka mittaa, kuinka paljon sivusi sisältö liikkuu kävijän näkymäikkunassa latauksen aikana. CLS-pisteytykseen vaikuttaa kaksi tekijää:
- upotetun komentosarjan sijainti, mukaan lukien se, onko se ylä- vai alapuolella ja mihin komentosarja on upotettu.
- Upotuksen korkeus, joka liittyy suoraan upotetun sisällön sisältämiin moduuleihin. Mitä enemmän moduuleja on sisällytetty, sitä enemmän sivusi ulkoasu voi muuttua sisällön latautuessa.
Jos sisällön upottamisen jälkeen CLS-pistemäärääsi vaikuttaa negatiivisesti, tutustu alla oleviin parhaita käytäntöjä koskeviin osioihin mahdollisten ratkaisujen löytämiseksi.
Upota taiton alapuolelle
Sisältö olisi mahdollisuuksien mukaan upotettava sivun taiton alapuolelle. Tämä johtuu siitä, että CLS-pistemäärä koskee taiton yläpuolella olevaa sisältöä, koska kävijä yleensä näkee sen sivun ensimmäisen latauksen yhteydessä. Sisällön upottaminen taiton alapuolelle vähentää sisällön upottamisen aiheuttamaa alkuperäistä asettelun muutosta, mikä parantaa käyttäjäkokemusta ja lieventää negatiivista CLS-pistemäärää.
Muuta upotusskriptin sijaintia
Sisällön upotuskoodi sisältää oletusarvoisesti upotusskriptin (rivi 2 alla).
<div id="hs-embed-61405464936-1wgzc8">
<script type="text/javascript" src="[EMBED SCRIPT SRC]">
</script> <script>
hbspt.content.create({...});
</script>
</div>
Kun upotat sisältöä ulkoiselle sivulle, on suositeltavaa siirtää upotusskripti sivun <head>
sivulle eikä upotusskriptin luomisskriptin viereen.
Aseta vähimmäiskorkeus
Sisällön upotussäiliön korkeus vaikuttaa siihen, kuinka paljon sitä ympäröivä sisältö siirtyy latauksen aikana. Säiliön korkeus riippuu mukana olevista moduuleista ja sisällöstä - mitä enemmän sisältöä upotuksessa on, sitä enemmän sivu siirtyy.
Tästä syystä, jos upotat sisältösi yläpuolelle, on suositeltavaa asettaa upotuksen vähimmäiskorkeus sisällyttämällä upotussäiliön kääreeseen rivissä oleva min-height
CSS-sääntö.
Jos upotat sisältöä ulkoiseen CMS-järjestelmään, ulkoisen sivun editorissa voi olla ulkoasuvaihtoehtoja upotuskorkeuden päivittämiseksi. Muussa tapauksessa voit lisätä tämän muotoilun manuaalisesti upotetun sisällön ylätasolle <div>
, kuten alla näkyy.
<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>
Huomaa: jos muokkaat upotetun sisällön sivukohtaisesti, sinun on ehkä päivitettävä vähimmäiskorkeussääntöä kullakin sivulla, jotta sisältö näkyy oikein.
Minimikorkeuden löydät tarkastelemalla sivua, johon sisältö on upotettu. HubSpot-sivujen osalta voit käyttää sivun esikatseluominaisuutta vähimmäiskorkeuden löytämiseksi ennen sivun julkaisemista. Lisätietoja sisällön esikatselusta WordPressissä.
Kun tarkastelet sivua, johon on upotettu sisältöä:
- Napsauta sisältöä upotettuna hiiren kakkospainikkeella ja valitse Tarkasta.
- Vie hiiren kursori tarkastuspaneelissa upotetun sisällön ylätason
<div>
päälle. - Voit tarkastella laskettua korkeutta siten, että jotkin selaimet näyttävät säiliön korkeuden leijuttaessa, tai voit napsauttaa Computed-välilehteä kehittäjätyökalujen laatikossa ja etsiä height-attribuutin.