Meta Etiketleri ve Sosyal Medya Önizlemeleri Rehberi

Web sitenize giden bir bağlantı, potansiyel bir müşterinin sizi ilk gördüğü yer olabilir: bir arama sonucunda, bir Slack kanalında ya da bir iş arkadaşının diğerine gönderdiği bir WhatsApp mesajında. Orada neyin ekrana geleceği, çoğu sitenin eksik veya hatalı yazdığı yaklaşık altı satırlık bir HTML koduyla belirlenir.

Buradaki kafa karışıklığı, her platformun farklı etiketleri, farklı öncelik sırasıyla ve farklı yedekleme kurallarıyla okumasından kaynaklanır. Bir sayfanın Facebook'ta kusursuz görünüp LinkedIn'de gri bir kutu içinde logonuzla kalmasının sebebi budur.

İşte her platformun gerçekte neyi okuduğu:

Google

Google <title> ve <meta name="description"> etiketlerini kullanır — ancak çoğu zaman bunları göz ardı edebilir.

Araştırmalar, Google'ın arama sonuçlarındaki başlıkların yaklaşık üçte birini, açıklamaların ise yarısından fazlasını kullanıcının arama sorgusuna daha iyi uyacak şekilde sayfadan metin çekerek yeniden yazdığını göstermektedir. Bu bir hata değildir ve bunu engelleyecek özel bir HTML etiketi de yoktur.

Bu durum onları önemsiz kılmaz. Google, yazdığınız başlık ve açıklamayı en çok marka ve doğrudan aramalarda — yani şirketinizin adını arayan ve dönüşüme zaten çok yakın olan kullanıcılara — kullanır. Bu sonuçlar kesinlikle kontrol etmeye değerdir.

Pratik sınırlar:

• Başlıklar yaklaşık 580 pikselde (yaklaşık 55–60 karakter) kesilir. Ayırt edici kelimeleri başa koyun; başlığın sonuna "Live Ajans" koymak gayet iyidir, en başa koymak ise her sayfadaki değerli görünür alanı harcar.
• Açıklamalar masaüstünde 155–160 karaktere kadar çıkar, mobilde ise daha kısadır.
• Sayfa başına tek bir <title> olmalı ve H1 başlığından farklı olmalıdır. Başlık arama sonucundaki kişiyi, H1 ise siteye girmiş olan kişiyi hedefler.

Facebook, LinkedIn, WhatsApp, Slack, Discord, Signal

Bu platformların tümü Open Graph etiketlerini okur:

<meta property="og:title"       content="…" />
<meta property="og:description" content="…" />
<meta property="og:image"       content="https://example.com/share.jpg" />
<meta property="og:url"         content="https://example.com/sayfa/" />
<meta property="og:type"        content="website" />
<meta property="og:site_name"   content="Example" />

name= değil, property= olduğuna dikkat edin. name="og:title" yazmak yaygın bir kopyala-yapıştır hatasıdır ve bazı platform botları bunu tamamen yok sayar.

Eğer og:image eksikse, her platform sayfada bulabildiği rastgele bir görseli çeker. Karşınıza logonuz, sitedeki bir buton ikonu veya gri bir kutu çıkar — asla seçmek isteyeceğiniz görsel çıkmaz.

Görsel için kritik kurallar:

• 1200×630 piksel en güvenli boyuttur. Tüm platformların beklediği en-boy oranıdır.
• 200×200 altındaki görseller Facebook tarafından doğrudan yok sayılır.
• Mutlak (absolute) URL kullanın. Göreceli linkler çalışmaz.
• Dosya boyutunu 5 MB'ın altında, tercihen 1 MB'ın altında tutun — birçok bot zaman aşımına uğrar.
• Dikey görseller merkezden kırpılır; önizlemede bir yüzün yarısının görünmesinin sebebi budur.

og:type, blog yazıları için article, diğer her sayfa için website olmalıdır. article tipi bazı platformların gösterdiği yayın tarihi ve yazar bilgilerini aktif eder.

X (Twitter)

X önce kendi etiketlerini okur, bulamazsa Open Graph etiketlerine döner:

<meta name="twitter:card"        content="summary_large_image" />
<meta name="twitter:title"       content="…" />
<meta name="twitter:description" content="…" />
<meta name="twitter:image"       content="https://example.com/share.jpg" />

Burada property= değil, name= kullanıldığına dikkat edin. X, Open Graph'ın tam tersidir ve bu durum insanları sürekli yanıltır.

En önemli etiket twitter:card etiketidir. Bu etiket olmadan görseliniz ne kadar iyi olursa olsun küçük kare bir küçük resim düzeni alırsınız. summary_large_image ile asıl tıklama alan tam genişlikte görsel kartına sahip olursunuz. Bu bölümden başka hiçbir şey eklemiyorsanız bile bu satırı mutlaka ekleyin.

Diğer tüm alanlar Open Graph'a sorunsuz yedeklenir; dolayısıyla X için özel bir metin istemiyorsanız başlık ve açıklamayı tekrar etmenize gerek yoktur.

En çok zaman kaybettiren konu: Önbellek (Caching)

Her platform Open Graph verilerinizi agresif bir şekilde önbelleğe alır ve etiketi düzeltmek önceden paylaşılmış bir bağlantıyı düzeltmez.

• Facebook yaklaşık 30 gün önbellekte tutar. Sharing Debugger aracıyla manuel yenileme yapabilirsiniz.
• LinkedIn yaklaşık 7 gün önbellekte tutar. Post Inspector aracını kullanın.
• X URL bazlı önbelleğe alır; URL sonuna geçici bir sorgu parametresi (?v=2) eklemek genellikle en hızlı çözümdür.
• WhatsApp çok uzun süre önbellekte tutar ve herkese açık bir önbellek temizleme aracı sunmaz.

Pratik kural: Biri sayfanın bozuk göründüğünü söylemeden önce, yani yayınlamadan önce test edin. O aşamada bozuk sürüm birçok platformun önbelleğine girmiştir bile.

Herhangi bir URL'i tüm platformlar için Ücretsiz Meta Etiket ve Sosyal Önizleme Aracımız ile aynı anda test edebilirsiniz.

Eksiksiz ve doğru bir <head> örneği

<title>Hassas CNC İşleme | Acme İmalat</title>
<meta name="description" content="Otomotiv ve havacılık için ±0.005mm toleransla 5 eksenli CNC frezeleme. 500 adetten başlayan seri üretim. IATF 16949 sertifikalı. 2 iş gününde teklif." />
<link rel="canonical" href="https://example.com/hizmetler/cnc-freze/" />

<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/hizmetler/cnc-freze/" />
<meta property="og:title" content="Hassas CNC İşleme ve Frezeleme" />
<meta property="og:description" content="±0.005mm toleransla 5 eksenli frezeleme. 500 adetten başlayan seri üretim. IATF 16949 sertifikalı." />
<meta property="og:image" content="https://example.com/img/cnc-paylasim.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Acme İmalat" />

<meta name="twitter:card" content="summary_large_image" />

Metnin kendisiyle ilgili iki önemli detay:

Birincisi, açıklama somut sayılar içerir — tolerans, minimum sipariş adedi, sertifika ve teklif süresi. Bunu "dünya standartlarında hassas mühendislik çözümleri sunuyoruz" ifadesiyle karşılaştırın. Biri bir yapay zeka arama motoru tarafından doğrudan alıntılanabilir; diğeri hiçbir şey ifade etmez.

İkincisi, Open Graph başlığı sayfa başlığından daha kısadır. Arama sonuçlarında marka ve konum için yer vardır; sosyal medya kartında ise yoktur ve marka zaten kartın altındaki alan adında görünür.

Çok dilli web siteleri

Birden fazla dilde hizmet veriyorsanız, og:locale ve og:locale:alternate platformlara hangi sürümle karşılaştıklarını söyler:

<meta property="og:locale" content="tr_TR" />
<meta property="og:locale:alternate" content="en_US" />

Daha da önemlisi, her dil sürümünün kendi çevrilmiş başlığına, açıklamasına ve — görsel metin içeriyorsa — kendi görseline ihtiyacı vardır. Türkçe bir sayfada İngilizce metinli bir paylaşım görseli çıkması profesyonellikten uzaktır.

Kontrol listesi

1. Her sayfanın benzersiz bir başlığı ve açıklaması var mı?
2. og:image tanımlı, mutlak URL'li ve en az 1200×630 boyutunda mı?
3. twitter:card değeri summary_large_image olarak ayarlandı mı?
4. og: etiketlerinde property=, twitter: etiketlerinde name= kullanıldı mı?
5. Önizlemeler doğru çıkıyor mu? Yayınlamadan önce test edin.

Bunların hiçbiri zor değildir ama birisi bağlantınızı değerli bir kitleyle paylaşana kadar tamamen görünmez kalırlar.