Skonfiguruj robots.txt i znaczniki meta obrazów swojej witryny, aby umożliwić podgląd linków postów społecznościowych
Data ostatniej aktualizacji: czerwca 28, 2023
Dostępne z każdą z następujących podpisów, z wyjątkiem miejsc, w których zaznaczono:
Marketing Hub Professional, Enterprise
|
| Wcześniejsze konto Marketing Hub Basic |
Po utworzeniu i opublikowaniu postu społecznościowego w HubSpot, odpowiednia sieć społecznościowa spróbuje wygenerować podgląd obrazu dla tego postu. Na podstawie linku wprowadzonego do postu, sieć społecznościowa przeskanuje meta tagi w kodzie źródłowym strony oraz przeszuka plik robots.txt Twojej witryny.
Jeśli hostujesz swoją stronę u zewnętrznego dostawcy, takiego jak WordPress, a podgląd Twojego postu nie pojawia się zgodnie z oczekiwaniami, postępuj zgodnie z poniższymi instrukcjami.
Zaktualizuj swój plik robots.txt
Plik robots.txt informuje wyszukiwarki, jak indeksować Twoją stronę. Jeśli nie dodałeś lub nie skonfigurowałeś poprawnie swojego pliku robots.txt, sieci społecznościowe nie będą w stanie przetworzyć zawartości Twoich stron. Facebook i Twitter udostępniają łańcuchy agentów użytkownika, które musisz dodać do swojego pliku robots.txt:
User-agent: facebookexternalhitDisallow
:
User-agent: TwitterbotDisallow
:
LinkedIn nie zapewnia dokumentacji dla ich ciągów agenta użytkownika, ale możesz użyć inspektora postów Linked In, aby potwierdzić, czy LinkedIn może indeksować zawartość Twojej witryny.
Dodaj znaczniki meta do sekcji <head> na stronach swojej witryny
Wyszukiwarki i serwisy społecznościowe będą analizować sekcję head Twojego kodu HTML w poszukiwaniu metadanych potrzebnych do wygenerowania podglądu strony. Powinieneś umieścić metadane dla Facebooka i Twittera po głównych znacznikach meta:
<!-- Podstawowe znaczniki meta -->
<title>Meta tagi - podgląd, edycja i generowanie</title>
<meta name="title" content="Meta Tagi - Podgląd, Edytuj i Generuj">.
<meta name="description" content="Dzięki Meta Tagom możesz edytować i eksperymentować z treścią, a następnie podglądać, jak Twoja strona będzie wyglądać w Google, na Facebooku, Twitterze i nie tylko!">.
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta property="og:title" content="Tytuł Twojej strony internetowej"> <meta property="og:title" content="Tytuł strony internetowej" >
<meta property="og:description" content="Opis Twojej strony internetowej"> <meta property="og:description" content="Opis Twojej strony internetowej">
<meta property="og:image" content="https://example.com/image.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image"> <meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://example.com/">
<meta property="twitter:title" content="Tytuł twojej strony internetowej"> <meta property="twitter:title" content="Tytuł twojej strony internetowej" > <meta property="twitter:url" content=
<meta property="twitter:description" content="Opis Twojej strony internetowej"> <meta property="twitter:title" content="Tytuł Twojej strony internetowej"> <meta property="twitter:description" content="Opis Twojej strony internetowej">
<meta property="twitter:image" content="https://example.com/image.png">Wypełnij atrybuty zawartości dla każdego z powyższych meta tagów odpowiednimi wartościami dla swojej strony. Możesz sprawdzić poprawność swoich meta tagów za pomocą narzędzia debuggera Facebooka, walidatora kart Twittera i inspektora postów LinkedIn.
Wymagania dotyczące rozmiaru wyróżnionych obrazów
Jeśli wyróżniony obrazek dla wstawionego linku nie wyświetla się poprawnie w podglądzie społecznościowym (np. obrazek jest ucięty lub proporcje są nieprawidłowe), być może będziesz musiał edytować obrazek, aby miałodpowiednie wymiary dla sieci społecznościowej, do której publikujesz, a następnie ponownie opublikować stronę. Jeśli publikujesz na Facebooku, możesz dowiedzieć się więcej o ich wymaganiach dotyczących wyróżnionego obrazu w ich dokumentacji.
Poniższe wymiary są zalecane dla optymalizacji wyróżnionego obrazu 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 (krajobraz): 1,91:1
Upewnij się, że wszelkie multimedia, które dołączasz do swoich postów społecznościowych, są zgodne z wytycznymi dotyczącymi rozmiaru pliku dla każdej sieci. Jeśli HubSpot stwierdzi, że plik jest zbyt duży, aby można go było opublikować w określonej sieci, zostanie wyświetlone ostrzeżenie. Maksymalne rozmiary plików dla poszczególnych sieci społecznościowych są wymienione poniżej:
- Facebook: 8MB (poniżej 1MB zalecane dla plików PNG, aby uniknąć pikselacji)
- Instagram: 8MB
- Twitter: 5MB (15MB dla GIF-ów)
- LinkedIn: 10MB
Rozbieżności w kolorystyce i przejrzystości obrazu
Różnice w kolorze obrazu
Wbudowane profile kolorów mogą mieć wpływ na sposób wyświetlania wyróżnionego obrazu w Twoim poście społecznościowym. Różne systemy przetwarzają niestandardowe 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 przezzewnę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 narzędziu do edycji zdjęć, takim jak Photoshop, a następnie ponownie opublikować stronę przed opublikowaniem postów społecznościowych.
Różnice w jasności obrazu
Menedżer plików HubSpotstosuje kompresję obrazów w formatach JPEG i PNG, aby zoptymalizować szybkość ładowania treści hostowanych przez HubSpot. Portale społecznościowe również stosują kompresję obrazów w postach, których jakość może różnić się od tej, którą można zobaczyć w HubSpot. Z tego powodu zaleca się używanie obrazów o stosunkowo wysokiej rozdzielczości (w zalecanych proporcjach) 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 zostanie wyświetlone ostrzeżenie, które pomoże odpowiednio dostosować obraz.
Jeśli nadal występują problemy z nieprawidłowym wyświetlaniem podglądu linków, zapoznaj się z naszym przewodnikiem rozwiązywania problemów.