OpenGraph (OG) etiketleri ne işe yarar?

OpenGraph etiketleri, web sitenizin sosyal medya ve mesajlaşma uygulamalarında paylaşıldığında başlık, açıklama ve kapak görseliyle zengin bir kart olarak görüntülenmesini sağlar.

İdeal OpenGraph görsel boyutu nedir?

Tüm sosyal ağlarda en kusursuz görüntüleme için 1200x630 piksel boyutunda ve 1.91:1 en-boy oranında görseller önerilir.

Next.js projelerinde metadata kodu nereye eklenmelidir?

Next.js 13+ App Router mimarisinde sayfa dosyalarınızın (page.tsx veya layout.tsx) en üstüne export const metadata: Metadata nesnesi olarak yerleştirilir.

OpenGraph & Meta Tag Live Preview

Google SERP, X (Twitter), LinkedIn ve WhatsApp kartlarınızı piksel düzeyinde canlı simüle edin ve Next.js 15+ kodunu üretin.

Semantik SEO & Sosyal Medya Önizlemesi

OpenGraph, Twitter Card & SERP Live Preview

İçeriğinizin Google, X (Twitter), LinkedIn ve WhatsApp paylaşımlarında nasıl görüneceğini canlı inceleyin ve Next.js 15+ kodunu üretin.

Hazır Şablonlar:

Meta Bilgileri Düzenleyin

Sayfa Başlığı (Title)62/60 karakter

Açıklama (Description)126/160 karakter

Canonical URL

Kapak Görseli URL'si (OG Image 1200x630)

Site Adı

X / Twitter Kullanıcısı

İsmail Hakkı ERENhttps://ismailhakkieren.com/blog/nextjs-16-rehberi

Next.js 16 ve React 19 ile Ölçeklenebilir Web Mimarisi Rehberi

React Server Components, Server Actions ve modern caching stratejileriyle yüksek performanslı Next.js mimarisi kurma adımları.

OpenGraph ve Sosyal Medya Meta Etiketleri Neden Bu Kadar Önemli?

Bir içeriğin arama motorlarında üst sıralara çıkması kadar, paylaşıldığı platformlarda tıklama alma oranı (CTR) da başarısını belirler. OpenGraph (OG) ve Twitter Cards meta etiketleri; bağlantınız X (Twitter), LinkedIn, WhatsApp, Facebook veya Slack üzerinde paylaşıldığında otomatik olarak yüksek kaliteli bir görsel, ilgi çekici bir başlık ve net bir özet kartı oluşturur.

Bu araç; Google arama sonuçlarından (SERP) popüler mesajlaşma ve sosyal medya platformlarına kadar tüm kart görünümlerini anında canlı olarak simüle eder ve Next.js 15+ App Router için tip güvenli export const metadata: Metadata kodunu üretir.

Kusursuz Meta Etiketleri İçin Altın Kurallar

📏 Başlık Uzunluğu (50-60 Karakter)

60 karakterin üzerindeki başlıklar Google mobil ve masaüstü sonuçlarında üç nokta (...) ile kesilir. En önemli anahtar kelimeleri başa yerleştirin.

📝 Açıklama Uzunluğu (150-160 Karakter)

Açıklama bir reklam metni gibi düşünülmelidir. Merak uyandıran, kullanıcıyı tıklamaya teşvik eden net bir özet sunun.

🖼️ OG Görsel Boyutu (1200x630 px)

1.91:1 en-boy oranı (1200x630 piksel), X ve LinkedIn'de büyük kart (summary_large_image) olarak tam netlikte görüntülenir.

Sıkça Sorulan Sorular (SSS)

Next.js App Router'da dinamik metadata nasıl oluşturulur?▼

Dinamik rotalarda (app/blog/[slug]/page.tsx) statik nesne yerine export async function generateMetadata({ params }) fonksiyonu tanımlanarak veritabanından veya CMS'ten çekilen başlık ve görsel bilgileri dinamik döndürülür.

WhatsApp neden bazen kapak görselini göstermez?▼

WhatsApp, boyutu 300 KB'tan büyük olan görselleri veya HTTPS üzerinden erişilemeyen bağlantıları önbelleğe almayabilir. Kapak görselinizin WebP/JPEG formatında ve optimize edilmiş olması tavsiye edilir.

Twitter summary vs summary_large_image farkı nedir?▼

summary kart türü sol tarafta küçük kare bir görsel gösterirken, summary_large_image tam genişlikte 1200x630 piksel afiş görseli görüntüler ve tıklama oranını 3 kata kadar artırır.