CodeKitHubBu Araç Nedir?
Open Graph, aslen Facebook tarafından oluşturulan ve herhangi bir web sayfasının HTML <head> bölümüne yerleştirilen küçük bir <meta property="og:..."> etiket kümesiyle kendini tanımlamasını sağlayan bir protokoldür. Biri bağlantınızı bir sosyal uygulamaya, sohbet istemcisine veya mesajlaşma aracına yapıştırdığında, bu uygulama önizleme kartını (başlık, açıklama ve küçük görsel) oluşturmak için sayfa içeriğinden tahmin yürütmek yerine bu etiketleri okur.
Twitter (X), bir bağlantının özellikle kendi platformunda nasıl önizlendiğini kontrol etmek için ilişkili ama ayrı bir etiket kümesi olan <meta name="twitter:..."> kullanır. Çoğu site her ikisini de ayarlar: geniş uyumluluk için Open Graph etiketleri ve X'teki önizlemeyi ince ayarlamak için Twitter Card etiketleri (örneğin küçük bir özet kartı yerine büyük görselli bir kart seçmek gibi).
Bu etiketler olmadan, paylaşılan bir bağlantı ya hiç önizleme göstermez ya da platform sayfanın ham içeriğinden bir başlık ve görsel tahmin etmeye çalışır — genellikle yanlış başlığı, rastgele bir satır içi görseli veya hiçbir şeyi seçer. og:title, og:description ve og:image'i açıkça belirlemek, birisi tıklamadan önce içeriğinizin nasıl sunulduğu üzerinde tam kontrol sahibi olmanızı sağlar.
Neden Kullanmalısınız?
- Canlı önizleme — hiçbir şey yayınlamadan önce, yazarken paylaşım kartının tam olarak nasıl görüneceğini görün.
- Open Graph etiketlerini (og:title, og:description, og:image, og:url, og:type, og:site_name) ve Twitter Card etiketlerini tek seferde oluşturur.
- Platformların gerçekten okuduğu alanları kapsar: başlık, açıklama, kanonik URL, görsel, site adı, içerik türü ve Twitter kart stili.
- Tamamen istemci tarafında çalışır — başlığınız, açıklamanız ve URL'leriniz tarayıcınızdan asla çıkmaz.
- Ücretsiz, giriş gerektirmez, sınır yoktur — çıktıyı kopyalayıp HTML'inize yapıştırın.
Nasıl Kullanılır
- Sayfanızın başlığını ve kısa bir açıklama girin (başlık için ~60 karakterin, açıklama için ~155–160 karakterin altını hedefleyin).
- Sayfanın kanonik URL'sini ve önizleme görselinin mutlak URL'sini girin (görsel URL'leri https://example.com/gorsel.jpg gibi tam olmalı, göreli bir yol olmamalıdır).
- İsteğe bağlı olarak site adını ayarlayın, bir og:type seçin (website, article, product, profile, video, music) ve bir Twitter Card türü seçin (summary veya summary_large_image).
- Başlık, açıklama ve görselin birlikte iyi göründüğünü onaylamak için canlı önizleme kartını kontrol edin.
- "Kopyala"ya tıklayın ve oluşturulan <meta> etiketlerini sayfanızın <head> bölümüne, kapanış </head> etiketinden önce yapıştırın.
Örnek
Giriş
Başlık: "Gerçekten Kullanacağınız 10 Ücretsiz Geliştirici Aracı"
Açıklama: "JSON, regex, UUID ve daha fazlası için tarayıcı tabanlı araçların seçkisi — kurulum gerektirmez."
URL: https://example.com/blog/dev-tools
Görsel: https://example.com/images/dev-tools-cover.jpgÇıkış
<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />Yalnızca doldurduğunuz alanlar sonuca dahil edilir; site adını boş bırakmak çıktıdan og:site_name'i basitçe çıkarır.
Kaçınılması gereken yaygın hatalar
- og:image'i hiç ayarlamamak — bu olmadan, çoğu platform ya hiç önizleme görseli göstermez ya da sayfadan rastgele alınmış bir görsele geri döner; bu genellikle bozuk veya profesyonellikten uzak görünür.
- /images/cover.jpg gibi göreli bir görsel yolu kullanmak, https://example.com/images/cover.jpg gibi tam bir URL yerine — sosyal tarayıcılar genellikle göreli yolları çözemez.
- Yanlış görsel en boy oranı — kare veya dikey bir görsel, platform onu 1,91:1 yatay çerçeveye zorladığında garip şekilde kırpılır; paylaşım görselinizi her zaman 1200×630'a yakın tasarlayın.
- Kesilen başlıklar veya açıklamalar — çoğu platformda üç noktayla kesilmemesi için og:title'ı ~60 karakterin, og:description'ı ~155–160 karakterin altında tutun.
- Önbelleğe alınmış önizlemeleri güncellemeyi unutmak — yayındaki bir sayfada og etiketlerini değiştirdikten sonra, siz Facebook veya LinkedIn'in hata ayıklama araçlarıyla manuel olarak yeniden taramayı zorlayana kadar eski önizleme önbellekte kalabilir.
Her etiket nerede kullanılır
og:title, og:description ve og:image, önizleme oluşturmak için neredeyse her platformun okuduğu üç etikettir. og:url, tarayıcılara önizlemenin hangi kanonik bağlantıyla ilişkilendirilmesi gerektiğini söyler; bu, aynı içeriğe birden fazla URL üzerinden ulaşılabildiğinde önemlidir. og:site_name, Facebook gibi bazı platformlarda başlığın üzerinde küçük bir etiket (yayın veya marka adı gibi) gösterir.
og:type, Open Graph'ın daha zengin nesne modelini destekleyen tarayıcılar için sayfanın hangi tür bir nesneyi temsil ettiğini değiştirir — örneğin article, bunları okuyan platformlarda og:article:published_time ve og:article:author'ı etkinleştirir; ancak çoğu sosyal önizleme bu ek alanları yok sayar ve yalnızca temel başlık/açıklama/görsel üçlüsünü kullanır.
twitter:card, özellikle X'teki düzeni kontrol eder: summary, metnin yanında küçük kare bir küçük görsel gösterirken, summary_large_image metnin üzerinde tam genişlikte bir görsel gösterir — anlamlı bir kapak görseline sahip içerikler için neredeyse her zaman ikincisi daha iyi seçimdir.
Sıkça Sorulan Sorular
og:image ne boyutta olmalı?
Önerilen boyut 1200×630px — yüksek DPI ekranlar için yeterince büyük ve Facebook, LinkedIn ile X'in kırptığı yaklaşık 1,91:1 en boy oranına uygun. Dosyayı 5–8MB'ın altında tutun, JPG veya PNG kullanın ve görsel URL'sinin göreli bir yol değil, tam bir mutlak URL olduğundan emin olun — çoğu tarayıcı göreli görsel yollarını doğru şekilde çözemez.
Bağlantıyı paylaştığımda önizlemem neden görünmüyor?
En yaygın nedenler şunlardır: eksik og:image, mutlak yerine göreli görsel URL'si, tarayıcının robots.txt tarafından engellenmesi veya platformun eski bir önizlemenin önbelleğe alınmış sürümünü göstermesi. Facebook ve LinkedIn, taranan önizlemeleri agresif şekilde önbelleğe alır — etiketlerinizi güncelledikten sonra Facebook'un Sharing Debugger'ını veya LinkedIn'in Post Inspector'ını kullanarak yeniden taramayı zorlayın.
og: etiketleri ile twitter: etiketleri arasındaki fark nedir?
og: etiketleri (og:title, og:description, og:image vb.) Facebook, LinkedIn, Slack, Discord, WhatsApp ve çoğu diğer platform tarafından okunan Open Graph standardının bir parçasıdır. twitter: etiketleri Twitter/X'in kendi biçimidir. twitter:title veya twitter:image eksikse, X otomatik olarak eşdeğer og: etiketine geri döner — ancak her ikisini de açıkça ayarlamak, büyük bir önizleme görseli için summary_large_image seçme dahil daha fazla kontrol sağlar.
Hangi og:type kullanmalıyım?
Ana sayfalar ve genel içerik dahil çoğu sayfa için "website" güvenli varsayılan seçenektir. Blog yazıları ve haberler için "article" kullanın (yayın zamanı gibi makaleye özgü ek etiketleri açar), e-ticaret sayfaları için "product" ve kişisel veya kullanıcı profil sayfaları için "profile" kullanın. Tür esas olarak hangi ek Open Graph özelliklerinin geçerli olduğunu etkiler, temel önizleme kartının görünümünü değil.
Bu araç verilerimi bir yere saklıyor veya gönderiyor mu?
Hayır. Tüm oluşturma işlemi tarayıcınızda düz JavaScript kullanılarak yerel olarak gerçekleşir. Yazdığınız hiçbir şey iletilmez, kaydedilmez veya saklanmaz — sekmeyi kapatmak her şeyi temizler.