Walidator Twitter Card

Gdy ktoś udostępnia Twój link na X (Twitter), platforma odczytuje metatagi twitter: ze strony, aby zbudować kartę podglądu: jej układ, tytuł, opis, obraz i informację o autorze. Jeśli tych tagów brakuje, link zostaje opublikowany jako zwykły adres URL, bez karty. Wklej poniżej kod HTML swojej strony, a ten walidator sprawdzi, czy trzy wymagane tagi, twitter:card, twitter:title i twitter:description, są obecne, pokazując wartość odczytaną z każdego z nich, abyś mógł naprawić uszkodzony podgląd przed publikacją.

Jak zwalidować kartę

  1. 1

    Wklej kod HTML swojej strony

    Możesz wkleić samą sekcję `<head>` albo cały dokument. Walidator sprawdza tylko tagi `<meta>`, więc pozostały kod jest ignorowany.

  2. 2

    Szuka trzech wymaganych tagów

    `twitter:card`, `twitter:title` i `twitter:description`, czyli minimum dla każdego typu karty. Inne tagi, takie jak `twitter:image`, nie są tu sprawdzane.

  3. 3

    Zobacz, co zostało znalezione

    Każdy pasujący tag pojawia się z wartością odczytaną z jego atrybutu `content`, dzięki czemu szybko sprawdzisz treść.

  4. 4

    Popraw to, czego brakuje

    Każdy z trzech tagów, którego brakuje, jest oznaczany jako brakujący. Dodaj go do swojej sekcji `<head>` i wklej HTML ponownie, aby sprawdzić jeszcze raz.

Cztery typy kart X (Twitter)

Układ określa wartość twitter:card. Ten walidator odczytuje podaną przez Ciebie wartość; cztery typy obsługiwane przez X to:

Typ karty Wartość twitter:card Typowe zastosowanie
Podsumowanie summary Artykuły i zwykłe strony z treścią
Podsumowanie z dużym obrazem summary_large_image Wpisy na blogu z obrazem głównym
Odtwarzacz player Osadzone audio lub wideo
Aplikacja app Linki do instalacji aplikacji z metadanymi sklepu

Tagi wymagane i zalecane

To narzędzie sprawdza tylko pierwszą grupę, trzy tagi, których X potrzebuje dla każdej karty.

Wymagane (sprawdzane tutaj):

  • twitter:card, układ do użycia
  • twitter:title, nagłówek (X pokazuje mniej więcej pierwsze 70 znaków)
  • twitter:description, opis (X pokazuje mniej więcej pierwsze 200 znaków)

Zalecane (nie sprawdzane tutaj, ale warto je dodać):

  • twitter:image, bezwzględny adres URL https:// do pliku PNG, JPG lub GIF; co najmniej 300 x 157 px dla karty podsumowania i 800 x 418 px dla summary_large_image
  • twitter:site, @handle Twojej marki
  • twitter:creator, @handle autora
  • twitter:image:alt, tekst alternatywny dla dostępności

Częste błędy

  • Tylko tagi Open Graph. X korzysta wtedy z og:title, og:description i og:image, więc link nadal się rozwija, ale bez twitter:card układ domyślnie jest małym podsumowaniem. Dodawaj oba zestawy, gdy tylko możesz.
  • Zbyt mały obraz. Poniżej 300 x 157 px karta może zwinąć się do samego tekstu.
  • Względny adres URL obrazu. twitter:image musi być bezwzględny (https://...); względna ścieżka jest ignorowana.
  • property= zamiast name=. X, i ten walidator, odczytują tagi Twittera z name="twitter:...". Zapis property="twitter:..." działa w Open Graph, ale nie tutaj.
  • Zbyt długi opis. Powyżej około 200 znaków X go przycina, zwykle w środku wyrazu.

Jak zobaczyć prawdziwą kartę

X wycofał swój oficjalny Card Validator (cards-dev.twitter.com/validator) w 2023 roku, więc nie ma już oficjalnej strony renderującej podgląd na żywo. To narzędzie potwierdza, że wymagane tagi są obecne i czytelne; aby zobaczyć prawdziwą kartę, udostępnij link w szkicu wpisu lub w wiadomości bezpośredniej do siebie, albo użyj zewnętrznego narzędzia do podglądu linków. Jeśli po poprawieniu tagów X wciąż pokazuje stary obraz, dodaj do adresu URL obrazu ciąg zapytania, na przykład ?v=2, aby ominąć pamięć podręczną.

Najczęściej zadawane pytania

Nie. Odczytuje wklejony kod HTML i potwierdza, że trzy wymagane tagi twitter: są obecne, pokazując wartość każdego z nich. Nie rysuje karty ani nie pobiera Twojej strony na żywo. X zamknął swój własny Card Validator w 2023 roku, więc pewnym sposobem na zobaczenie prawdziwej karty jest udostępnienie linku w szkicu wpisu lub w wiadomości bezpośredniej do siebie.

X korzysta wtedy z og:title, og:description i og:image, więc link nadal się rozwija, ale bez twitter:card układ domyślnie jest małym podsumowaniem. Aby uzyskać kartę z dużym obrazem, musisz jawnie ustawić twitter:card na summary_large_image. Pamiętaj, że ten walidator sprawdza tylko tagi twitter:, a nie Twoje tagi og:.

Szuka name="twitter:..." z atrybutem content zapisanym po nazwie, w cudzysłowie pojedynczym lub podwójnym. Jeśli Twój tag używa property="twitter:..." zamiast name= albo umieszcza content przed name, wzorzec nie dopasuje się, nawet jeśli HTML jest poprawny. Ustaw kolejność name="..." content="..." i sprawdź ponownie.

Ten walidator rozpoznaje nazwę niezależnie od wielkości liter, więc twitter:Card też zostanie tu wykryty. Mimo to zapisuj je małymi literami (twitter:card), bo taką formę X dokumentuje i takiej oczekuje.

Krótko mówiąc: tak. Sprawdzenie działa na naszym serwerze, więc wklejony kod HTML jest tam wysyłany, analizowany i usuwany. Zapisujemy jedynie anonimową informację o użyciu narzędzia, nigdy Twojego kodu, i nie jest to narzędzie offline działające w przeglądarce.

Powiązane narzędzia

Narzędzie jest dostępne w innych językach