Open Graph meta etiketleri: bilmeniz gerekenler

Ne öğreneceksiniz

Bu yazıda Open Graph etiketlerinin (kısaca OG) ne olduğunu, hangi etiketlerin öncelikli olduğunu, örnek HTML kullanımlarını, sosyal ağlardaki önizlemeleri nasıl test edeceğinizi ve sık karşılaşılan hataları adım adım bulacaksınız.

Open Graph nedir ve neden önemlidir?

Open Graph, bir web sayfasının sosyal ağlarda paylaşıldığında hangi başlık, açıklama, görsel ve URL ile gösterileceğini belirlemek üzere head kısmına eklenen meta etiketler kümesidir. Bu etiketler paylaşım önizlemelerinin tutarlılığını ve doğruluğunu artırır; sosyal akışlarda görünürlüğünüzü ve tıklama öncesi algıyı etkiler.

Open Graph verilerini alan sosyal servisler arasında Facebook, Twitter/X, Pinterest, Telegram ve WhatsApp gibi servisler bulunur. Bu nedenle sayfanızda belirgin bir kontrol yoksa, ağlar kendi önizleme mantıklarına göre rastgele bir görsel veya başlık seçebilir.

Temel Open Graph etiketleri ve örnekleri

Aşağıda sosyal önizlemelerde en sık kullanılan Open Graph etiketleri ve kısa açıklamaları yer alır. Bu örnekleri sayfanızın head bölümüne yerleştirin.

Temel örnek (HTML):

<meta property="og:title" content="Sayfa başlığı">

<meta property="og:description" content="Kısa ve açıklayıcı bir özet">

<meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png">

<meta property="og:url" content="https://example.com/ornek-sayfa">

<meta property="og:type" content="article">

Diğer faydalı etiketler: <meta property="og:site_name">, <meta property="og:locale"> ve görseller için <meta property="og:image:alt">. Twitter gibi servisler ayrıca twitter:card, twitter:title gibi kendi kart etiketlerini kullanır; Open Graph ile birlikte sunmak uyumluluğu artırır.

Uygulama ve kontrol listesi

Aşağıdaki adımlar, Open Graph etiketlerini doğru şekilde uygulamanız ve doğrulamanız için pratik bir kontrol listesi sunar.

Meta etiketleri sayfanın head bölümünde yer almalı; sayfa içeriğiyle tutarlı başlık ve açıklama kullanın.

og:url değeri canonical URL ile eşleşmeli; canonical ile uyumsuzluk paylaşım önizlemelerinde kafa karışıklığına yol açar.

og:image için erişilebilir, doğrudan indirilebilen ve doğru Content-Type başlığı döndüren bir URL kullanın; görüntü sunucunuzdan 200 OK yanıtı alındığından emin olun.

Sayfanın robotlar tarafından erişimi engellenmemeli (robots.txt veya X-Robots-Tag). Sosyal ağlar sayfayı tarayamazsa önizleme görüntülenmeyebilir.

Dinamik olarak oluşturulan meta etiketler kullanıyorsanız, sunucunun cihazlar için optimize edilmiş versiyonunda (mobile/desktop parity) aynı OG verilerinin bulunduğundan emin olun; farklı kullanıcı aracılarına ayrı içerik sunmak cloaking görünümüne neden olabilir.

Test ve doğrulama araçları

Open Graph uygulamasını doğrulamak için hem sunucu tarafı hem de görsel önizleme düzeyinde testler yapın. Aşağıdaki araç ve komutlar işinizi görecektir:

curl ile HTML kontrolü: Sayfanın head bölümünde OG etiketlerinin gerçekten render edildiğini görmek için HTML gövdesini alın. Örnek: curl -L "https://example.com/ornek-sayfa" ve çıktıda <meta property="og:title">, <meta property="og:image"> gibi satırları arayın.

HTTP başlıkları kontrolü: Görselin erişilebilir olduğunu doğrulamak için curl -I "https://yourdomain.com/wp-content/uploads/your-image.png" kullanarak yanıt kodunu ve Content-Type başlığını kontrol edin.

Tarayıcı DevTools: Chrome DevTools Elements panelinde head kısmını kontrol edin; render edilmiş DOM ile ham HTML arasındaki farkları görerek JS tarafından eklenen etiketleri doğrulayın.

Sosyal önizleme doğrulayıcıları: Facebook Sharing Debugger, Twitter/X Card Validator gibi araçlarla sosyal ağların sayfanızı nasıl gördüğünü test edin ve gerekiyorsa önbelleği yeniden taramasını isteyin.

Yaygın hatalar ve nasıl çözülürler

Aşağıda sık karşılaşılan problemler ve çözümleri yer alır.

Önizleme görseli görünmüyor: Görsel URL’si 200 döndüğünden, CORS veya hotlink engellemesi olmadığından ve Content-Type başlığının uygun olduğundan emin olun. Ayrıca sosyal ağların kullandığı botların görseli indirebildiğini doğrulayın.

Yanlış başlık veya açıklama: Sayfanın head bölümünde birden fazla og:title/og:description etiketi olmadığından ve CMS şablonlarının çakışmadığından emin olun. Dinamik meta üretimine dikkat edin; sunucu tarafı çıktısını kontrol edin.

Sosyal ağlar eski önizlemeyi gösteriyor: Ağların önbellekleri olabilir; Facebook Sharing Debugger veya ilgili servislerin yeniden tarama mekanizmalarını kullanarak güncellemeyi isteyin.

Ek uygulama ipuçları

Open Graph etiketleri tek başına sosyal performans garantisi vermez; fakat paylaşımların kullanıcı tarafından algılanma biçimini ve sıralamasını etkileyebilecek tıklama oranlarını (CTR) doğrudan etkileyebilir. Og meta verilerini içerikle uyumlu, kısa ve eyleme dönük olmayan açıklamalarla kullanın.

Görsel seçiminde dikkat: Görselin sayfa içeriğiyle doğrudan ilişkili olmasına, görselin önemli kısmının kırpılmayacak şekilde ortalanmasına ve alternatif metinlerin (og:image:alt) sağlanmasına öncelik verin.

Teknik bir kaynak okumak isterseniz: Teknik SEO Rehberi'ni okuyun — rehber, meta etiketleri ve head uygulamaları hakkında daha detaylı teknik bilgiler içerir.

Sık sorulan sorular

Open Graph etiketleri SEO'ya doğrudan etki eder mi?

Open Graph etiketleri arama motorlarının sıralama algoritması için doğrudan bir sinyal değildir. Ancak sosyal paylaşımlardan elde edilen tıklamalar ve etkileşimler dolaylı olarak trafik ve kullanıcı davranışını etkileyebilir; bu da dolaylı bir katkı anlamına gelebilir.

OG etiketlerini sayfanın neresine eklemeliyim?

OG meta etiketleri sayfanın head bölümünde olmalıdır. HTML içinde head dışına veya body içine yerleştirilen meta etiketleri bazı sosyal ağlar tarafından göz ardı edilebilir.

Sosyal ağlar sayfayı nasıl tarar; benim kontrolüm var mı?

Sosyal ağların kullandığı botlar sayfanızı tarar ve head bölümündeki meta etiketleri okur. Sizden beklenen, botların erişimini engellememek ve meta etiketlerin sunucunun gönderdiği HTML içinde yer almasını sağlamaktır. Önbelleğe alınan önizlemeler için ilgili sosyal ağın yeniden tarama aracını kullanabilirsiniz.

OG ve Twitter kart etiketlerini birlikte mi kullanmalıyım?

Evet; Open Graph geniş bir uyumluluk sağlar ama Twitter/X gibi servisler kendi kart etiketlerini de destekler. Her iki seti birlikte sunmak, farklı ağlarda daha tutarlı sonuç almanızı kolaylaştırır.