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.
Voit kopioida upotuskoodin sisällön upotusosioon:
Voit sitten liittää upotuskoodin ulkoiseen sisältöön tarpeen mukaan. Kun liität upotuskoodia, pidä seuraavat asiat mielessä:
hs-sites -verkkotunnuksen alatunnisteen kautta. Tämä auttaa säilyttämään verkkotunnuskohtaiset alatunnisteesi. Kaikki hs-sites -alasvetoon sisältyvä sisältö lisätään kuitenkin ulkoiselle sivulle yhdessä sisällön upotuksen kanssa. Esimerkiksi jos sinulla on tekijänoikeuslauseke hs-sites -verkkotunnuksen alatunnisteessa, tekijänoikeus näkyy ulkoisella sivulla upotetun sisällön kanssa. Lue, miten verkkotunnuskohtaisissa alatunnisteissa olevaa sisältöä muokataan.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ää:
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.
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ää.
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.
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öä:
<div> päälle.