Bir web sitesini yayına almakla, o siteyi paylaşmaya hazır hale getirmek aslında aynı şey değil.

Site tarayıcıda düzgün görünebilir, mobilde sorunsuz çalışabilir ve bütün sayfalar yerli yerinde olabilir. Ama linki WhatsApp, LinkedIn veya başka bir platformda paylaştığınızda karşınıza sadece düz bir URL ya da alakasız bir görsel çıkıyorsa işin küçük ama önemli bir kısmı eksik kalmış oluyor.

Ben de kendi sitemi geliştirirken bu konuya daha fazla dikkat etmeye başladım. Özellikle blog yazılarının linklerini paylaştığımda her yazının kendi başlığı, açıklaması ve kapağıyla görünmesini istiyordum.

Burada devreye Open Graph metadata ve özellikle OG görsel giriyor.

OG Görsel Nedir?

OG, yani Open Graph, bir web sayfasının başka platformlarda nasıl temsil edileceğini anlatan metadata yapısıdır.

Sayfanın HTML'i içerisinde kullanıcıya doğrudan görünmeyen bazı bilgiler bulunur. Bunların arasında örneğin:

  • og:title
  • og:description
  • og:image
  • og:url

gibi değerler bulunabilir.

Open Graph protokolünde og:title, og:type, og:image ve og:url temel alanlar arasında yer alıyor. og:description gibi bilgiler de önizlemeyi daha açıklayıcı hale getirmek için kullanılabiliyor.

Bunlardan bu yazının konusu olan og:image, sayfanın paylaşım sırasında kullanılmasını istediğimiz görseli tanımlıyor.

Basitçe:

<meta
  property="og:image"
  content="https://example.com/images/article-cover.jpg"
/>

Bir platform sayfayı taradığında bu bilgiyi okuyup link önizlemesinde kullanabiliyor.

Neden Önemli?

Bir linki birine gönderdiğinizde çoğu zaman karşı taraf önce sitenin kendisini değil, linkin önizlemesini görüyor.

Düz bir URL yerine:

  • görsel
  • başlık
  • kısa açıklama

içeren bir kart, linkin neyle ilgili olduğunu çok daha hızlı anlatıyor.

Özellikle blog yazılarında bunun önemli olduğunu düşünüyorum.

Örneğin bu yazının sadece:

yusufdere.com/blog/...

şeklinde görünmesiyle, yanında yazının kapağının ve başlığının bulunduğu bir kart olarak görünmesi aynı şey değil.

OG görsel burada sitenin dışında oluşan ilk izlenimin bir parçası haline geliyor.

OG Görsel Olmazsa Ne Olur?

Tek bir kesin sonuç yok.

Linki işleyen platform:

  • sayfadaki başka bir görseli seçebilir,
  • sadece başlık ve açıklama gösterebilir,
  • istediğinizden farklı bir görsel kullanabilir,
  • bazı durumlarda neredeyse düz bir link gösterebilir.

Bu yüzden hangi görselin kullanılacağını platformun tahmin etmesini beklemek yerine bunu metadata içerisinde açıkça belirtmeyi daha doğru buluyorum.

Bir başka önemli nokta da şu:

OG görsel, sayfanın içinde gösterdiğiniz görselle aynı olmak zorunda değil.

İsterseniz sayfadaki kapak görselini kullanabilirsiniz. İsterseniz yalnızca sosyal medya önizlemesi için ayrı bir görsel hazırlayabilirsiniz.

Next.js’te OG Görsel Nasıl Eklenir?

Next.js kullanıyorsanız bunun için birkaç farklı yöntem var.

App Router tarafında Metadata API ile sayfa metadata'sını tanımlayabiliyoruz. Next.js statik bir metadata nesnesi veya dinamik içerikler için generateMetadata fonksiyonu kullanılmasına izin veriyor. Ayrıca opengraph-image.jpg gibi özel dosya adlarını da otomatik olarak metadata içerisinde kullanabiliyor.

Basit bir sayfada örneğin şöyle bir yapı kullanılabilir:

export const metadata = {
  title: "Yusuf Dere",
  description: "Yazılım, projeler ve öğrendiklerim üzerine.",
  openGraph: {
    title: "Yusuf Dere",
    description: "Yazılım, projeler ve öğrendiklerim üzerine.",
    images: ["/og-image.jpg"],
  },
};

Bu kullanım sabit sayfalarda oldukça yeterli.

Ama blog gibi her sayfanın farklı içeriğe sahip olduğu yapılarda iş biraz değişiyor.

Blog Yazılarında Dinamik OG Görsel

Blog tarafında bütün yazıların aynı görselle paylaşılmasını istemiyorum.

Bir Vercel yazısı paylaşılıyorsa Vercel yazısının kapağı, başka bir yazı paylaşılıyorsa onun kapağı görünmeli.

Bu nedenle metadata'yı yazının verisine göre üretmek daha mantıklı.

Mantık kabaca şöyle:

export async function generateMetadata({ params }) {
  const post = await getPostBySlug(params.slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: post.coverImage
        ? [post.coverImage]
        : [],
    },
  };
}

Buradaki önemli nokta görselin de diğer metadata gibi içerikten gelmesi.

Benim sitemde blog yazılarının zaten bir kapak görseli bulunabiliyor. Bu nedenle ayrıca ikinci bir sosyal medya görseli yönetmek yerine mevcut kapağı OG görsel olarak kullanmak benim için daha pratik.

Kapak yoksa da sırf önizleme boş kalmasın diye sahte bir görsel üretmek istemiyorum.

Statik mi, Dinamik mi?

Bence burada sayfanın türüne göre karar vermek daha mantıklı.

Ana sayfa, Hakkımda veya genel Projeler sayfası gibi yerlerde sabit bir OG görsel kullanılabilir.

Örneğin:

Ana Sayfa
→ Genel Yusuf Dere OG görseli

Hakkımda
→ Aynı genel görsel veya ayrı kişisel görsel

Ama içerik detaylarında dinamik yapı daha anlamlı:

Blog yazısı
→ Yazının kendi kapağı

Proje
→ Projenin kendi cover görseli

Böylece her URL paylaşıldığında o sayfayı gerçekten temsil eden bir önizleme oluşuyor.

Next.js ayrıca ImageResponse kullanarak kod üzerinden dinamik Open Graph görselleri üretmeye de imkan veriyor.

Örneğin her blog yazısının başlığını otomatik olarak aynı tasarım şablonunun üzerine yazdırmak mümkün.

Ben şu an kendi kullanımımda bunu zorunlu görmüyorum. Zaten yazılar için kapak hazırlıyorsam aynı görseli tekrar kullanmak daha basit.

Statik ve dinamik Open Graph görsellerinin kullanım alanları

OG Görsel Hazırlarken Nelere Dikkat Ediyorum?

Benim için en önemli konu görselin küçük bir önizlemede de anlaşılabilir olması.

Çok fazla yazı koymak genellikle iyi sonuç vermiyor.

Bir kapak hazırlarken mümkün olduğunca:

  • güçlü bir başlık,
  • sade bir kompozisyon,
  • yüksek kontrast,
  • kenarlardan yeterli boşluk,
  • siteyle tutarlı renkler

kullanmaya çalışıyorum.

Özellikle küçük metinler masaüstünde güzel görünse bile link önizlemesi küçüldüğünde tamamen okunamaz hale gelebiliyor.

Bu nedenle OG görseli normal bir blog banner'ı gibi değil, farklı boyutlarda gösterilecek bir önizleme olarak düşünmek daha doğru.

Değiştirdim Ama Eski Görsel Hâlâ Görünüyor

OG tarafında ilk karşılaşılan kafa karıştırıcı durumlardan biri bu.

Görseli veya metadata'yı değiştiriyorsunuz, siteyi yeniden deploy ediyorsunuz ama linki tekrar gönderdiğinizde eski görsel görünmeye devam ediyor.

İlk düşünce genellikle:

Kod çalışmadı mı?

oluyor.

Ama sorun her zaman kod olmayabilir.

Sosyal platformlar bir URL'nin metadata bilgisini önbelleğe alabilir. Bu yüzden site tarafında değişiklik yapılmış olsa bile platform bir süre eski önizlemeyi göstermeye devam edebilir.

Bu nedenle OG tarafında bir değişiklik yaptıktan sonra sadece sitenin HTML'ini değil, paylaşım yaptığınız platformdaki önizlemeyi de kontrol etmek gerekiyor.

OG Görsel SEO İçin mi Kullanılıyor?

Burada küçük bir ayrım yapmak gerekiyor.

OG metadata'nın temel amacı sosyal platformların sayfanızı nasıl göstereceğini kontrol etmek.

Bu nedenle og:image eklemeyi doğrudan:

Bunu eklersem Google sıralamam yükselir.

şeklinde düşünmek doğru değil.

Next.js'in kendi SEO dokümantasyonunda da Open Graph başlık, açıklama ve görsel kullanımının arama sıralamasına doğrudan etkisinden ziyade paylaşılabilirlik ve linkin tıklanabilirliği açısından değer taşıdığı belirtiliyor.

Ben de OG görseli SEO hilesi olarak değil, sayfanın dışarıda nasıl temsil edildiğinin bir parçası olarak görüyorum.

yusufdere.com’da Nasıl Kullanıyorum?

Kendi sitemde en mantıklı gelen yaklaşım, zaten sahip olduğum içerik verisini tekrar kullanmak oldu.

Blog yazılarında:

  • yazı başlığı
  • yazı açıklaması
  • yazının cover görseli
  • yazının URL'si

metadata üretirken kullanılabiliyor.

Projelerde de benzer şekilde, proje için gerçek bir cover varsa onu kullanabiliyorum.

Cover olmayan bir proje için sırf OG görsel olsun diye sahte bir proje ekranı üretmek istemiyorum. Projeyi gerçekten temsil eden bir görsel hazırladığımda sisteme eklemek bana daha doğru geliyor.

Bu yaklaşım hem içerik yönetimini basitleştiriyor hem de sitedeki görselle link paylaşımındaki görselin birbirinden kopmasını engelliyor.

Sonuç

OG görsel ilk bakışta web sitesinin küçük detaylarından biri gibi görünebilir.

Ama sitenin linkini başka bir yerde paylaştığınızda kullanıcının gördüğü ilk şey çoğu zaman sayfanın kendisi değil, oluşturulan link önizlemesi oluyor.

Bu yüzden bir siteyi yayınlarken artık sadece:

Sayfa tarayıcıda nasıl görünüyor?

diye bakmıyorum.

Bir de:

Bu sayfanın linkini birine gönderdiğimde nasıl görünüyor?

diye kontrol ediyorum.

Özellikle blog veya proje paylaşan bir sitede OG görsel, küçük bir metadata ayarından daha fazlası haline geliyor. İçeriğin site dışında da doğru şekilde temsil edilmesini sağlıyor.