Znaczniki meta Twitter Cards

Twitter (X) zdefiniował własny protokół kart podglądu, zanim powstał OpenGraph, i nadal go rozwija. Chociaż współczesny Twitter korzysta z tagów OG jako rozwiązania awaryjnego, gdy brakuje tagów twitter:*, jawne zadeklarowanie twitter:card zapewnia najbardziej przewidywalny układ karty.

Cztery typy kart: summary (mała miniatura obok tytułu i opisu), summary_large_image (obraz główny na pełną szerokość), app (instalacja aplikacji mobilnej) oraz player (osadzony film lub dźwięk). W przypadku artykułów zawierających dużo treści należy wybrać summary_large_image.

Jeśli są obecne, zastępują og:title i og:description na Twitterze. Należy ich użyć, gdy odbiorcy na Twitterze powinni zobaczyć inny nagłówek niż użytkownicy innych platform korzystających z OpenGraph; w przeciwnym razie Twitter użyje wartości OG.

W przypadku kart summary należy użyć kwadratowego obrazu 1:1 o rozmiarze co najmniej 144x144. W przypadku summary_large_image należy użyć obrazu w proporcjach 2:1, najlepiej 1200x600 lub większego. Twitter odrzuca obrazy większe niż 5 MB. Podobnie jak w przypadku og:image należy użyć absolutnego adresu URL — ścieżki względne nie działają.

Tekst alternatywny obrazu na karcie, o długości do 420 znaków. Poprawia dostępność dla użytkowników czytników ekranu przeglądających Twittera i zapewnia opis zastępczy, gdy nie uda się wczytać obrazów. Należy zawsze go podawać — to 30 sekund pracy, które znacząco poprawiają inkluzywność.

twitter:site to identyfikator witryny na Twitterze (z symbolem @). twitter:creator to identyfikator indywidualnego autora. Uzupełnienie tych wartości pozwala Twitterowi wyświetlić „from @yoursite” i połączyć podpis autora z rzeczywistym kontem.

OpenGraph używa property="og:...", a Twitter — name="twitter:...". Różnica ma podłoże historyczne (RDFa i HTML5 meta). Oba atrybuty są technicznie poprawne, ale użycie właściwego atrybutu dla każdego protokołu pozwala uniknąć problemów z rygorystycznymi walidatorami.

twitter:card="app" pozwala promować aplikację na iOS/Android za pomocą twitter:app:id:iphone, twitter:app:id:ipad, twitter:app:id:googleplay oraz precyzyjnych linków twitter:app:url:*. Dotknięcie karty otwiera App Store/Play Store albo bezpośrednio aplikację, jeśli jest już zainstalowana.

twitter:card="player" osadza odtwarzacz filmu lub dźwięku bezpośrednio w tweecie. Wymaga twitter:player (adres URL ramki iframe HTTPS), twitter:player:width i twitter:player:height. Twitter ręcznie zatwierdza karty odtwarzacza, aby zapobiegać nadużyciom — zgłoszenia należy przesyłać za pośrednictwem developer.twitter.com.

Twitter wyłączył publiczny interfejs Card Validator, ale karty nadal są wyświetlane w podglądzie roboczego tweeta. Należy wkleić adres URL do prywatnego szkicu, aby przed opublikowaniem właściwego tweeta dokładnie sprawdzić, jaki typ karty i jaki obraz zostaną wyrenderowane.

Należy zawsze uwzględniać zarówno twitter:card, jak i pełny zestaw tagów OG. Większość platform innych niż Twitter ignoruje tagi twitter:*, a większość współczesnych klientów Twittera korzysta z OG jako rozwiązania zastępczego, więc takie połączenie zapewnia poprawny podgląd wszędzie przy minimalnym powielaniu danych.

Jeśli brakuje twitter:title, ale og:title jest obecny, co pojawi się na karcie Twittera?

Karty Twittera (deklarowane za pomocą name="twitter:card") zapewniają przewidywalny podgląd stron na X. W przypadku treści redakcyjnych należy wybrać summary_large_image, dodać twitter:image z absolutnym adresem URL oraz twitter:image:alt, przypisać witrynę i autora za pomocą identyfikatorów, a dla nieuzmienionych tagów pozwolić na użycie wartości OG.