OpenGraph, Twitter Card & SERP Live Preview
Google SERP arama sonuçları, X (Twitter Large Card), LinkedIn, WhatsApp ve Facebook için sosyal medya önizlemelerinizi canlı simüle edin. Karakter ve görsel sınırlarını anında kontrol ederek Next.js 15+ App Router tip güvenli metadata kodunu kopyalayın.
OpenGraph, Twitter Cards ve SERP Görünüm Optimizasyonu Rehberi
Bir içeriğin arama motorlarında sıralanması kadar, sosyal ağlarda ve mesajlaşma uygulamalarında paylaşıldığında elde ettiği tıklama oranı (CTR) da başarısını belirler.OpenGraph (og:) ve Twitter Card (twitter:) meta etiketleri; bağlantınız X (Twitter), LinkedIn, WhatsApp, Facebook, Slack veya Discord'da paylaşıldığında yüksek çözünürlüklü kapak görseli, ilgi çekici başlık ve harekete geçirici özet kartları oluşturur.
1. Sosyal Ağlar ve Google SERP İçin Karakter ve Görsel Standartları
Farklı platformlar meta etiketlerini farklı kısıtlamalarla kırpar. Çapraz platform uyumluluğu için altın standartlar:
| Platform | İdeal Başlık Sınırı | İdeal Açıklama Sınırı | Önerilen Görsel Boyutu | Kart Türü / Format |
|---|---|---|---|---|
| Google SERP (Masaüstü & Mobil) | 50 - 60 karakter | 140 - 158 karakter | 1200x675 px (16:9) | Standart SERP Sonuç Kartı |
| X (Twitter) | ~70 karakter | 125 - 150 karakter | 1200x630 px (1.91:1) | summary_large_image |
| ~60 karakter | ~150 karakter | 1200x627 px | Zengin Profesyonel Kart | |
| WhatsApp & Telegram | ~50 karakter | ~100 karakter | 1200x630 px (< 300KB) | Mesaj İçi Önizleme Balonu |
| Facebook & Slack | ~65 karakter | ~150 karakter | 1200x630 px | Standart OG Kartı |
2. Next.js 15+ App Router Tip Güvenli Metadata Mimarisi
Next.js App Router'da meta verileri export const metadata: Metadata veya dinamik sayfalar için generateMetadata ile tanımlayabilirsiniz:
// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'
export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
const post = await fetchPost(params.slug)
const pageUrl = `https://ismailhakkieren.com/blog/${params.slug}`
const ogImageUrl = post.image || 'https://ismailhakkieren.com/images/default-og.jpg'
return {
title: `${post.title} | İsmail Hakkı EREN`,
description: post.summary,
alternates: {
canonical: pageUrl,
},
openGraph: {
title: post.title,
description: post.summary,
url: pageUrl,
siteName: 'İsmail Hakkı EREN',
images: [
{
url: ogImageUrl,
width: 1200,
height: 630,
alt: post.title,
},
],
type: 'article',
publishedTime: post.publishedAt,
},
twitter: {
card: 'summary_large_image',
title: post.title,
description: post.summary,
images: [ogImageUrl],
creator: '@ismailhakkieren',
},
}
}3. Sosyal Ağların Önbelleklerini (Cache) Sıfırlama
Sitenizde kapak görselini veya başlığı değiştirdiğinizde platformlar eski görseli göstermeye devam edebilir. Resmi önbellek sıfırlama araçları:
LinkedIn sunucularındaki eski OG görselini saniyeler içinde yeniler.
"Scrape Again" butonuyla Facebook ve WhatsApp meta verilerini tazeler.
Tweet bestecisine URL yapıştırarak kartın güncellendiğini doğrulayın.
Sıkça Sorulan Sorular (SSS)
WhatsApp paylaşımlarında kapak görseli neden bazen çıkmıyor?
WhatsApp, 300 KB'tan büyük görselleri veya HTTPS sertifikası geçersiz bağlantıları önbelleğe almaz. Görselinizin 1200x630 piksel, optimize edilmiş WebP veya sıkıştırılmış JPG formatında olduğundan emin olun.
twitter:card için summary mi yoksa summary_large_image mi seçmeliyim?
Modern içerik pazarlamasında kesinlikle summary_large_image önerilir. Büyük afiş görseli kullanıcıların dikkatini çeker ve organik tıklama oranını 3 kata kadar artırır.
Canonical URL tanımlamak neden zorunludur?
UTM etiketli veya filtreli paylaşımlarda (ör. ?utm_source=twitter) arama motorlarının aynı içeriği mükerrer (duplicate) saymaması ve sosyal paylaşımların tek bir ana URL altında toplanması için canonical etiketi şarttır.