Her Geliştirici Neden Kendi SEO Altyapısını Kurmalı?
Bugün, yakın zamanda kendi portföy sitemin SEO'su üzerinde çalışırken edindiğim bir deneyimi paylaşmak istiyorum. Eğer bir geliştiriciyseniz ve siteniz arama sonuçlarında görünmüyorsa, bu yazı tam size göre.
Sitenizi Google Search Console'a Nasıl Bağlarsınız?
İlk olarak Google Search Console adresine gidin. Bir mülk (property) oluştururken iki seçeneğiniz vardır:
- Alan Adı (DNS) Doğrulaması - Tüm alt alan adlarını (subdomains) kapsar.
- URL Öneki Doğrulaması - Yalnızca belirli bir URL'yi doğrular.
<!-- HTML Meta Etiketi doğrulaması -->
<meta name="google-site-verification" content="VERIFICATION_CODE" />
Bu meta etiketini layout.tsx dosyanızın <head> bölümüne ekleyin. Google, birkaç dakika içinde sitenizi doğrulayacaktır.
Site Haritası Felaketi: example.com Hatası
İşte işlerin ilginçleştiği yer burası. Bir Next.js projesi başlattığınızda, varsayılan src/app/robots.ts ve src/app/sitemap.ts dosyaları oluşturulur. Bu dosyalar genellikle şu şekilde görünür:
// robots.ts
export default function robots(): MetadataRoute.Robots {
return {
sitemap: 'https://example.com/sitemap.xml', // ❌ Hata!
};
}
// sitemap.ts
const baseUrl = 'https://example.com'; // ❌ Hata!
Eğer bu example.com değerlerini kendi alan adınızla değiştirmezseniz, Google sitenizi yanlış indeksleyecektir. Bunu fark ettiğimde şu düzeltmeyi yaptım:
// robots.ts - Düzeltilmiş versiyon
export default function robots(): MetadataRoute.Robts {
return {
sitemap: 'https://gucluyumhe.dev/sitemap.xml',
};
}
// sitemap.ts - Düzeltilmiş versiyon
const baseUrl = 'https://gucluyumhe.dev';
Next.js Projelerinde Meta Etiketlerinin Önemi
Meta etiketleri, SEO'nun temel taşlarından biridir. Next.js 13+ ile birlikte gelen Metadata API bu işi oldukça kolaylaştırıyor:
export const metadata: Metadata = {
title: {
default: "Ömer Özbay | Full-Stack Engineer",
template: "%s | Ömer Özbay"
},
description: "Computer Engineering student building AI-powered SaaS applications...",
keywords: [
"Ömer Özbay",
"Full-Stack Developer",
"React Developer",
"Next.js Developer",
"TypeScript"
],
authors: [{ name: "Ömer Özbay", url: "https://gucluyumhe.dev" }],
openGraph: {
type: "website",
locale: "en_US",
url: "https://gucluyumhe.dev",
siteName: "Ömer Özbay Portfolio",
images: [{
url: "https://gucluyumhe.dev/og-image.png",
width: 1200,
height: 630,
}],
},
twitter: {
card: "summary_large_image",
creator: "@gucluyumhe",
},
robots: {
index: true,
follow: true,
},
};
Anahtar Kelimeler (Keywords) ve Open Graph Neden Önemlidir?
- Keywords (Anahtar Kelimeler): Arama motorlarına sitenizin içeriği hakkında bilgi verir.
- Open Graph: Sosyal medyada paylaşıldığında sitenizin görsel olarak güzel görünmesini sağlar.
- Twitter Card: X (eski adıyla Twitter) üzerinde paylaşıldığında büyük görsel ve açıklama kartı gösterilmesini sağlar.
Erişilebilirlik: ARIA Etiketleri (Labels)
Bir diğer önemli nokta ise erişilebilirliktir. Ekran okuyucular için tüm bağlantılara ve butonlara açıklayıcı isimler sağlamalıyız:
// ❌ Bad example
<Link href="/projects">Projects</Link>
// ✅ Good example
<Link href="/projects" aria-label="View my projects">Projects</Link>
// ❌ Mobile menu button
<button onClick={toggleMenu}>☰</button>
// ✅ Mobile menu button
<button
onClick={toggleMenu}
aria-label={isOpen ? "Close menu" : "Open menu"}
aria-expanded={isOpen}
>☰</button>
PWA Desteği: site.webmanifest
Mobil kullanıcılara "Ana ekrana ekle" özelliğini sunmak istiyorsanız, bir manifest dosyası gereklidir:
{
"name": "Ömer Özbay Portfolio",
"short_name": "Ömer Özbay",
"description": "Full-Stack Engineer Portfolio",
"start_url": "/",
"display": "standalone",
"background_color": "#0e0e0f",
"theme_color": "#00E5FF",
"icons": [{
"src": "/favicon.svg",
"sizes": "any",
"type": "image/svg+xml"
}]
}
Sonuç
SEO teknik bir konu gibi görünse de aslında oldukça anlaşılır ve mantıklı adımlardan oluşur. Önemli olan hususlar şunlardır:
- Doğrulama kodunu ekleyin - Google ile ilk temas.
- Site haritasını düzeltin - Google'ın sitenizi keşfetmesini sağlayın.
- Meta etiketlerini optimize edin - Arama sonuçlarında dikkat çekin.
- Erişilebilirliği sağlayın - Herkes için kullanılabilir hale getirin.
- PWA desteği sunun - Mobil deneyimi iyileştirin.
Unutmayın: Harika bir ürününüz olsa bile, eğer kimse sizi bulamıyorsa bunun hiçbir anlamı yoktur. SEO, dijital dünyadaki kapınızın anahtarıdır.
Bir sonraki yazıda görüşmek üzere!
