Meta Tags, Open Graph ve Twitter Cards: Sosyal Paylaşım Optimizasyonu
Meta Tags, Open Graph ve Twitter Cards: Sosyal Paylaşım Optimizasyonu
Web sayfalarınız sosyal medyada paylaşıldığında nasıl göründüğü, tıklama oranınızı doğrudan etkiler. Meta tag'ler, Open Graph protokolü ve Twitter Cards, hem arama motorları hem de sosyal platformlar için sayfanızın ön izleme bilgilerini kontrol etmenizi sağlar. Bu yazıda tüm bu standartları, doğru implementasyon yöntemlerini ve sık yapılan hataları detaylıca ele alacağız.
Meta Tags: Temelden İleri Seviyeye
HTML meta tag'leri, sayfanız hakkında metadata sağlayan <head> bölümündeki elementlerdir. Arama motorları ve sosyal platformlar bu bilgileri sayfanızı tanımlamak, indekslemek ve önizlemek için kullanır.
Temel SEO Meta Tag'leri
<head>
<!-- Zorunlu: Sayfa başlığı (50-60 karakter) -->
<title>Meta Tags ve Open Graph Rehberi | Tarik Tunç</title>
<!-- Zorunlu: Sayfa açıklaması (150-160 karakter) -->
<meta name="description" content="Meta tags, Open Graph ve Twitter Cards ile sosyal paylaşım optimizasyonu. SEO ve sosyal medya için kapsamlı rehber.">
<!-- Robots direktifi -->
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<!-- Canonical URL -->
<link rel="canonical" href="https://tariktunc.com/blog/meta-tags-og-twitter">
<!-- Dil ve karakter seti -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-language" content="tr">
<!-- Favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>... ile gösterir.
Open Graph Protokolü
Open Graph (OG), Facebook tarafından geliştirilen ve web sayfalarının sosyal medyada nasıl görüneceğini kontrol eden bir protokoldür. LinkedIn, WhatsApp, Telegram ve diğer birçok platform da OG tag'lerini destekler.
<!-- Temel Open Graph Tag'leri -->
<meta property="og:type" content="article">
<meta property="og:title" content="Meta Tags ve Open Graph Rehberi">
<meta property="og:description" content="Sosyal paylaşım optimizasyonu için kapsamlı rehber.">
<meta property="og:image" content="https://tariktunc.com/images/og-meta-tags.webp">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Meta Tags ve Open Graph Rehberi kapak görseli">
<meta property="og:url" content="https://tariktunc.com/blog/meta-tags-og-twitter">
<meta property="og:site_name" content="Tarik Tunç Blog">
<meta property="og:locale" content="tr_TR">
<!-- Article-specific OG tag'leri -->
<meta property="article:published_time" content="2025-08-05T10:00:00+03:00">
<meta property="article:modified_time" content="2025-08-05T10:00:00+03:00">
<meta property="article:author" content="https://tariktunc.com">
<meta property="article:section" content="SEO">
<meta property="article:tag" content="meta tags">
<meta property="article:tag" content="open graph">Twitter Cards
Twitter (X), kendi meta tag sistemini kullanır. İki ana kart tipi vardır: summary (küçük kare görsel) ve summary_large_image (geniş dikdörtgen görsel).
<!-- Twitter Card Tag'leri -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@tarikisamettunc">
<meta name="twitter:creator" content="@tarikisamettunc">
<meta name="twitter:title" content="Meta Tags ve Open Graph Rehberi">
<meta name="twitter:description" content="Sosyal paylaşım optimizasyonu için kapsamlı rehber.">
<meta name="twitter:image" content="https://tariktunc.com/images/twitter-meta-tags.webp">
<meta name="twitter:image:alt" content="Meta Tags ve Open Graph Rehberi kapak görseli">Next.js App Router ile Metadata API
Next.js 14+, Metadata API ile tüm meta tag'leri TypeScript güvenliğiyle yönetmenizi sağlar:
// app/blog/[slug]/page.tsx
import { Metadata } from 'next';
interface Props {
params: { slug: string };
}
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const post = await getPost(params.slug);
return {
title: `${post.title} | Tarik Tunç`,
description: post.summary,
openGraph: {
type: 'article',
title: post.title,
description: post.summary,
images: [
{
url: post.image,
width: 1200,
height: 630,
alt: post.title,
},
],
publishedTime: post.date,
authors: ['Tarik Tunç'],
tags: post.tags,
},
twitter: {
card: 'summary_large_image',
title: post.title,
description: post.summary,
images: [post.image],
creator: '@tarikisamettunc',
},
alternates: {
canonical: `https://tariktunc.com/blog/${params.slug}`,
},
robots: {
index: true,
follow: true,
'max-snippet': -1,
'max-image-preview': 'large',
},
};
}twitter:title tanımlı değilse og:title kullanılır. Ancak en iyi sonuç için her iki seti de tanımlamanız önerilir.
Sosyal Paylaşım Önizleme Araçları
Sayfanızın sosyal medyada nasıl göründüğünü yayınlamadan önce test edin:
- Facebook Sharing Debugger: OG tag'lerini doğrular ve cache'i temizler.
- Twitter Card Validator: Twitter kart önizlemesi gösterir.
- LinkedIn Post Inspector: LinkedIn paylaşım görünümünü kontrol eder.
- opengraph.xyz: Tüm platformlar için birleşik önizleme aracı.
Sık Yapılan Hatalar
- Eksik og:image: Görsel olmadan paylaşımlar düşük CTR alır.
- Yanlış image boyutu: 1200x630 idealdir; diğer boyutlar kırpılabilir.
- Relative URL kullanımı: OG ve Twitter tag'lerinde mutlaka absolute URL kullanın.
- Cache problemi: Sosyal platformlar meta bilgileri cache'ler. Güncelleme sonrası debugger araçlarıyla cache'i temizleyin.
- Duplicate meta tag'ler: Aynı meta tag'in birden fazla tanımlanması öngörülemeyen sonuçlara yol açar.
Sonuç
Meta tag'ler, Open Graph ve Twitter Cards, web sayfalarınızın hem arama motorlarında hem de sosyal medyada nasıl temsil edildiğini kontrol eder. Doğru yapılandırılmış meta bilgiler, organik tıklama oranınızı ve sosyal paylaşım etkileşimlerinizi önemli ölçüde artırır. Her sayfanız için benzersiz ve açıklayıcı meta tag'ler oluşturun, görsellerinizi optimize edin ve değişikliklerinizi debugger araçlarıyla test edin.