Karty w social media: tagi Open Graph i obraz podglądu

Czym jest podgląd linku

Gdy ktoś udostępnia link w serwisie społecznościowym lub komunikatorze, platforma czyta stronę i buduje małą kartę: obraz, tytuł, krótki tekst i domenę. Większość platform czyta w tym celu tagi protokołu Open Graph, czyli elementy meta w sekcji head strony. X, dawniej Twitter, czyta też własne tagi zaczynające się od twitter:. Każda platforma sama projektuje swoją kartę i decyduje, ile tekstu pokaże. Ty decydujesz, co strona mówi platformom.

Podstawowe tagi

Protokół Open Graph, opublikowany na ogp.me, wymienia cztery właściwości, które powinna mieć każda strona: og:title, og:type, og:image i og:url. og:url to kanoniczny adres strony. Opcjonalne, ale przydatne są og:description, og:site_name i og:locale, czyli język i region tagów, na przykład pl_PL.

<meta property="og:title" content="Summer sale: all mugs reduced">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/summer-sale">
<meta property="og:image" content="https://example.com/img/summer-sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Six blue mugs on a wooden table">
<meta property="og:description" content="Until 31 August: lower prices on mugs and plates.">
<meta property="og:site_name" content="Example Shop">
<meta name="twitter:card" content="summary_large_image">

Wpisuj każdy adres w pełni, z https://. Protokół definiuje adres jako URL z http:// lub https://, więc ścieżka taka jak /img/sale.jpg nie jest prawidłową wartością. og:url powinien zgadzać się z linkiem canonical strony. Jeśli tag występuje dwa razy z różnymi wartościami, protokół daje pierwszeństwo pierwszemu.

Obraz podglądu

Większość podglądów pokazuje obraz szeroko. Często zalecane są proporcje około 1,91 : 1, na przykład 1200 × 630 pikseli. Taki obraz pasuje do większości kart bez przycinania. Obrazy kwadratowe są często przycinane u góry i u dołu, dlatego to, co ważne, umieszczaj na środku. Dla Google Discover Google zaleca obrazy o szerokości co najmniej 1200 pikseli, duży podgląd dozwolony ustawieniem max-image-preview:large oraz obraz wskazany przez og:image lub znaczniki schema.org. Google odradza też obrazy ogólne, takie jak logo witryny.

og:image:width i og:image:height podają rozmiar obrazu w pikselach. og:image:alt opisuje, co widać na obrazie, a nie jest podpisem. Protokół mówi, że strona z og:image powinna też podawać og:image:alt.

Tytuł i opis

og:title może różnić się od elementu title. Nie musi zawierać nazwy witryny, bo niesie ją og:site_name. Platformy skracają długie teksty we własnym miejscu, więc ważne słowa stawiaj na początku. Tagi Open Graph liczą się też poza serwisami społecznościowymi. Google wymienia treść og:title jako jedno ze źródeł linków tytułowych w wynikach wyszukiwania, bierze pod uwagę og:site_name przy nazwie witryny i podaje og:image jako jeden ze sposobów wskazania preferowanego obrazu.

Tagi dla X

Tag twitter:card wybiera rodzaj karty. Wartość summary_large_image oznacza duży, szeroki obraz, a summary mały. Jeśli strona ma już tagi Open Graph, często wystarczy dodać twitter:card. Stron dla deweloperów X nie udało się odczytać na potrzeby tego poradnika, więc zanim oprzesz się na szczególe, sprawdź tam aktualne zasady.

Jedna karta na stronę

Wiele witryn ustawia ten sam tytuł i obraz dla każdej podstrony, często przez motyw. Wtedy każdy udostępniony link wygląda tak samo. Daj każdej ważnej podstronie własne og:title, og:description i og:image: stronie produktu zdjęcie produktu, artykułowi jego główny obraz. Dla og:type protokół przewiduje między innymi website dla ogólnej strony i article dla artykułu. System sklepu lub system treści może wypełniać te tagi automatycznie tytułem, streszczeniem i głównym obrazem każdej podstrony. Po zmianie sprawdź po jednej podstronie z każdego szablonu.

Dlaczego podgląd się nie zmienia

Wiele platform zapisuje kartę, gdy już ją zbuduje. Jeśli później zmienisz obraz lub tytuł, inni mogą jeszcze przez jakiś czas widzieć starą kartę. Pomaga nowa nazwa pliku dla nowego obrazu, bo platforma widzi wtedy nowy adres. Niektóre platformy oferują narzędzie, które pobiera stronę ponownie.

Zanim udostępnisz stronę

• Czy są og:title, og:type, og:image i og:url, a og:url to adres kanoniczny?
• Czy każdy adres jest pełny, z https://?
• Czy obraz jest wystarczająco szeroki, czy się ładuje i czy to, co ważne, jest na środku?
• Czy ustawione są og:image:alt, og:image:width i og:image:height?
• Czy jest tag twitter:card i czy tytuł jest wystarczająco krótki?

Praca z Do4U

Podgląd linku w social media pokazuje, jak wygląda strona, gdy ktoś udostępnia jej link, i sprawdza tagi stojące za podglądem. Podajesz jeden adres. Do4U czyta stronę i początek jej obrazu podglądu. Kod zbiera tagi Open Graph, tagi kart Twitter/X i wartości zastępcze, czyli tytuł, opis meta i pierwszy obraz, a także link canonical i język. Format i rozmiar obrazu odczytuje z samego pliku i porównuje je z tagami. Dostajesz neutralny podgląd, tabelę wszystkich tagów, wyniki z krótkim uzasadnieniem i tagi do skopiowania. Tagów, które strona ustawia tylko przez JavaScript, narzędzie nie widzi. AI nie jest używana, a sprawdzenie jest darmowe, z dziennym limitem.

Do4U znajduje wskazówki, a ty sprawdzasz i decydujesz. Podgląd to neutralny szkic: o tym, jak platforma pokaże link, decyduje platforma.