WhatsApp'ta linkin önizlemesi çıkmıyor: og:image kartı nasıl doğru kurulur

Bir site on iki gündür canlıydı: dokuz yüzü aşkın statik sayfa, tam güvenlik başlıkları, kurulu analytics. Sonra sahibi bir arkadaşına linki attı ve bana yazdı: "Önizlemesi yok, kötü çıkıyor." Haklıydı. Sitenin en çok görülen yüzeyi, paylaşıldığı andaki hâli, hiç tasarlanmamıştı; og:image yoktu ve twitter:card küçük kare kartta kalmıştı. O günden beri kuralım şu: bir site linki bir sohbete atılıp önizlemesine bakılmadan "canlı" sayılmaz.

Otuz saniyelik teşhis

Paylaşım botları sayfayı senin tarayıcın gibi görmez; kendi kimlikleriyle gelir. Aynı kimlikle sor:

curl -s https://ALAN-ADI/ -A "facebookexternalhit/1.1" \
  | grep -oE '<meta[^>]*(og:image|twitter:card)[^>]*>'

og:image satırı yoksa önizleme yoktur. twitter:card değeri summary ise X'te minik kare kart çıkar. Görmek istediğin şu üçlü: og:image, yanında og:image:width ile og:image:height, ve twitter:card değeri summary_large_image.

Asgari doğru set

<meta property="og:type" content="website">
<meta property="og:title" content="Sayfanın başlığı">
<meta property="og:description" content="Bir cümlelik açıklama">
<meta property="og:url" content="https://alan-adi/sayfa/">
<meta property="og:image" content="https://alan-adi/og/sayfa.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Kartın kısa tarifi">
<meta name="twitter:card" content="summary_large_image">

Adres mutlak olmalı; göreli og:image çözümlenmez. Boyut etiketleri isteğe bağlı görünür ama ilk paylaşımda kartın doğru oranda çizilmesini sağlar; WhatsApp ve LinkedIn görseli indirmeden önce boyutu bilirse kutuyu boş bırakmaz.

Dikey fotoğraf koyma

Kendi sitemde uzun süre og:image olarak hero'daki dikey portreyi kullandım. Teknik olarak eksiksizdi ve yine de kötü görünüyordu: kart alanı yatay olduğu için LinkedIn ve X fotoğrafı ortadan kırpıyor, WhatsApp ise küçük kareye sıkıştırıyordu. Paylaşım kartı bir fotoğraf değil, markanın kapağıdır; 1200×630'a göre kompoze edilmiş, 330 piksel genişliğe küçültüldüğünde bile başlığı ve alan adı okunan bir görsel olmalı.

Kartı nasıl üretiyorum

Marka rengi geçen hiçbir görseli yapay zekâya çizdirmiyorum; model hex değeri tutturamaz, marka adını yazamaz. Kartı HTML ve CSS ile kuruyorum, sonra headless Chrome ile 1200×630 olarak basıyorum. Statik bir sitede bu birkaç satırlık script demek:

chrome --headless=new --window-size=1200,630 --hide-scrollbars \
  --screenshot=og/sayfa.png file:///.../og-sablon.html

Logo gerçek SVG dosyasından, başlık gerçek marka fontuyla gelir; her sayfa, yazı ve vaka için kart aynı şablondan otomatik üretilir. Böylece yeni bir sayfa eklediğimde kartını unutmam mümkün olmuyor.

Next.js App Router kullanıyorsan app/opengraph-image.tsx dosyası kök segmentte durduğu sürece kendi kartını tanımlamayan her sayfa onu miras alır. İki tuzak var. layout.tsx içindeki metadata'ya twitter: { card: "summary_large_image" } yazmazsan X kartı summary kalır. Ve satori, yani next/og'un çizim motoru, woff2 okumaz; next/font/google dosyaları işe yaramaz, ttf'i repoya almak gerekir. Türkçe için de latin-ext alt kümesi şart, yoksa ş, ğ ve ı harfleri düşer.

Düzelttim ama hâlâ eski görünüyor

WhatsApp, LinkedIn ve Facebook önizlemeyi önbelleğe alır. Daha önce paylaşılmış bir link, sen kartı düzelttikten sonra da günlerce boş kutuyla gelebilir. Sohbette hızlı test için adresin sonuna ?x=1 ekle; kalıcı tazeleme için Facebook Sharing Debugger ve LinkedIn Post Inspector'a adresi ver ve yeniden taramasını iste. Telegram için @WebpageBot'a linki göndermek yeter.

Bu yazı neye dayanıyor

Ağustos 2026'da bir açık kaynak haritanın on iki gün önizlemesiz yayında kalması ve aynı ay kendi sitemde dikey portre kartının kırpık çıkması. İkisi de deploy günü tek bir curl ile yakalanabilirdi; artık yakalanıyor.