Geliştirici

Twitter / X Kart Üretici

Dört kart tipi (summary, summary_large_image, player, app), dark + light modlu gerçekçi X chrome önizlemesi, görsel oran doğrulayıcı (1:1 vs 1.91:1), karakter sayaçları, image alt denetimi, şablonlar ve Next.js Metadata çıktısı.

Şablonlar

Kart yapılandırması

Bir kart türü seç ve Twitter / X'in <head>'den okuduğu alanları doldur.

Kart türü

summaryKüçük kare görsel, başlık ve açıklama.summary_large_image1.91:1 hero görsel — en çok paylaşılan düzen.playerTweet içinde gömülü video / ses oynatıcı.appiOS, iPadOS ve Android için doğrudan indirme.

Ortak alanlar

twitter:site (@kullanıcı)

Yayıncı hesabı; kart altında imza olarak görünür.

twitter:creator (@kullanıcı)

Yazar hesabı — opsiyonel ama atıf güçlendirir.

twitter:title

47/70

twitter:description

104/200

twitter:image URL

Boyut doğrulaması için mutlak bir görsel URL'si yapıştır.

twitter:image:alt

60/420

Canlı önizleme

X kart düzeninin yüksek doğruluklu sahte hali; chrome ve karanlık / aydınlık temalı.

uxtools@uxtools·2sa

Önizleme tweet metni.

Twitter / X card preview, finally pixel-perfect

example.com

Twitter / X card preview, finally pixel-perfect

Tweak the title, image, and player metadata, then copy a head-ready snippet or Next.js Metadata literal.

Doğrulayıcı

İyi uygulama kontrolleri. Yeşil; Twitter'ın etiketi kırpma veya atlama ihtimalinin düşük olduğunu gösterir.

Card type selected

twitter:card declares which card layout Twitter renders.

Title 1–70 chars

47/70

Description ≤ 200 chars

104/200

twitter:site provided

Attributes the card to a publisher account, e.g. @uxtools.

Image URL provided

twitter:image is required for summary, summary_large_image, and player cards.

Image alt text provided

Improves accessibility; max 420 characters.

Üretilen kod

<head>'e yapıştır veya Next.js Metadata literaline geç.

<!-- Twitter / X Card -->
<head>
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@uxtools">
    <meta name="twitter:creator" content="@uxtools">
    <meta name="twitter:title" content="Twitter / X card preview, finally pixel-perfect">
    <meta name="twitter:description" content="Tweak the title, image, and player metadata, then copy a head-ready snippet or Next.js Metadata literal.">
    <meta name="twitter:image:alt" content="Wide social card with a glowing UI mockup on a dark surface.">
</head>