Data ostatniej aktualizacji: stycznia 27, 2023
Po dodaniu linków do postów społecznościowych w HubSpot, zostanie wyświetlony podgląd zawierający wyróżniony obraz, tytuł strony i opis strony.
Podgląd społecznościowy jest oparty na znacznikach meta w sekcji <head> HTML strony. Znaczniki te informują platformy mediów społecznościowych, na czym należy się skupić podczas tworzenia podglądu udostępnionego linku. Podstawowe meta tagi to:
- og:title: tytuł twojej treści.
- og:type: typ twojej zawartości, taki jak wideo lub strona internetowa.
- og:image: adres URL obrazu, który ma reprezentować Twoją treść.
- og:url: unikalny adres URL twojej zawartości, który będzie używany jako jej stały identyfikator.
- og:description: opis, który podsumowuje twój obraz.
Tytuł, opis meta i wyróżniony obraz są automatycznie ustawiane dla postów na blogu. W przypadku stron docelowych i stron internetowych, podczas gdy tytuł i meta opis są ustawione również automatycznie, wyróżniony obraz musi być ustawiony ręcznie.
Uwaga: LinkedIn pokaże twój wyróżniony obraz, tytuł strony i adres URL w swojej karcie podglądu, ale nie będzie zawierał twojego meta opisu.
Featured image, tytuł strony lub opis strony nie są wyświetlane w podglądzie postu
Jeśli w podglądzie postu społecznościowego nie jest wyświetlany oczekiwany wyróżniony obraz, tytuł strony lub opis strony, można rozwiązać problem w HubSpot lub za pomocą zewnętrznych narzędzi do debugowania.
Rozwiązywanie problemów w HubSpot
Jeśli łączysz się z postem na blogu, stroną docelową lub stroną witryny obsługiwaną przez HubSpot, upewnij się, że obraz wyróżniony jest ustawiony w polu stronie lub ustawienia ustawienia.
Możesz również ręcznie ustawić og:image aby dodać wyróżniony obraz:
-
Na swoim koncie HubSpot, przejdź do swoich stron docelowych lub stron witryny.
- Najedź na stronę i kliknij Edytuj.
- W edytorze treści kliknij kartę Ustawienia , a następnie kliknij Opcje zaawansowane.
- W sekcjiDodatkowe fragmenty koduwprowadź tenfragment kodudo polaHTML nagłówka:
<meta property="og:image" content="IMG URL">.
- Zastąp IMG URL adresem URL swojego pliku z obrazem.
- Aby jeszcze bardziej zoptymalizować obraz dla Twittera, wprowadź ten dodatkowy fragment kodu do pola Head HTML :
<meta name="twitter:card" content="summary_large_image">.
- W prawym górnym rogu kliknij przycisk Publikuj lub Aktualizuj , aby wprowadzić zmiany.
Rozwiązywanie problemów za pomocą narzędzi deweloperskich przeglądarki
Jeśli udostępniasz zewnętrzną stronę w swoim poście społecznościowym, możesz użyć narzędzi deweloperskich przeglądarki, takich jak Chrome Developer tools, aby upewnić się, że znaczniki meta dla strony są ustawione poprawnie. Wyświetl źródło strony, a następnie sprawdź i potwierdź następujące elementy:
- The
og:imagei inne znaczniki meta są poprawnie wyświetlane. - Szczegóły dla każdego znacznika są poprawne. Na przykład sprawdź, czy adres URL wyróżnionego obrazu dla znacznika
og:imagejest poprawny. - Istnieje tylko jedno wystąpienie każdego typu meta tagu. Jeśli istnieje wiele wystąpień tego samego meta tagu, sieci społecznościowe mogą nie wybrać właściwego podczas generowania podglądu linku.
- Twoje meta tagi znajdują się w pobliżu górnej części HTML. Jeśli masz dodatkowy kod lub znaczniki przed meta tagami, roboty sieci społecznościowych mogą nie być w stanie zlokalizować tych znaczników.
Rozwiązywanie problemów za pomocą narzędzi do debugowania sieci społecznościowych
Jeśli widzisz rozbieżności pomiędzy podglądem społecznościowym a meta tagami, sieć społecznościowa może potrzebować ponownego przeszukania strony. Użyj następujących narzędzi do sprawdzania poprawności dla każdej sieci społecznościowej, aby wykryć wszelkie błędy lub wywołać ponowne przeszukiwanie strony:
- Facebook Sharing Debugger: Facebook automatycznie rekwiruje udostępnione treści co 24 godziny. Aby ręcznie uruchomić ponowne przeszukiwanie, kliknij Scrape Again w Debugerze udostępniania.
- Twitter Card Validator (walidator kart): Twitter buforuje zawartość przez 7 dni po opublikowaniu postu. Kliknij przycisk Preview card w Card Validator, aby uruchomić ponowne przeszukiwanie treści.
- LinkedIn Post Inspector (Inspektor postów na LinkedIn): LinkedIn buforuje zawartość przez 7 dni po opublikowaniu postu. Kliknij przycisk Inspect w Inspektorze postów, aby uruchomić ponowne przeszukiwanie treści.
Ogólnie rzecz biorąc, wszelkie posty opublikowane przed rekwirowaniem strony nadal będą zachowywać nieprawidłowy obraz. Jeśli tag og:image nie został ustawiony dla strony, sieć społecznościowa przeskanuje stronę, aby znaleźć najbardziej odpowiedni obraz do włączenia do postów społecznościowych, który jest zwykle pierwszym obrazem, który znajdzie. Obraz podglądu linku może nie pojawić się w ogóle, jeśli plik robots.txt lub oprogramowanie zabezpieczające jest używane do zapobiegania indeksowaniu strony.
Problemy z wyświetlaniem Featured image
Jeśli twój podgląd postu społecznościowego wyświetla oczekiwany obraz wyróżniony, ale obraz jest wyświetlany nieprawidłowo, możesz sprawdzić następujące elementy.
Rozmiar lub proporcje obrazu są nieprawidłowe
Jeśli wyróżniony obraz nie jest wyświetlany poprawnie w podglądzie społecznościowym (np. obraz jest ucięty lub proporcje są nieprawidłowe), być może trzeba będzie edytować obraz, aby miał odpowiednie wymiary dla sieci społeczności owej, w której publikujesz, a następnie ponownie opublikować stronę.
Poniższe wymiary są zalecane do optymalizacji featured image w każdej sieci:
- Facebook: 1.91:1
- Twitter: 16:9 dla postów ze zdjęciami i 1,91:1 dla wyróżnionych obrazów w postach z linkami
- Instagram (kwadrat): 1:1
- Instagram (portret): 4:5
- Instagram (krajobraz): 1.91:1
- LinkedIn (landscape): 1.91:1
Upewnij się, że wszelkie media zawarte w Twoich postach społecznościowych są zgodne z wytycznymi dotyczącymi rozmiaru plików dla każdej sieci. Jeśli HubSpot stwierdzi, że plik jest zbyt duży, aby opublikować go w określonej sieci, podczas tworzenia postu społecznościowego pojawi się ostrzeżenie. Oto maksymalne rozmiary plików dla każdej sieci społecznościowej:
- Facebook: 8 MB (poniżej 1 MB zalecane dla plików PNG, aby uniknąć pikselizacji)
- Instagram: 8MB
- Twitter: 5MB (15MB dla GIF-ów)
- LinkedIn: 10MB
Różnice w kolorach obrazów
Wbudowane profile kolorów mogą mieć wpływ na to, jak twój wyróżniony obrazek pojawi się w twoim poście społecznościowym. Różne systemy przetwarzają nietypowe profile kolorów w różny sposób, dlatego kolory mogą wyglądać inaczej podczas podglądu obrazu w menedżerze plików.
Możesz uruchomić swój adres URL obrazu przez zewnętrzne narzędzie , aby sprawdzić, czy używa on nietypowego profilu kolorów. Jeśli to konieczne, możesz usunąć zakłócający profil kolorów w zewnętrznym narzędziu do edycji zdjęć, takim jak Photoshop, a następnie ponownie opublikować stronę przed opublikowaniem posta społecznościowego.
Różnice w jasności obrazu
Menedżer plików HubSpot stosuje kompresję obrazów w plikach JPEG i PNG, aby zoptymalizować szybkość ładowania treści hostowanych przez HubSpot. Sieci mediów społecznościowych również stosują kompresję obrazów w postach, które mogą różnić się jakością od tych, które są widoczne w HubSpot.
Z tego powodu zaleca się używanie obrazów o stosunkowo wysokiej rozdzielczości dla każdej sieci. Jeśli obraz nie spełnia wymagań sieci społecznościowej, w narzędziu do publikowania w serwisach społecznościowych HubSpot pojawi się ostrzeżenie, które pomoże odpowiednio dostosować obraz.