Con la funzione di incorporazione dei contenuti, è possibile creare sezioni di contenuti in HubSpot e poi incorporarle nel proprio sito web. Per aggiungere un contenuto incorporato a una pagina web esterna, è possibile utilizzare il plugin content embed per l'editor Gutenberg di WordPress, oppure copiare il codice embed direttamente in HubSpot.
Qui di seguito, scoprirete come copiare il codice di incorporamento dei contenuti, insieme alle migliori pratiche per mantenere il punteggio del Cumulative Layout Shift (CLS) della vostra pagina.
Attenzione: il contenuto incorporato non viene caricato attraverso un iframe, ma viene iniettato tramite JavaScript. I motori di ricerca sono in grado di eseguire JavaScript e rileveranno il contenuto incorporato, evitando così i problemi SEO che gli iframe possono presentare.
Per copiare il codice di incorporamento per una sezione di contenuto incorporato:
È quindi possibile incollare il codice di incorporamento nel contenuto esterno, se necessario. Quando si incolla il codice embed, tenere presente quanto segue:
hs-sites. Ciò consente di preservare i piè di pagina specifici del dominio. Tuttavia, qualsiasi contenuto incluso nel piè di pagina hs-sites verrà inserito nella pagina esterna insieme al contenuto incorporato. Ad esempio, se nel piè di pagina del dominio hs-sites è presente una clausola di esclusione del copyright, il copyright apparirà nella pagina esterna insieme al contenuto incorporato. Imparare a modificare il contenuto nei piè di pagina specifici del dominio.A seconda di come si utilizza il codice incorporato, è possibile che il contenuto abbia un impatto sul punteggio del Cumulative Layout Shift (CLS) della pagina, che misura quanto il contenuto della pagina si sposta nel viewport del visitatore durante il caricamento. I fattori che influiscono sul punteggio CLS sono due:
Se si riscontra un impatto negativo sul punteggio CLS dopo l'incorporazione di contenuti, esaminare le sezioni delle best practice riportate di seguito per individuare potenziali soluzioni.
Quando è possibile, i contenuti dovrebbero essere incorporati sotto la piega della pagina. Questo perché il punteggio CLS si applica al contenuto sopra la piega, poiché è quello che di solito il visitatore vede al primo caricamento della pagina. Incorporare i contenuti sotto la piega riduce qualsiasi spostamento iniziale del layout causato dall'incorporazione dei contenuti, migliorando l'esperienza dell'utente e attenuando il punteggio CLS negativo.
Per impostazione predefinita, il codice di incorporamento dei contenuti include lo script di incorporamento al suo interno (riga 2 sotto).
<div id="hs-embed-61405464936-1wgzc8"> <script type="text/javascript" src="[EMBED SCRIPT SRC]">
</script> <script> hbspt.content.create({...}); </script></div>
Quando si incorpora un contenuto in una pagina esterna, si consiglia di spostare lo script di incorporamento all'indirizzo <head> della pagina piuttosto che accanto allo script di creazione dell'incorporamento.
L'altezza del contenitore del contenuto incorporato influisce sul grado di spostamento del contenuto circostante durante il caricamento. L'altezza del contenitore dipende dai moduli e dai contenuti inclusi: maggiore è il contenuto dell'embed, maggiore sarà lo spostamento della pagina.
Per questo motivo, se si incorpora il contenuto above the fold, si consiglia di impostare un'altezza minima dell'embed includendo una regola CSS inline min-height nel wrapper del contenitore dell'embed.
Se si incorpora il contenuto in un CMS esterno, potrebbero essere disponibili opzioni di layout nell'editor della pagina esterna per aggiornare l'altezza dell'incorporamento. Altrimenti, è possibile aggiungere manualmente questo stile al contenuto incorporato di primo livello <div>, come mostrato di seguito.
<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>
Attenzione: se si personalizza il contenuto incorporato per ogni pagina, potrebbe essere necessario aggiornare la regola dell'altezza minima su ogni pagina, in modo che il contenuto venga visualizzato correttamente.
Per trovare l'altezza minima, si può ispezionare la pagina in cui è incorporato il contenuto. Per le pagine di HubSpot, è possibile utilizzare la funzione di anteprima della pagina per trovare l'altezza minima prima di pubblicare la pagina. Per saperne di più sull'anteprima dei contenuti in WordPress.
Mentre si visualizza la pagina con il contenuto incorporato:
<div> del contenuto incorporato.