Twitter Cards. Jak dodać i zintegrować z naszą stroną WWW

Twitter Cards to specjalne sekcje (karty) pod tweetami. Występują one w trzech różniących się zawartością typach. Karta typu summary zawiera tytuł linkowanego tekstu, jego zajawkę (maksymalnie 200 znaków) oraz zdjęcie.

Karta typu photo zawiera samo zdjęcie, a karta typu video odtwarzacz wideo. Karta jest generowana dla każdego tweeta, który zawiera link do strony posiadającej znaczniki Twitter Cards, niezależnie od tego kto jest autorem tweeta.

Dzięki Twitter Cards możemy dołączać dodatkowe informacje do tweetów zawierających link do naszego serwisu.

Jak dodać Twitter Cards na stronę WWW

Dodanie Twitter Cards do tekstów polega na dodaniu do sekcji head specjalnych znaczników, bardzo podobnych do znaczników Open Graph.

Znaczniki Twitter Cards to zwykłe znaczniki meta, których nazwa zaczyna się od prefiksu twitter:.

Zacznijmy od stworzenia kompletu znaczników dla karty typu summary, która jest najlepszym wyborem dla większości stron.

Do dyspozycji mamy następujące znaczniki:

• twitter:card - typ karty (summary, photo, video)
• twitter:url - adres URL strony
• twitter:title - tytuł strony
• twitter:description - zajawka treści strony (maksymalnie 200 znaki)
• twitter:image (opcjonalny) - adres URL obrazka, który chcemy umieścić na karcie
• twitter:site - nazwa profilu w serwisie Twitter, poprzedzona znakiem @
• twitter:site:id - identyfikator profilu w serwisie Twitter (stosować zamiast twitter:site)
• twitter:creator - nazwa profilu autora w serwisie Twitter, poprzedzona znakiem @
• twitter:creator:id - identyfikator profilu autora w serwisie Twitter (stosować zamiast twitter:creator)

W przypadku karty typu summary minimalne rozmiary obrazka to 60 x 60 px, a obrazki większe niż 120 x 120 px zostaną zmniejszone.

Warto zwrócić uwagę na znaczniki twitter:site i twitter:creator. Pierwszy z nich powinien zawierać nazwę profilu strony (na przykład @pecetowicz), drugi natomiast nazwę profilu autora (na przykład @stanowski). Profil strony wyświetlany jest pod zajawką treści, a profil autora zaraz pod tytułem.

Kompletny zestaw znaczników dla karty typu summary może wyglądać tak:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@pecetowicz" />
<meta name="twitter:creator" content="@stanowski" />
<meta name="twitter:title" content="Wycena konsoli Xbox Series X" />
<meta name="twitter:url" content="https://www.pecetowicz.pl/topic/wycena-konsoli-xbox-series-x-kupionej-w-sklepie-uzywana-pol-roku-106130/" />
<meta name="twitter:description" content="Chciałbym was poprosić o wycenę konsoli Xbox Series X. Konsole kupiłem nową ze sklepu, używana przeze mnie jakieś pół roku." />
<meta name="twitter:image" content="https://www.pecetowicz.pl/uploads/monthly_2021_10/senior.thumb.webp.b7569d3269c41ae4b9ca2dd1f94623a8.webp" />

Karta typu photo (zdjęcie) może posiadać pusty tytuł (znacznik twitter:title) i zajawkę (znacznik twitter:description). Dodatkowo możemy pomóc Twitterowi w skalowaniu naszego obrazu za pomocą znaczników określających rozmiar zdjęcia, aczkolwiek nie jest to wymagane. Pozostałe znaczniki są takie same jak w przypadku karty summary.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@pecetowicz" />
<meta name="twitter:creator" content="@stanowski" />
<meta name="twitter:title" content="Wycena konsoli Xbox Series X" />
<meta name="twitter:url" content="https://www.pecetowicz.pl/topic/wycena-konsoli-xbox-series-x-kupionej-w-sklepie-uzywana-pol-roku-106130/" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="https://www.pecetowicz.pl/uploads/monthly_2021_10/senior.thumb.webp.b7569d3269c41ae4b9ca2dd1f94623a8.webp" />
<meta name="twitter:image:width" content="800" />
<meta name="twitter:image:height" content="360" />

W przypadku karty typu photo obrazek może być dowolnie duży - Twitter pobierze go i przeskaluje do odpowiednich rozmiarów (maksymalnie 375 x 435 px dla zwykłych przeglądarek, 375 x 280 px dla urządzeń mobilnych i 750 x 560 px dla urządzeń mobilnych z ekranem Retina). Minimalna wielkość obrazka to 280 x 150 px. Przeskalowane wersje naszego obrazka będą przechowywane na serwerach Twittera.

Ostatnim i najbardziej rozbudowanym typem karty jest karta video, na której można umieścić odtwarzacz wideo. Karta ta działa w różny sposób na różnych urządzeniach, ponieważ nie wszystkie formaty wideo są odtwarzane na wszystkich platformach.

Najprostszym przykładem jest skorzystanie ze znacznika twitter:player, za pomocą którego możemy umieścić na karcie odtwarzacz w taki sam sposób, w jaki osadzamy go na stronie WWW:

<meta name="twitter:card" value="player">
<meta name="twitter:site" value="@youtube">
<meta name="twitter:title" content="Example Video">
<meta name="twitter:description" content="This is a sample YouTube video">
<meta name="twitter:url" content="http://www.youtube.com/watch?v=XHY2OB1ceEa">
<meta name="twitter:image" content="http://example.com/keyframe/a.jpg">
<meta name="twitter:player" value="https://www.youtube.com/embed/XHY2OB1ceEa">
<meta property="twitter:player:width" content="640">
<meta property="twitter:player:height" content="480">

Obrazek zdefiniowany za pomocą znacznika twitter:image zostanie wyświetlony w przypadku gdy używana przeglądarka nie będzie w stanie wyświetlić odtwarzacza.

Opcjonalnie dla karty video możemy dodać znacznik twitter:player:stream, poprzez który przekazujemy adres URL pliku z filmem w formacie H.264 (Twitter sam zadba o wyświetlenie odtwarzacza).

Na koniec warto dodać, że niektóre ze znaczników Twitter Cards mogą zostać zastąpione znacznikami Open Graph:

• twitter:url - og:url
• twitter:title - og:title
• twitter:description - og:description
• twitter:image - og:image

Tak więc jeśli nasza strona już korzysta ze znaczników Open Graph, to nie ma potrzeby generowania wymienionych wyżej znaczników ponownie.

W momencie pisania tego tekstu Twitter Cards były wciąż dostępne tylko dla zaakceptowanych przez Twittera witryn. Osoby używające WordPressa mogą skorzystać z jednej z wtyczek generujących znaczniki dla Twitter Cards (na przykład Twitter Cards).

Wdrożyliśmy u nas Twitter Cards i Open Graph możecie podejrzeć jak to wygląda na naszym profilu na Facebooku 😉 

Polecam, podobno poprawia SEO.