Günümüzde modern web uygulamaları, kullanıcı deneyimini artırmak için sıklıkla JavaScript kullanır. Ancak, JavaScript tabanlı siteler SEO konusunda geleneksel statik sitelere göre daha fazla zorlukla karşılaşır. İşte JavaScript destekli web sitelerinin SEO performansını optimize etmek için dikkat etmesi gereken temel başlıklar:
1. JavaScript ve Arama Motorlarının Çalışma Mantığı
Arama motorları, JavaScript’i render etmek için genellikle iki aşamalı bir süreç kullanır:
- İlk Tarama (Crawling): HTML ve statik kaynakları indirir.
- Render Etme: JavaScript’i çalıştırarak dinamik içeriği oluşturur.
Ancak, Googlebot gibi botlar sınırlı kaynaklarla çalışır ve karmaşık JS kodlarını render ederken sorun yaşayabilir. Bu nedenle, JavaScript’in doğru şekilde yapılandırılması kritiktir.
2. JavaScript Render Yöntemleri ve SEO Çözümleri
a) Server-Side Rendering (SSR)
- Ne İşe Yarar? JavaScript kodunu sunucuda render edip, istemciye statik HTML gönderir.
- Avantajları: Hızlı içerik yükleme, bot dostu yapı.
- Frameworkler: Next.js (React), Nuxt.js (Vue), Angular Universal.
- Örnek Uygulama:
// Next.js'de SSR örneği
export async function getServerSideProps() {
const data = await fetchAPI();
return { props: { data } };
}b) Dynamic Rendering
- Mantık: Botlara pre-render edilmiş HTML, kullanıcılara ise client-side JS sunar.
- Araçlar: Rendertron, Puppeteer, Prerender.io.
- Nasıl Ayarlanır? User-agent kontrolü ile botlara statik HTML yönlendirmesi.
c) Pre-Rendering (Static Site Generation)
- Kullanım Alanı: Blog, dokümantasyon gibi içerikler.
- Araçlar: Gatsby (React), VuePress, Jekyll.
- Örnek:
// Gatsby'de statik sayfa oluşturma
export const query = graphql`
query {
allMarkdownRemark {
nodes {
html
}
}
}
`;3. Teknik SEO Optimizasyonları
a) Meta Etiket ve Structured Data Yönetimi
- JS ile dinamik meta etiketler eklemek için React Helmet gibi kütüphaneler kullanın.
- Schema.org işaretlemelerini JS ile enjekte edin, ancak test araçlarıyla doğrulayın.
b) Client-Side Routing ve URL Yapısı
- Sorun: Hash (#) bazlı URL’ler (ör:
example.com/#/page) botlar tarafından görmezden gelinir. - Çözüm: HTML5 History API kullanarak temiz URL’ler oluşturun (ör:
example.com/page). - Frameworkler: React Router, Vue Router.
c) Lazy-Loading ve Dinamik İçerik
- İpuçları:
- Görüntülenen alana giren içerikleri Intersection Observer API ile yükleyin.
- Yer tutucu (placeholder) kullanarak layout shift’i önleyin.
// Lazy-loading örneği
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadContent();
}
});
});4. Performans Optimizasyonu
- Code Splitting: Webpack veya Rollup ile JS paketlerini bölün.
- Görsel Optimizasyonu: WebP formatı, lazy loading,
loading="lazy"özelliği. - Core Web Vitals: LCP, FID, CLS metriklerini izlemek için Lighthouse kullanın.
5. Sık Yapılan Hatalar ve Çözümleri
- Hata 1: JS/CSS dosyalarının robots.txt ile engellenmesi.
Çözüm: Googlebot’un dosyalara erişimine izin verin. - Hata 2: API verilerinin botlarca görülememesi.
Çözüm: SSR ile veriyi HTML’ye gömün. - Hata 3: Hash URL’ler.
Çözüm: History API ile temiz URL’ler kullanın.
6. Test ve İzleme
- Google Search Console: URL Denetleme aracıyla render edilmiş HTML’yi kontrol edin.
- Screaming Frog: JavaScript render modu ile tarama yapın.
- Log Analysis: Sunucu loglarında bot aktivitesini analiz edin.
7. Gelecek Trendleri ve Öneriler
- WebAssembly (Wasm): Yüksek performanslı uygulamalar için kullanılacak, ancak SEO için SSR şart.
- Jamstack Mimari: Pre-rendering ve CDN’ler ile SEO dostu statik siteler.
- Google’ın Gelişmiş JS Desteği: Ancak hala SSR veya hybrid rendering tavsiye ediliyor.
Değerlendirme
JavaScript tabanlı web siteleri, SEO’da başarılı olmak için teknik detaylara hakim olmalı. SSR veya static generation gibi yöntemlerle içeriği erişilebilir kılmak, performansı optimize etmek ve düzenli testler yapmak kritik önem taşır. Unutmayın: Botların sitenizi doğru görmesi, sıralamalarda yükselmenin ilk adımıdır.
