Faz 12: Sosyal ve İletişim — OG Images, Paylaşım ve İletişim Kanalları

Neden Önemli?

Web sitenizin sosyal medyada nasıl göründüğü, paylaşım oranlarını ve marka algısını doğrudan etkiler. Open Graph meta etiketleri olmayan bir link paylaşıldığında, başlıksız ve görselsiz bir kutu görünür — bu da tıklama oranını %70'e kadar düşürür.

İletişim kanallarının çeşitliliği ve erişilebilirliği, potansiyel müşterilerin güvenini ve dönüşüm oranlarını artırır. HubSpot araştırmasına göre canlı chat sunan siteler, sunmayanlara kıyasla %20 daha yüksek dönüşüm oranına sahiptir.

Her platform (Twitter/X, LinkedIn, Facebook, WhatsApp, Telegram) farklı önizleme formatları ve boyut gereksinimleri kullanır. Tek bir OG image tüm platformlarda optimal görünmez — platform-spesifik optimizasyon gerekir.

Kontrol Listesi

• OG Image tasarımı: 1200x630px temel boyut, marka renkleri ve logosu, okunabilir başlık metni (büyük font), kategori/tarih bilgisi. Her sayfa türü için şablon (blog, ürün, hizmet, ana sayfa).
• OG Image generator: Dinamik OG image oluşturma sistemi — her blog yazısı ve sayfa için otomatik, başlık ve görsel içeren OG image üretimi. Next.js ImageResponse API veya Satori kütüphanesi.
• Twitter Card optimizasyonu: summary_large_image card tipi, 2:1 en-boy oranı (1200x600px), Twitter'a özel başlık ve açıklama uzunluğu optimizasyonu.
• LinkedIn preview: 1200x627px görsel, 150 karakterlik açıklama, şirket adı ve yazar bilgisi. LinkedIn Inspector ile önizleme testi.
• WhatsApp ve Telegram paylaşım: Bu platformlar OG meta etiketlerini kullanır ancak cache agresiftir. Cache temizleme stratejisi (URL parametresi ile bypass) planlanmalıdır.
• İletişim formu: İsim, e-posta, telefon (isteğe bağlı), konu, mesaj alanları. Spam koruması (honeypot + reCAPTCHA v3), otomatik yanıt e-postası, CRM entegrasyonu.
• Canlı destek entegrasyonu: Tawk.to, Intercom, Crisp veya WhatsApp Business chat widget'ı. Çalışma saatleri dışında otomatik mesaj, bot yanıtları ve insan temsilciye yönlendirme.
• Sosyal paylaşım butonları: Blog yazıları ve ürün sayfalarında sosyal paylaşım butonları — Facebook, Twitter/X, LinkedIn, WhatsApp, Telegram, link kopyalama. Native share API desteği (mobilde).
• Schema markup (ContactPoint): Telefon, e-posta, çalışma saatleri ve dil bilgisi içeren ContactPoint yapısal verisi.
• E-posta imza şablonu: Marka tutarlılığı için standart e-posta imzası — isim, unvan, telefon, web sitesi, sosyal medya linkleri ve logo.
• QR kod entegrasyonu: İletişim sayfası, kartvizit ve basılı materyaller için web sitesi URL'si ve vCard QR kodları.

Teknik Gereksinimler

Next.js dinamik OG Image (ImageResponse API):

// app/api/og/route.tsx import { ImageResponse } from 'next/og'; export async function GET(request: Request) { const { searchParams } = new URL(request.url); const title = searchParams.get('title') || 'VixSEO'; return new ImageResponse( ( <div style={{ background: 'linear-gradient(135deg, #0F2447 0%, #1a3a6b 100%)', width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '60px', }}> <div style={{ color: '#10b981', fontSize: 24, marginBottom: 16 }}> VixSEO Blog </div> <div style={{ color: 'white', fontSize: 48, fontWeight: 700, lineHeight: 1.2 }}> {title} </div> </div> ), { width: 1200, height: 630 } ); }

Sosyal meta etiketleri (tam set):

<!-- Open Graph --> <meta property="og:type" content="article" /> <meta property="og:title" content="Sayfa Başlığı" /> <meta property="og:description" content="Sayfa açıklaması..." /> <meta property="og:image" content="https://example.com/api/og?title=..." /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:url" content="https://example.com/sayfa" /> <meta property="og:locale" content="tr_TR" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@vixseo" /> <meta name="twitter:title" content="Sayfa Başlığı" /> <meta name="twitter:description" content="Sayfa açıklaması..." /> <meta name="twitter:image" content="https://example.com/api/og?title=..." />

İletişim formu spam koruması (honeypot + reCAPTCHA):

// Honeypot alanı (botlar doldurur, insanlar görmez) <div style="position: absolute; left: -9999px;"> <input type="text" name="website" tabIndex={-1} autoComplete="off" /> </div> // Server-side kontrol if (formData.website) { // Bot tespit edildi — sessizce başarı döndür return NextResponse.json({ success: true }); } // reCAPTCHA v3 doğrulama const recaptchaResponse = await fetch( `https://www.google.com/recaptcha/api/siteverify?secret=${RECAPTCHA_SECRET}&response=${token}` ); const { success, score } = await recaptchaResponse.json(); if (!success || score < 0.5) { return NextResponse.json({ error: 'Doğrulama başarısız' }, { status: 400 }); }

Sık Yapılan Hatalar

1. OG image oluşturmamak: Görselsiz paylaşım, sosyal medyada görünmezlik demektir. Her sayfa için en az varsayılan bir OG image olmalıdır.
2. Platform cache'ini hesaplamamak: Facebook, LinkedIn ve WhatsApp OG meta verilerini cache'ler. İçerik güncellendiğinde cache temizlenmezse eski bilgiler görünmeye devam eder.
3. İletişim formuna spam koruması eklememek: Korumasız form, günde yüzlerce spam mesajla dolar. Honeypot + reCAPTCHA kombinasyonu en etkili çözümdür.
4. Canlı destek widget'ını her sayfada göstermek: Blog okuyucusuna agresif chat popup'ı kötü UX'tir. Hizmet ve fiyat sayfalarında aktif, blog'da pasif (sadece ikon) olarak konfigüre edin.
5. Sosyal paylaşım butonlarını sayfanın altına gizlemek: Kullanıcılar paylaşım butonlarını göremezse kullanmaz. Sabit (sticky) sidebar veya yazı başlığının altına yerleştirin.

Profesyonel İpuçları

• OG image'ları A/B test edin — farklı başlık stili, renk ve görsel kullanarak hangi varyasyonun daha yüksek CTR getirdiğini ölçün.
• Facebook Sharing Debugger, Twitter Card Validator ve LinkedIn Post Inspector araçlarını düzenli kullanın — her platform güncellemesinden sonra önizlemelerin hala doğru çalıştığını doğrulayın.
• İletişim formundan gelen mesajları otomatik olarak CRM'e (HubSpot, Salesforce) aktarın — lead kayıplarını önleyin ve takip sürecini otomatikleştirin.
• WhatsApp Business API entegrasyonu ile destek taleplerini otomatik kategorize edin ve ekibe atayın — yanıt süresini %60 azaltabilirsiniz.
• Native Web Share API'yi mobil kullanıcılar için etkinleştirin — kullanıcılar cihazlarının kendi paylaşım menüsünü kullanabilir, bu da daha doğal bir deneyim sunar.