HubSpot Baza wiedzy

Konfiguracja pliku robots.txt witryny i metatagów obrazów w celu wyświetlania podglądu linków w postach społecznościowych.

Autor: HubSpot Support | Oct 19, 2021 9:19:36 AM

Po utworzeniu i opublikowaniu postu społecznościowego w HubSpot, odpowiednia sieć społecznościowa podejmie próbę wygenerowania podglądu obrazu dla Twojego postu. Na podstawie wprowadzonego linku do posta sieć społecznościowa przeskanuje metatagi w kodzie źródłowym strony i przeszuka plik robots.txt witryny.

Jeśli hostujesz swoją witrynę u zewnętrznego dostawcy, takiego jak WordPress, a podgląd posta nie pojawia się zgodnie z oczekiwaniami, postępuj zgodnie z poniższymi instrukcjami.

Zaktualizuj plik robots.txt

Plik robots.txt informuje wyszukiwarki o sposobie indeksowania witryny. Jeśli nie dodałeś lub nie skonfigurowałeś poprawnie pliku robots.txt, sieci społecznościowe nie będą w stanie przeanalizować zawartości Twoich stron. Facebook i X udostępniają ciągi agenta użytkownika, które należy dodać do pliku robots.txt:

User-agent: facebookexternalhit
Disallow:

User-agent: Twitterbot
Disallow:

LinkedIn nie udostępnia dokumentacji dotyczącej ciągów agenta użytkownika, ale możesz użyć inspektora postów LinkedIn, aby potwierdzić, czy LinkedIn może indeksować zawartość Twojej witryny.

Dodaj metatagi do sekcji <head> stron witryny

Wyszukiwarki i sieci społecznościowe analizują sekcję nagłówka kodu HTML w poszukiwaniu metadanych potrzebnych do wygenerowania podglądu strony. Metadane dla Facebooka i X należy umieścić po głównych metatagach:

<!-- Primary Meta Tags -->
<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="title" content="Meta Tags — Preview, Edit and Generate">
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta property="og:title" content="Title of your Website Page">
<meta property="og:description" content="Description of your Website Page">
<meta property="og:image" content="https://example.com/image.png">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://example.com/">
<meta property="twitter:title" content="Title of your Website Page">
<meta property="twitter:description" content="Description of your Website Page">
<meta property="twitter:image" content="https://example.com/image.png">

Wypełnij atrybuty treści dla każdego z powyższych metatagów odpowiednimi wartościami dla swojej strony. Metatagi można zweryfikować za pomocą narzędzia debuggera Facebooka, walidatora kart X i inspektora postów LinkedIn.

Jeśli wyróżniony obraz dla wstawionego linku nie wyświetla się poprawnie w podglądzie społecznościowym (np. obraz jest obcięty lub proporcje są nieprawidłowe), może być konieczne edytowanie obrazu, aby miał odpowiednie wymiary dla sieci społecznościowej, w której publikujesz, a następnie ponowne opublikowanie strony. 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 do optymalizacji wyróżnionego obrazu w każdej sieci:

  • Facebook: 1.91:1
  • X: 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 zawarte w 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, zostanie wyświetlone ostrzeżenie. Maksymalne rozmiary plików dla każdej sieci społecznościowej są wymienione poniżej:

  • Facebook: 8 MB (poniżej 1 MB zalecane dla plików PNG, aby uniknąć pikselizacji)
  • Instagram: 8 MB
  • X: 5 MB (15 MB dla GIF-ów)
  • LinkedIn: 10 MB

Rozbieżności w kolorach i przejrzystości obrazu

Różnice w kolorze obrazu

Osadzone profile kolorów mogą wpływać na sposób wyświetlania wyróżnionego obrazu w poście społecznościowym. Różne systemy przetwarzają nietypowe profile kolorów na różne sposoby, dlatego kolory mogą wyglądać inaczej podczas podglądu obrazu w menedżerze plików. Możesz uruchomić adres URL obrazu za pomocą zewnętrznego narzędzia , aby sprawdzić, czy używa on nietypowego profilu kolorów. W razie potrzeby można 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 przejrzystości obrazu

Menedżer plików HubSpot wykorzystuje kompresję obrazu w plikach JPEG i PNG, aby pomóc zoptymalizować szybkość ładowania treści hostowanych przez HubSpot. Sieci społecznościowe również używają kompresji obrazu w postach, które mogą różnić się jakością od tego, co widzisz 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 publikacji społecznościowej HubSpot pojawi się ostrzeżenie, które pomoże odpowiednio dostosować obraz.

Jeśli nadal napotykasz problemy z nieprawidłowym wyświetlaniem podglądu linków, zapoznaj się z naszym przewodnikiem rozwiązywania problemów.