LinkedIn, WhatsApp ve sosyal platformlarda profesyonel zengin önizleme kartları oluşturan Open Graph ve Twitter Cards meta etiketleri rehberini keşfedin.
Hızlı Özet (TL;DR)
Bir kurumsal web sitesinin, ürün sayfasının veya teknik mühendislik makalesinin bağlantısını LinkedIn’de, WhatsApp iş gruplarında, Microsoft Teams/Slack kanallarında veya X (Twitter) üzerinde paylaştığınızda; bağlantının karşı tarafa nasıl göründüğü markanızın dijital prestijini doğrudan belirler. Eğer paylaşılan linkte kırık bir görsel, yarım kalmış bir başlık, anlamsız menü metinleri veya boş gri bir kutu görünüyorsa organik tıklama oranı (CTR) %60’a varan oranda düşer. Open Graph (og:) ve Twitter Cards (twitter:) protokolleri; sosyal ağların ve mesajlaşma uygulamalarının önizleme botlarına sayfanın başlığını, özet değer önerisini ve 1200x630 piksel boyutundaki yüksek çözünürlüklü kapak görselini milisaniyeler içinde eksiksiz aktarır.
Sosyal Medya Önizleme Botları (Scrapers) Nasıl Çalışır?
Kullanıcılar bir URL adresini WhatsApp sohbet penceresine veya LinkedIn gönderi alanına yapıştırdığı anda, ilgili platformun arka plan sunucularından hedef web sitesine özel bir HTTP isteği gönderilir (örneğin LinkedInBot/1.0, WhatsApp/2.x, facebookexternalhit/1.1 veya Twitterbot/1.0). Bu botlar Googlebot gibi sayfadaki ağır JavaScript dosyalarını çalıştırıp saatlerce beklemez; yalnızca sayfanın ham HTML kaynağındaki <head> bölümünü indirir ve ilk birkaç saniye içinde property="og:..." ile name="twitter:..." meta etiketlerini arar.
Bu mimari özellikle modern web geliştirmede çok kritik bir teknik gerçeği ortaya koyar:
- Eğer web siteniz yalnızca İstemci Taraflı Oluşturma (CSR - Client-Side Rendering, örneğin saf React/Vue SPA) kullanıyorsa ve meta etiketleri tarayıcıda JavaScript çalıştıktan sonra dinamik olarak ekleniyorsa, WhatsApp ve LinkedIn botları bu etiketleri göremez.
- Bu nedenle kurumsal web sitelerinde Statik Site Üretimi (SSG - Astro) veya Sunucu Taraflı Oluşturma (SSR) kullanılarak tüm Open Graph etiketlerinin sunucudan gelen ilk HTML yanıtında hazır bulunması zorunludur.
Temel Open Graph ve Twitter Card Meta Etiketleri Karşılaştırma Matrisi
Farklı platformların beklediği zorunlu ve yardımcı meta etiketleri ile bunların mühendislik standartları aşağıdaki tabloda detaylandırılmıştır:
| Meta Etiketi | Protokol Sınıfı | Açıklama ve İşlevi | Önerilen Teknik Standart ve Sınırlar |
|---|---|---|---|
og:title | Open Graph (Zorunlu) | Paylaşım kartında kalın puntolarla görünen ana başlık | 40–60 karakter; kesilmemesi için marka eki hariç net değer önerisi içermeli |
og:description | Open Graph (Önerilen) | Başlığın altında yer alan 1-2 satırlık özet açıklama | 100–155 karakter; mobilde gizlenebilir ancak masaüstü ve WhatsApp’ta görünür |
og:image | Open Graph (Zorunlu) | Kartın görsel odak noktasını oluşturan kapak resmi URL’i | Kesinlikle Mutlak (Absolute) HTTPS URL olmalı (https://domain.com/...) |
og:image:width & height | Open Graph (Kritik) | Görselin piksel cinsinden genişlik ve yükseklik boyutları | 1200 x 630 piksel (1.91:1 en-boy oranı); ilk paylaşımda resmin anında çıkmasını sağlar |
og:image:alt | Open Graph (Erişilebilirlik) | Görsel yüklenemediğinde veya ekran okuyucularda okunan metin | Görselin içeriğini anlatan 60–100 karakterlik betimleyici alternatif metin |
og:url | Open Graph (Zorunlu) | Sayfanın izleme parametrelerinden arındırılmış kanonik adresi | Sayfanın <link rel="canonical"> adresiyle birebir aynı olmalıdır |
og:type | Open Graph (Zorunlu) | İçeriğin yapısal türü | Kurumsal sayfalar için website, blog ve teknik rehberler için article |
og:locale | Open Graph (Yerelleştirme) | İçeriğin yayınlandığı dil ve bölge kodu | Türkçe kurumsal siteler için tr_TR |
twitter:card | X / Twitter Cards | X platformunda kartın hangi şablonda çizileceğini belirler | Büyük tam genişlikli görsel için summary_large_image, küçük ikon için summary |
Eksiksiz Kurumsal Sosyal Medya Meta Bloğu Şablonu
Bir kurumsal web sayfasının veya blog makalesinin <head> alanında yer alması gereken, tüm sosyal ağlar ve kurumsal mesajlaşma uygulamalarıyla %100 uyumlu standart HTML şablonu şu şekildedir:
<!-- Temel Open Graph (LinkedIn, WhatsApp, Facebook, Teams, Slack, Discord) -->
<meta property="og:site_name" content="Maysa Yazılım" />
<meta property="og:locale" content="tr_TR" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.maysayazilim.com/web-sayfasi-tasarim/" />
<meta property="og:title" content="Kurumsal Web Tasarım ve SEO Çözümleri | Maysa" />
<meta property="og:description" content="Astro modern web mimarisiyle sıfır JavaScript yükü, 100 PageSpeed skoru ve dönüşüm odaklı kurumsal web çözümleri." />
<meta property="og:image" content="https://www.maysayazilim.com/img/og-web-tasarim.jpg" />
<meta property="og:image:secure_url" content="https://www.maysayazilim.com/img/og-web-tasarim.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Maysa Yazılım Kurumsal Web Tasarım ve Teknik SEO Mimarisi" />
<!-- Makaleler İçin Ek Tarih Etiketleri (og:type="article" ise) -->
<meta property="article:published_time" content="2026-09-17T09:00:00+03:00" />
<meta property="article:modified_time" content="2026-10-31T12:00:00+03:00" />
<!-- X (Twitter) Card Etiketleri -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Kurumsal Web Tasarım ve SEO Çözümleri | Maysa" />
<meta name="twitter:description" content="Astro modern web mimarisiyle sıfır JavaScript yükü, 100 PageSpeed skoru ve dönüşüm odaklı kurumsal web çözümleri." />
<meta name="twitter:image" content="https://www.maysayazilim.com/img/og-web-tasarim.jpg" />
<meta name="twitter:image:alt" content="Maysa Yazılım Kurumsal Web Tasarım ve Teknik SEO Mimarisi" />
Görsel Mühendisliği: Boyut, Format ve “Güvenli Bölge (Safe Zone)” Tasarımı
Open Graph yapılandırmasında en çok sorun yaşanan alan og:image görselinin teknik özellikleridir. Tüm platformlarda tek bir görsel URL’i ile kusursuz görünüm elde etmek için aşağıdaki mühendislik kurallarına uyulmalıdır:
1. 1200x630 Piksel (1.91:1) Evrensel Standardı
Yüksek yoğunluklu (Retina / 2x-3x DPI) akıllı telefon ekranlarında bulanıklaşmayı önlemek için görsel 1200 piksel genişlik ve 630 piksel yükseklik boyutunda üretilmelidir. Eğer görsel 600x315 pikselin altına düşerse, LinkedIn ve X platformları büyük kart (summary_large_image) görünümünü iptal ederek görseli sol tarafta küçük bir kare ikona dönüştürür.
2. Kare Kırpma (Square Cropping) ve Güvenli Bölge Kuralı
LinkedIn, Facebook ve X görseli 1.91:1 yatay dikdörtgen olarak gösterirken; WhatsApp mobil sohbet listesi ve bazı kurumsal haber akışları aynı görseli sağdan ve soldan kırparak ortadaki 1:1 (630x630 piksel) kare alanı gösterebilir. Bu nedenle görsel üzerindeki şirket logosu, ana başlık metni ve odak görseli kenarlara sıfır yapıştırılmamalı; merkeze hizalanmış Güvenli Bölge (Safe Zone) içinde tutulmalıdır.
3. Dosya Formatı (JPG/PNG vs SVG) ve 300 KB Sınırı
Sosyal medya önizleme botlarının büyük çoğunluğu .svg (vektörel) görselleri Open Graph önizlemesi olarak desteklemez. Görsel formatı olarak .jpg, .png veya modern .webp tercih edilmelidir. Özellikle WhatsApp bağlantı önizleme mekanizması, hücresel veri tasarrufu amacıyla zaman aşımı süresini çok kısa tutar ve dosya boyutu ağır görselleri indirmez. Bu nedenle og:image dosyasının boyutu sıkıştırılarak 150 KB – 300 KB aralığında tutulmalıdır.
WhatsApp, LinkedIn ve Kurumsal Paylaşımlarda En Sık Yapılan 5 Hata
- Göreceli (Relative) URL Kullanımı: HTML içinde
<meta property="og:image" content="/img/kapak.jpg" />yazmak en yaygın hatadır. Tarayıcılar göreceli yolu anlayabilir ancak dışarıdan gelen sosyal medya botları protokol ve alan adı (https://www.site.com/img/kapak.jpg) olmadan görseli bulamaz. og:image:widthveog:image:heightEtiketlerini Unutmak: Bu iki etiket eksik olduğunda, bir sayfa ilk kez paylaşıldığında bot görseli asenkron indirdiği için ilk paylaşan kişide görsel çıkmaz; ancak ikinci paylaşımda görünür. Boyut etiketleri eklendiğinde ise kart alanı anında ayrılır ve ilk paylaşımda dahi görsel sorunsuz yüklenir.- Güvenlik Duvarı / WAF veya
robots.txtEngeli: Sunucu tarafındaki Cloudflare Bot Fight Mode, güvenlik duvarı kuralları veyarobots.txtdosyasıfacebookexternalhitveLinkedInBotkullanıcı aracılarını (User-Agent) engellerse hiçbir önizleme oluşturulamaz. - SSL Sertifikası Zincir Eksikliği (Intermediate CA): Masaüstü tarayıcılar eksik ara SSL sertifikalarını kendi önbelleklerinden tamamlayabilirken, WhatsApp ve Telegram botları eksik SSL zincirine sahip sunuculara bağlantıyı güvenlik gerekçesiyle reddeder.
- Tüm Sayfalarda Aynı Sabit Logo Görselini Kullanmak: Her blog makalesi ve her hizmet sayfası kendi başlığını ve konusunu yansıtan özgün bir kapak görseline sahip olmalıdır.
Tüm dijital kanallarda, arama motorlarında ve kurumsal iletişim ağlarında kusursuz temsil edilen web projeleri için Kurumsal Web Tasarım ve SEO Çözümleri sayfamızı ziyaret edebilir; dinamik içerik ve B2B portal mimarileri için Özel Yazılım Geliştirme ve Özel ERP ve İmalat Çözümleri hizmetlerimizi inceleyebilirsiniz.
Sıkça Sorulan Sorular
Sayfadaki og:image görselini değiştirdim ancak LinkedIn ve WhatsApp hala eski resmi gösteriyor. Nasıl düzeltebilirim?
Sosyal medya platformları her paylaşımda sunucunuzu tekrar yormamak için Open Graph verilerini 7 ila 30 gün boyunca kendi önbelleklerinde (Cache) tutar. Önbelleği anında temizlemek için LinkedIn Post Inspector ve Meta Sharing Debugger araçlarına girerek sayfa URL’inizi taratabilirsiniz (Scrape Again). WhatsApp içinse en pratik mühendislik çözümü, görsel dosya adını değiştirmek (kapak-v2.jpg) veya görsel URL’inin sonuna ?v=2 gibi bir sürüm parametresi eklemektir.
Open Graph etiketleri doğrudan Google arama sıralamasını (SEO) yükseltir mi?
Open Graph etiketleri Google’ın doğrudan bir sıralama algoritması sinyali değildir; ancak dolaylı etkisi çok yüksektir. İyi optimize edilmiş bir Open Graph kartı sosyal medyada ve mesajlaşma ağlarında tıklama oranını (CTR) ve marka etkileşimini katlar. Ayrıca Google Keşfet (Google Discover) ve Google Görseller, makalenin öne çıkan yüksek çözünürlüklü görselini seçerken og:image etiketini birincil referanslardan biri olarak kullanır.
Astro veya modern SSG projelerinde her makale için Open Graph etiketleri nasıl otomatikleştirilir?
Astro Content Collections mimarisinde her blog yazısının veya hizmet sayfasının YAML frontmatter alanında tanımlanan baslik, aciklama ve kapak değişkenleri, ana şablon bileşenine (BaseLayout.astro) prop olarak aktarılır. Şablon katmanında new URL(kapak, Astro.site) fonksiyonu kullanılarak tüm göreceli görsel yolları derleme anında (build-time) otomatik olarak hatasız mutlak HTTPS URL’lere dönüştürülür.