Dzięki funkcji osadzania treści możesz tworzyć sekcje treści w HubSpot, a następnie osadzać je w swojej witrynie. Aby dodać osadzanie treści do zewnętrznej strony internetowej, możesz użyć wtyczki osadzania treści dla edytora Gutenberg WordPress lub skopiować kod osadzania bezpośrednio w HubSpot.
Poniżej dowiesz się więcej o tym, jak skopiować kod osadzania treści, wraz z najlepszymi praktykami dotyczącymi utrzymania wyniku Cumulative Layout Shift (CLS) strony.
Uwaga: osadzona zawartość nie jest ładowana przez ramkę iframe, ale jest wstrzykiwana przez JavaScript. Wyszukiwarki mogą wykonywać JavaScript i wychwycą osadzoną zawartość, unikając w ten sposób wszelkich wyzwań SEO, które mogą stanowić ramki iframe.
Aby skopiować kod osadzania dla sekcji osadzania treści:
Następnie możesz wkleić kod osadzania do treści zewnętrznej w razie potrzeby. Podczas wklejania kodu osadzania należy pamiętać o następujących kwestiach:
hs-sites. Pomaga to zachować stopki specyficzne dla domeny. Jednak wszelkie treści zawarte w stopce hs-sites zostaną wstawione na stronę zewnętrzną wraz z osadzoną treścią. Na przykład, jeśli masz zastrzeżenie praw autorskich w stopce domeny hs-sites, prawa autorskie pojawią się na stronie zewnętrznej wraz z osadzoną zawartością. Dowiedz się, jak modyfikować zawartość w stopkach specyficznych dla domeny.W zależności od sposobu użycia kodu osadzania, możliwe jest, że zawartość może wpłynąć na wynik Cumulative Layout Shift (CLS) strony, który mierzy, jak bardzo zawartość strony porusza się w rzutni odwiedzającego podczas ładowania. Istnieją dwa czynniki, które będą miały wpływ na wynik CLS:
Jeśli widzisz negatywny wpływ na wynik CLS po osadzeniu treści, zapoznaj się z poniższymi sekcjami najlepszych praktyk, aby znaleźć potencjalne rozwiązania.
Jeśli to możliwe, treść powinna być osadzona poniżej zagięcia strony. Wynika to z faktu, że wynik CLS ma zastosowanie do treści powyżej zakładki, ponieważ jest to zazwyczaj to, co odwiedzający widzi przy pierwszym załadowaniu strony. Osadzenie treści poniżej zagięcia zmniejszy wszelkie początkowe przesunięcia układu spowodowane osadzeniem treści, poprawiając wrażenia użytkownika i łagodząc negatywny wynik CLS.
Domyślnie kod osadzania treści zawiera w sobie skrypt osadzania (linia 2 poniżej).
<div id="hs-embed-61405464936-1wgzc8"> <script type="text/javascript" src="[EMBED SCRIPT SRC]">
</script> <script> hbspt.content.create({...}); </script></div>
Podczas osadzania treści na stronie zewnętrznej zaleca się przeniesienie skryptu osadzania na stronę <head> strony, a nie obok skryptu tworzenia osadzania.
Wysokość kontenera osadzania treści wpłynie na to, jak bardzo zawartość wokół niego przesunie się podczas ładowania. Wysokość kontenera zależy od zawartych w nim modułów i treści - im więcej treści w osadzeniu, tym bardziej przesunie się strona.
Z tego powodu, jeśli osadzasz swoją zawartość powyżej zakładki, zaleca się ustawienie minimalnej wysokości osadzenia poprzez włączenie wbudowanej reguły min-height CSS w opakowaniu kontenera osadzenia.
Jeśli osadzasz zawartość w zewnętrznym systemie CMS, w zewnętrznym edytorze stron mogą być dostępne opcje układu, aby zaktualizować wysokość osadzenia. W przeciwnym razie możesz ręcznie dodać tę stylizację do treści osadzonej na najwyższym poziomie <div>, jak pokazano poniżej.
<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>
Uwaga: w przypadku dostosowywania osadzonej zawartości dla poszczególnych stron może być konieczne zaktualizowanie reguły minimalnej wysokości na każdej stronie, aby zawartość była wyświetlana prawidłowo.
Aby znaleźć minimalną wysokość, można sprawdzić stronę, na której osadzona jest zawartość. W przypadku stron HubSpot można użyć funkcji podglądu strony, aby znaleźć minimalną wysokość przed opublikowaniem strony. Dowiedz się więcej o podglądzie treści w WordPress.
Podczas przeglądania strony z osadzoną zawartością:
<div> osadzonej treści.