Data ostatniej aktualizacji: października 1, 2024
Dostępne z każdą z następujących podpisów, z wyjątkiem miejsc, w których zaznaczono:
Content Hub
Professional
,
Enterprise
|
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.
Kopiowanie kodu osadzania
Aby skopiować kod osadzania dla sekcji osadzania treści:
- Na koncie HubSpot przejdź do sekcji Treść > Elementy osadzone..
- Najedź kursorem na osadzony element, kliknij Więcej i wybierz Pobierz kod osadzenia.
- W oknie dialogowym kliknij Kopiuj, aby skopiować kod osadzania.
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:
- Osadzona treść otrzymuje swój styl od strony, na której jest osadzona, a nie od HubSpot. Aby dostosować wygląd osadzonej treści, należy zaktualizować CSS strony. Jeśli korzystasz z WordPressa, dowiedz się, jak dodać niestandardowy CSS.
- Kod osadzania treści nie zawiera kodu śledzenia HubSpot. Aby korzystać z funkcji HubSpot, takich jak analiza ruchu i prywatne banery zgody, należy osobno zainstalować kod śledzenia na stronach zewnętrznych.
- Aby osadzić treść za pomocą kodu osadzania, HubSpot wstawia osadzoną treść przez domyślną stopkę domeny
hs-sites. Pomaga to zachować stopki specyficzne dla domeny. Jednak wszelkie treści zawarte w stopcehs-siteszostaną wstawione na stronę zewnętrzną wraz z osadzoną treścią. Na przykład, jeśli masz zastrzeżenie praw autorskich w stopce domenyhs-sites, prawa autorskie pojawią się na stronie zewnętrznej wraz z osadzoną zawartością. Dowiedz się, jak modyfikować zawartość w stopkach specyficznych dla domeny.
Poznaj najlepsze praktyki dotyczące osadzania treści
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:
- Lokalizacja osadzenia, w tym to, czy znajduje się powyżej, czy poniżej zakładki i gdzie osadzony jest skrypt.
- Wysokość osadzenia, która jest bezpośrednio związana z modułami zawartymi w osadzonej treści. Im więcej modułów, tym bardziej układ strony może się zmieniać podczas ładowania treści.
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.
Osadzanie poniżej zakładki
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.
Zmień lokalizację skryptu osadzania
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.
Ustaw minimalną wysokość
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ą:
- Kliknij prawym przyciskiem myszy osadzoną zawartość i wybierz opcję Sprawdź.
- W panelu inspektora najedź kursorem na górny poziom
<div>osadzonej treści. - Aby wyświetlić obliczoną wysokość, niektóre przeglądarki wyświetlą wysokość kontenera po najechaniu kursorem lub możesz kliknąć kartę Obliczone w szufladzie narzędzi programistycznych i poszukać atrybutu wysokości.
