Türkçe
Open Graph ve Twitter Card etiketlerini canlı sosyal önizleme ile yazın.
Son güncelleme
Önerilen 1200×630, 8 MB altında, mutlak URL (https).
Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy.
<title>Learn to code by doing — Coddy</title> <meta name="description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." /> <link rel="canonical" href="https://coddy.tech" /> <!-- Open Graph (Facebook, LinkedIn, Discord, Slack) --> <meta property="og:title" content="Learn to code by doing — Coddy" /> <meta property="og:description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://coddy.tech" /> <meta property="og:image" content="https://storage.googleapis.com/coddy-15505.appspot.com/public/coddy-logo-trans.png" /> <meta property="og:image:alt" content="Coddy — Learn to code by doing" /> <meta property="og:site_name" content="Coddy" /> <meta property="og:locale" content="en_US" /> <!-- Twitter / X --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Learn to code by doing — Coddy" /> <meta name="twitter:description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." /> <meta name="twitter:image" content="https://storage.googleapis.com/coddy-15505.appspot.com/public/coddy-logo-trans.png" /> <meta name="twitter:image:alt" content="Coddy — Learn to code by doing" /> <meta name="twitter:site" content="@coddy_tech" />
Herhangi bir modern uygulamada bir link paylaştığında — bir gönderi, bir DM, bir Slack kanalı — platform URL'i çeker ve bir *paylaşım kartı* render etmek için küçük bir metadata parçası alır: başlık, açıklama, görsel ve site adı. Bu metadata, görünen sayfadan değil, <head> içindeki belirli bir <meta> etiketi kümesinden gelir. Open Graph protokolü — başlangıçta 2010'da Facebook tarafından icat edilen — bunların çoğunu tanımlar. X (eski adıyla Twitter) twitter: öneki ile birkaç fazladan etiket ekler. LinkedIn, Discord, Slack, iMessage, WhatsApp ve Pinterest — hepsi küçük varyasyonlarla aynı etiketleri okur.
Bu etiketleri doğru ayarlamak sayfa başına tek seferlik bir iştir, ama orantısız büyük bir etkisi vardır. Open Graph görseli olmayan bir sayfa paylaşıldığında bozuk görünür. Çok uzun bir başlık kelime ortasında kesilir. Yanlış og:image en-boy oranı her platformda letterbox edilir. Bu araç, sayfayı yayınlamadan *önce* kesilme ve kırpma sorunlarını görebilmen için bu değerleri canlı önizlemelerle ayarlamana olanak tanır.
Her şey yerel olarak çalışır. Form durumu, önizlemeler ve üretilen HTML tarayıcından dışarı çıkmaz — sızıntı endişesi olmadan lansman öncesi URL'leri ve henüz yayınlanmamış metinleri yapıştır.
property özelliğini kullanır (<meta property="og:title">), standart SEO ve Twitter Card etiketleri ise name kullanır (<meta name="description">, <meta name="twitter:card">).title, meta description), Open Graph (og:title, og:description) ve Twitter (twitter:title, twitter:description).og:image 1200×630 olmalı, HTTPS üzerinden sunulmalı ve mutlak bir URL ile verilmelidir — başka sunucular sayfayı çektiğinde göreli yollar çalışmaz.50-60 karakter hedefle. Facebook ~95 karakterde, X ise ~70 karakterde keser. Markadan değil değerden başla — "Cloudflare Workers ile nasıl deploy yapılır", "Coddy Blogu · Deployment Rehberi"nden daha iyidir.
120-155 karakter hedefle. Çoğu platform 200 civarında keser. Tam cümleler kullan — açıklama her kartta başlığın altında görünür ve kırpılmış parçalar yarım kalmış görünür.
Bir takip veya yönlendirme linki değil, sayfanın kendi mutlak https:// URL'sini kullan. Open Graph crawler'ları paylaşımları tekilleştirirken og:url'i takip eder — canonical bir URL paylaşım sayılarını ve önizlemeleri tutarlı tutar.
1200×630, X'teki summary_large_image kartları ve Facebook ile LinkedIn'deki standart kartlar için en uygun noktadır. PNG veya JPEG, ~5 MB'ın altında. Her zaman mutlak bir URL kullan — sosyal crawler URL'i kendi sunucusundan çektiği için göreli yollar başarısız olur.
**Üretilen <head> etiketleri** panelindeki bloğu sayfanın <head> bölümüne yapıştır. Deploy ettikten sonra her platformun debugger'ı (Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector) ile doğrula ve görseli daha sonra değiştirirsen yeniden tarama yapmaya zorla.
Aşağıdaki etiketler, bugün sosyal platformların okuduğu her şeyi kapsar. property= ile işaretlenenler Open Graph protokolüne aittir; name= ile işaretlenenler standart SEO / Twitter Card çeşitleridir. Referans şartnameleri: Open Graph, X Cards.
| Etiket | Kullanan | Önerilen | Notlar |
|---|---|---|---|
og:title | FB, LinkedIn, Slack, Discord | 50-60 karakter | Yoksa <title>'a fallback yapar — yine de ayarla. |
og:description | FB, LinkedIn, Slack, Discord | 120-155 karakter | Yoksa meta description'a fallback yapar. |
og:image | Her platform | 1200×630, < 5 MB, HTTPS, mutlak URL | Mutlak bir URL olmalıdır — göreli yollar başarısız olur. |
og:image:alt | Erişilebilirlik | Görseli açıklayan metin | Ekran okuyucular ve bazı platformlar tarafından kullanılır. |
og:url | FB, LinkedIn | Canonical https:// URL | Query string varyantları arasında paylaşımları tekilleştirmek için kullanılır. |
og:type | FB, LinkedIn | website veya article | article, article:published_time ve article:author'ı açar. |
og:site_name | FB, Discord | Marka adı | Kartın üstünde/altında küçük bir atıf olarak gösterilir. |
twitter:card | X | summary_large_image | summary küçük kare bir thumb için, summary_large_image banner düzeni için. |
twitter:title | X | og:title ile aynı | Yoksa X, og:title'a fallback yapar — güvenlik için ikisini de ayarla. |
twitter:description | X | og:description ile aynı | Yoksa og:description'a fallback yapar. |
twitter:image | X | og:image ile aynı | Yoksa og:image'a fallback yapar. |
twitter:site | X | @markaadın | Yayıncının X handle'ı — bazı analitikleri çalıştırır. |
**og:type**'ı article olarak ayarla, makale bölümüne **Yazar** ve **Yayınlanma zamanı** ekle ve 1200×630 bir kapak görseli kullan. Önizlemeler kartın her platformda nasıl göründüğünü gösterecek şekilde güncellenir.
og:type=article, bazı platformların (Discord, LinkedIn) atıf göstermek için kullandığı makale-özel etiketleri (article:published_time, article:author) açar. Twitter onları yok sayar ama şikâyet de etmez.
**og:type**'ı website olarak tut. Başlık olarak ürün adını, açıklama olarak tek cümlelik değer önerisini ve görsel olarak bir hero veya ekran görüntüsü kırpmasını kullan.
İniş sayfaları makale metadata'sına ihtiyaç duymaz. Paylaşılan bir iniş sayfası kartında en çok tıklanan öğe genellikle görseldir; bu yüzden temiz bir 1200×630 görsele yatırım yap.
Başlık: "Kavram — Bölüm · Dokümanlar". Açıklama: kavramı açıklayan tek cümle. Görsel: jenerik bir doküman kapağı ya da ilgili UI'ın bir ekran görüntüsü.
Doküman sayfaları Slack kanallarında ve X thread'lerinde paylaşılır. Tutarlı bir doküman kapağı görseli, başlık okunmadan önce bile onları yoğun bir feed'de tanınır kılar.
/images/cover.png gibi göreli bir og:image URL'i kullanmak. Sosyal crawler'lar sayfana *kendi* sunucularından gelir — göreli yollar sosyal platformun kendi alan adını işaret eder ve 404 verir. Her zaman mutlak bir https:// URL'i kullan.twitter:card'ı unutmak. Bu olmadan X, görsel olmayan minimal bir karta varsayılan olarak geçer. Hemen hemen her markanın gerçekten istediği banner düzenini almak için twitter:card=summary_large_image ekle.og:image:alt etiketini atlamak. Bir maliyeti yok, ekran okuyucu kullanıcılarına yardım eder ve birkaç platform bunu render edilen kartta alt metni olarak gösterir.<meta> etiketi kümesiyle — başlık, açıklama, görsel, tür vb. — tanımlamasına olanak tanır. Bugün tüm büyük sosyal ve sohbet platformları onu okur; paylaşım kartı metadata'sı için fiili standart haline gelmesinin sebebi de budur.twitter: etiketlerinden eşdeğer og: etiketlerine fallback yapar; yani teknik olarak yalnızca Open Graph ile idare edebilirsin. Ama twitter:card, twitter:site ve twitter:creator eklemek, kartın X'te nasıl render edildiği üzerinde daha ince kontrol sağlar.<title> ve meta description'ı okur. Google ara sıra görsel arama ve Discover yüzeyleri için og:image'i alabilir, ama bu bir sıralama sinyali değildir.