Twitter card
twitter:card, twitter:title, twitter:image kullanırsın.
Twitter card nedir?
Twitter (X) ve başka platformlar bir bağlantı paylaşılınca özel bir kart gösterir. Bu kart Twitter card etiketleriyle kurulur ve Open Graph'ten ayrıdır.
Twitter card etiketleri <meta name="twitter:..."> biçimindedir; burada name kullanılır, property değil. En temel üç etiket: twitter:card, twitter:title ve twitter:image.
twitter:title ve twitter:image
twitter:title kartın başlığıdır. Open Graph'te og:title tanımlıysa Twitter onu geri düşebilir; ama açık olmak için ikisini de yaz.
twitter:image kart görselinin URL'sidir. summary_large_image kartı için görsel 1200x628 piksel civarı önerilir. Mutlak URL ve https kullan. Kartın düzgün görünmesi için görseli önceden test et.
Open Graph ile birlikte kullanım
Twitter card ve Open Graph çoğu zaman birlikte yazılır. Twitter önce twitter:* etiketlerine bakar, bulamazsa og:* etiketlerine düşer. Bu yüzden yalnızca Open Graph yazmak da çalışır; ama kart görünümünü tam kontrol etmek için twitter:* etiketlerini de ekle.
twitter:image yoksa og:image kullanılır. Açıklama için de aynı şey geçerli.
Uygulama Blog için Twitter card etiketleri ekle
Head içine bir blog yazısı için üç Twitter card etiketi ekle: <meta name="twitter:card" content="summary_large_image">, <meta name="twitter:title" content="..."> ve <meta name="twitter:image" content="https://...">.
Örnek çözümü göster
<head>
<title>Köşe Yazısı</title>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Köşe Yazısı: Web Tasarımı">
<meta name="twitter:image" content="https://ayseblog.com/kapak/tasarim.jpg">
</head>Kendini test et
-
twitter:card etiketini tamamla
<meta name="twitter:card" content="____">Cevabı göster
<meta name="twitter:card" content="summary_large_image"> -
twitter:card hangi değeri alır?
<meta name="twitter:card" content="?">- summary_large_image
- <meta>
- og:title
- <link>
Cevabı göster
summary_large_image — Doğru. summary_large_image büyük görselli kart türüdür.
-
Twitter özelliğini rolüyle eşleştir
- twitter:card
- Kart türü
- twitter:title
- Kart başlığı
- twitter:image
- Kapak görseli
- twitter:description
- Kart açıklaması