OpenGraph og:title og:description og:image
Sayfanızın sosyal ağlarda paylaşıldığında nasıl görüneceğini denetleyin
OpenGraph og:title og:description og:image, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
OpenGraph Nedir?
OpenGraph, herhangi bir sayfanın sosyal bir platformda paylaşıldığında nasıl görünmesi gerektiğini açıklayabilmesi için Facebook tarafından tanıtılan bir üst veri protokolüdür. Etiketler <head> içinde <meta property="og:..." content="..."> çiftleri olarak bulunur ve tüm büyük sosyal ağlar tarafından taranır.
Temel Etiketler
Pratikte zorunlu olan dört etiket og:title, og:description, og:image ve og:url etiketleridir. Bunlardan herhangi birinin eksik olması çekici olmayan bir paylaşım kartına veya daha kötüsü, kullanıcıların genellikle göz ardı ettiği tamamen önizlemesiz bir karta yol açar.
<meta property="og:title" content="Learn HTML">
<meta property="og:description" content="From DOCTYPE to Web Components.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/learn">og:title
Paylaşım kartındaki başlık. Tek satıra sığması ve sosyal ağ tarafından kesilmemesi için yaklaşık 60 karakterin altında tutun. Sayfanın <title> öğesiyle eşleştirin, ancak tıklama oranını artırmak için iyileştirme yapmaktan çekinmeyin.
og:description
Başlığın altında gösterilen bir veya iki cümlelik özet. 120-160 karakter hedefleyin; her platformda tamamen görüntülenebilecek kadar kısa, ilgi uyandıracak kadar uzun olsun. Tık tuzağından kaçının; dürüst açıklamalar uzun vadede daha fazla etkileşim sağlar.
og:image
Öne çıkan görsel. 1200x630 piksel boyutunda, JPG veya PNG biçiminde ve yaklaşık 5 MB'ın altında bir görsel kullanın. Her zaman mutlak bir URL kullanın; göreli URL'ler, tarayıcının "bu sayfa" kavramına sahip olmaması nedeniyle çalışmaz. Önizleme oluşturma sırasında fazladan bir isteği önlemek için og:image:width ve og:image:height sağlayın.
og:url
Sayfanın standart URL'si. Sayfada zaten <link rel="canonical"> bulunsa bile bunu ayarlayın; bazı tarayıcılar OG etiketini tercih eder. İzleme parametrelerini kaldırın; böylece paylaşılan URL'ler sosyal platformun veritabanında birçok "farklı" sayfaya çoğalmaz.
og:type
Platforma bunun ne tür bir içerik olduğunu bildirir: "website", "article", "product", "video.movie", "book" vb. Blog gönderileri için en yaygın seçim Article'dır ve article:published_time ile article:author gibi ek etiketleri kullanıma açar.
og:locale
İçeriğin BCP-47 yerel ayarıdır (ör. "en_US", "tr_TR"). og:locale:alternate ile birlikte kullanıldığında ağa sayfanın hangi diğer dillerde bulunduğunu bildirir; Facebook, bir önizlemeyi çevirip çevirmeyeceğine böyle karar verir.
og:site_name
Yayıncı sitenin görüntülenen adı. Bazı ağlar bunu kartta alt başlık olarak gösterir. Marka, hangi makalenin paylaşıldığından bağımsız olarak aynı görünsün diye adı kısa tutun ve her sayfada tutarlı kullanın.
Kartları Sınama
Sayfayı tarayıcının gördüğü şekilde almak, ayrıştırılan etiketleri görüntülemek ve önbelleğe alınmış önizlemeyi yenilemek için Facebook'un Sharing Debugger'ını ve LinkedIn'in Post Inspector'ını kullanın. Yeni bir og:image yayımladıktan sonra yeniden tarama gerekir; aksi takdirde kullanıcılar günlerce eski görseli görür.
Yaygın Tuzaklar
Sunucu tarafından oluşturulan etiketler zorunludur; tarayıcıların çoğu JavaScript çalıştırmaz, bu nedenle istemcide React tarafından eklenen OG etiketleri onlar için görünmez. Etiketleri başlangıç HTML'inde, tercihen SSR veya SSG kullanarak oluşturun; aksi takdirde paylaşım kartları sonsuza kadar genel kalır.
Bilgi Kontrolü
og:image neden göreli bir yol yerine mutlak bir URL kullanmalıdır?
Özet
OpenGraph etiketleri (og:title, og:description, mutlak URL içeren og:image, og:url, og:type, og:locale, og:site_name) her sayfanın paylaşıldığında nasıl görüneceğini belirler. Bunları sunucu tarafında oluşturun, başlıkları 60 karakterin altında ve açıklamaları yaklaşık 150 karakter uzunluğunda tutun, 1200x630 boyutunda görseller kullanın ve yayına almadan önce Facebook Sharing Debugger ile sınayın.
Sıkça Sorulan Sorular
“OpenGraph og:title og:description og:image” dersi ücretsiz mi?
Evet — “OpenGraph og:title og:description og:image” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“OpenGraph og:title og:description og:image” dersinde ne öğreneceğim?
Sayfanızın sosyal ağlarda paylaşıldığında nasıl görüneceğini denetleyin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“OpenGraph og:title og:description og:image” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- OpenGraph og:title og:description og:image
- Twitter Card Meta Etiketleri
- JSON-LD Yapılandırılmış Verilerinin Temelleri
- Uluslararası Sayfalar için Hreflang