Javascript SEO: Dynamic Rendering Nedir ve Test Aşamaları Nelerdir?
Geliştiriciler ve SEO uzmanlarının, JavaScript içeriklerini arama motorları tarafından indekslenirken karşılaştığı çok sayıda sorun vardır. JavaScript’in yaygınlaşması ile birlikte yaşanan sorunların sayısı da artıyor. Bu sorunların çözümü için gerçekleştirilen çalışmalar sayesinde, arama motorları daha iyi sıralamalar sunabilir. Bu durumu avantaja çevirmek için, JavaScript SEO konusuna yakından bakmak gerekiyor.
Organik trafik oluşturmak için zahmetli ve sabır gerektiren çalışmalara hazırlıklı olmak gerekir. Dijital dünyadaki rekabetin artması ve aynı kategoride binlerce web sitenin var olması ile birlikte, sıralamalarda üst sıralarda yer almak eskisi kadar kolay değil. Doğru strateji, sabır, plana sadık kalma, SEO bütçesi ve diğer faktörler, sıralamalarda üst sıralara tırmanmak için ön plana çıkmaktadır. Hem geliştiricilerin hem de SEO uzmanlarının ortak çalışması ile birlikte JavaScript SEO sorunları çözülür. Bu açıdan, bir ekip ruhu ile çalışmak gerekir.
Bu yazı içerisinde JavaScript SEO konusunu detaylı bir şekilde inceleyeceğiz. Yaptığımız derinlemesine açıklamalar ile birlikte birçok konu aklınızda çok daha iyi canlanacaktır. JavaScript SEO’nun ne olduğunu açıklayarak yazımıza başlangıç yapabiliriz.
JavaScript SEO Nedir?
JavaScript SEO terimi, JavaScript ile oluşturulan web sitelerinin sayısının artması ile birlikte yaygınlaşmaya başladı. Arama motorlarının web siteyi taraması, gerekli bilgileri oluşturması ve indekslemesi için sürecin kolaylaştırılması JavaScript SEO’nun önceliğidir.
JavaScript ile oluşturulan web sitelerin fazlalaşması ile birlikte JavaScript SEO da önemli bir hale geldiler. Organik trafiğin artması için üzerinde durulması gereken en önemli faktörlerden biri SEO’dur. SEO çalışmalarını, mevcut algoritmanın talep ettiği noktalara özen göstererek yapmak gerekir.
JavaScript ile oluşturulan web sitelerin sahipleri, SEO açısından hangi konulara önem vermeliler? Bu sorunu cevabını anlamak için konunun ayrıntıları ile birlikte özümsenmesi gerekir. Yazının devamında hem web sitelerin yapması gerekenleri hem de Google’ın yaklaşımını bulabilirsiniz.
Neden JavaScript SEO’ya İhtiyacınız Var?
Tüketicilere ürün olarak içerik sunan web sitelerin, oldukça yalın ve işlevsellik açısından fazla özelliğin aranmaması normaldir. Ancak, müşterilerine ürün satan ya da hizmetlerini uzaktan deneyimleten internet siteleri ise çok sayıda JavaScript odaklı işleve sahip olması gerekiyor. Bu gibi karmaşık ve JavaScript üzerine kurulu web siteleri, dizine ekleme sorunları ile karşı karşıya kalabilmektedir.
Arama motorları tarafından dizine sorunsuz bir şekilde eklenmesi için uygun test prosedürlerinden geçmesi gerekir. Website geliştiricileri ve SEO uzmanları, arama motorlarının beklentilerini karşılaması için çalışmalarını ortak bir şekilde yapması gerekir.
Web sayfası üzerinde yer alan çok sayıda işlev özelliğinden dolayı, arama motorları dizine ekleme sorunları yaşayabilir. Bu açıdan öncelikle, Googlebot’larının JavaScript web siteleri nasıl taradığı ve dizine eklediğini anlamamız gerekir.
Googlebot, JavaScript Web Sitelerini Nasıl İşler?
Yıllar önce, Google web siteleri haftalık olarak dizine ekleyebiliyordu. Şimdilerde ise yayınlanan içerikler anında dizine ekleniyor. Özellikle haber siteleri ve bloglar, hızlı dizine ekleme konusunda bir ihtiyaca sahip.
İçeriğin hızlı bir şekilde tüketildiği sitelerin ihtiyacını artık Google sorunsuz bir şekilde karşılıyor. Ancak JavaScript bazlı karmaşık sitelerin hızlı ve sorunsuz bir şekilde dizine eklenmesi için yardıma ihtiyacı olabiliyor. Sizler de Google’a yardım etmek için JavaScript SEO’ya özen gösterebilir ve organik trafiğinizi artırabilirsiniz.
Google botları, JavaScript siteleri işlerken 3 farklı aşamayı takip eder. Bu aşamalar aşağıda yer almaktadır;
- Tarama
- Oluşturma
- Indeksleme
Tarama, sayfaları ve kaynakları keşfetme
Öncelikli olarak tarama işlemi gerçekleşmektedir. Google’ın mobil indekslemeye öncelik vermesi ile birlikte, Google çoğunlukla akıllı telefon tarayıcısı ile tarama yapmaktadır.
- Bu aşamanın ilk adımı olarak tarayıcı, web sunucunuza GET istekleri gönderir.
- Web sunucusu isteğe karşılık olarak yanıt başlıklarını ve dosya içeriğini vermektedir.
- Devamında da içerik, Google tarafından işlenmek üzere tarama kuyruğuna eklenirler.
Tarama istekleri Mountain View, Amerika’dan gelse de Google botları yerel lokasyonlardan da gelebilir. Eğer ki trafiği coğrafi konuma göre engelleyen bir yönlendirme varsa zararlı olabilir.
Google, web sayfasındaki bütün kaynakları taramak ve dizine eklemek ister. Bunlar; HTML, JavaScript, CSS ve diğer kaynaklar olabilir. Tüm içeriği tarama kuyruğuna alarak oluşturmaya başlar.
İşleme, işleme için HTML ve Kaynakları hazırlama
Tüm kaynakların hazırlanması ile birlikte tarama işlemine geçilir. Burada önemli olan bazı hususlar vardır. Google, web sayfasındaki etiketlere önem verir. Örneğin; web sayfa hazırlanırken noindex yönergesi kullanılabilir ve bu durumda Google indeksleme yapmayabilir.
Oluşturma, Sayfaları kullanıcıların gördüğü şekilde görme
İşlenen web sayfalar, aşağıdaki adımlar eşliğinde oluşturma kuyruğuna yerleştirilir;
- Belge Nesne Modelindeki değişiklikler işlenir.
- Rendering işlemi yapılır.
- Dijital dünyada web sayfası oluşturmak oldukça kolaydır. Bu nedenle kaynakları etkin kullanmak gerekir. Google, bu açıdan kısayollar kullanmak durumundadır. Bu yaklaşım ile birlikte önbellekte olan kaynaklar işlenir.
Google önbelleğe aldıktan sonra web sayfasında yaşanan değişiklik sorun yaşatabilir. Örneğin bankaların zamana dayalı açılır pencereleri olmaktadır. Bu pencerelerin indekslenmesi istenmez. Kullanıcı girişi yapılmadan erişilebilen bir ekran olmayabilir. Bu gibi zamana dayalı ekranlarda dikkatli olmak gerekir.
İçeriği iki dalgada dizine ekleme ve tarama
Google indeksleme sürecini iki dalga halinde yönetmektedir. İlk dalga indekslemede statik HTML eklenir. İkinci dalgada ise JavaScript tarafından meydana getirilen içerik indekslenir.
Google, JavaScript ile hazırlanmış web sayfaları dizine ekleme konusunda büyük mesafe kat etmiş olsa da hala zorlayıcı durumlar olabilir. Bu açıdan Google’a olabildiğince yardımcı olmak gerekir.
JavaScript ile hazırlanan web sayfalar, yeni algoritma ile birlikte daha hızlı ve sağlıklı bir şekilde indeksleniyor. Burada en önemli konu, Google tarafından JavaScript ile oluşturulan içeriğin sorunsuz bir sekilde oluşturulup oluşturulmamasına bağlıdır.
Tarama ve işleme gerçekleşmeden önce alınan kaynaklar önbellekte durmaktadır. Bu nedenle sayfa üzerinde gerçekleşen değişikliklerin dizine eklenmesi zaman alır. Önbelleğe alındıktan sonra sayfa üzerinde değişiklik yapmanızda herhangi bir sakınca yoktur. Ancak işleme alınması bir sonraki bot taramasını bekler.
Oluşturmayı Önleyen Genel Sorunlar
Web sayfaları oluşturulmak ve dizine eklenmek için kuyrukta bekler. Bu bekleyişin ardından, Google çeşitli nedenlerden dolayı sayfayı oluşturamayabilir. Google’ın web sayfasını sağlıklı bir şekilde oluşturmasını engelleyen faktörleri şu şekilde sıralayabiliriz;
- Oluşturmada önem arz eden .js kaynaklarına engel olan çeşitli robot yönergeler, Google’ın web sayfasını sağlıklı bir şekilde taramasına ve içeriğin oluşturmasına mani olabilir.
- Google’ın oluşturmada pes ettiği zamanlar da vardır. Örneğin; sayfanın yüklenmemesi gibi sorunlar zaman aşımı yaratabilir. Bu gibi durumlarda da Google daha fazla taramaya ve oluşturmaya zaman harcamaz. Kısacası pes eder.
- Bağlantı sorunuyla yaşanan kodun yürütülememesi sorunları meydana gelebilir. Ayrıca, JavaScript’in HTTP hatalarını döndürememesi de ayrı yaşanan olumsuz bir süreçtir.
- Tembel yükleme görüntüleri ve içeriğin kalan kısmı önbelleğe alınan oluşturma kuyruğunda bulunmayabilir.
- Statik bağlantılar kullanmadığınız takdirde, Google, JavaScript aracılığı ile oluşturulan köprülere tıklamayacak ve tarayamayacaktır.
Google, yukarıda yer alan nedenlerden dolayı web sayfaları dizine ekleyemeyebilir ya da beklenenden çok daha farklı bir şekilde dizine ekleyebilir. Her iki durum da kesinlikle istenmeyen durumlardır.
JavaScript Rendering Yöntemleri
Google’ın JavaScript içerikleri başarılı bir şekilde işlemesi sonucunda, dizine sorunsuz bir şekilde eklenmesi sağlanmış olur. Bunu gerçekleştirmek için web site geliştiricileri ve SEO uzmanları birlikte çalışmalıdır. Birlikte çalışarak, web sayfasının temiz ve efektif bir şekilde oluşturulması sağlanabilir.
Gayet temiz ve SEO dostu rendering görevi hem SEO uzmanlara hem de web geliştiricilere aittir. Oluşturma aşaması en önemli aşamalardan biridir. Sizin gördüğünüz içerik ile Google tarafından oluşturulan ve ziyaretçilere sunulan içeriğin aynı olduğunu zannediyor olabilirsiniz. Bazı durumlarda, farklı oluşturmalardan kaynaklı sorunlar çıkabilmektedir.
Genel Rendering Yöntemleri
JavaScript rendering yöntemlerine bakıldığında aşağıda yer alanlar en yaygın olanlarıdır.
- Ön işleme
- İstemci tarafı rendering
- Sunucu tarafı rendering
- Dinamik rendering
- Hibrit işleme
- İzomorfik JavaScript
Aşağıda, 3 ana rendering yöntemi hakkında detaylı bilgiye ulaşabilirsiniz. Bunlar; istemci tarafı rendering, sunucu tarafı rendering ve dinamik rendering olarak karşımıza çıkıyor.
İstemci Tarafı Rendering (CSR)
CSR olarak kısaltılan ve istemci tarafı oluşturma (istemci tarafı rendering) olarak karşımıza çıkan yöntemde, Google botları, JavaScript ile oluşturulan içeriği, oluşturma için DOM’yi kullanmaktadır. Burada, HTML üzerinden içerik yüklemek değil de tarayıcı yeteneğine dayanan oluşturma yani rendering hedeflenmektedir.
SEO tarafında yaşanan en büyük sorunlardan biri, Google botunun tutarsız bir şekilde web sayfasını oluşturmasıdır. Başarılı da oluşturabilir, tutarsız da oluşturabilir. Hatta bazı durumlarda hiç oluşturamaz. Karşınıza boş bir HTML sayfası çıkabilir. Bu gibi durumlarda geliştiriciler konu üzerinde çalışması gerekmektedir. Bunun için, aşağıda yer alan araçlar çok sık kullanılmaktadır.
- Mobil uyumluluk testi: Google tarafından sunulan ücretsiz bir araçtır. https://search.google.com/test/mobile-friendly adresi üzerinden mobil uyumluluk testini gerçekleştirebilirsiniz.
- URL İnceleme aracı: Aşağıda yer alan sayfa üzerinden URL inceleme aracına ulaşabilirsiniz. Açılan sayfada “Open URL Inspection Tool” butonuna tıklayın ve ilgili web sayfanın incelemesini gerçekleştirin.
(https://support.google.com/webmasters/answer/9012289?hl=en)
- İşlenen kaynağı görüntüle: Bu araca aşağıdaki link üzerinden ulaşabilirsiniz. Aslında Chrome Web Store üzerinden paylaşılan bir extension’dır.
Sunucu Tarafı Rendering (SSR)
Geliştiriciler için görece en karmaşık rendering yöntemlerinden biri sunucu tarafı rendering yani SSR’dir. Bu yöntem sayesinde, JavaScript ile oluşturulan sayfa, sunucu tarafından istemciye iletilir.
Google aynı şekilde sayfayı tarasa da, oluşturma aşaması sunucuda yapıldığı için, direkt olarak dizine eklenir. JavaScript ile oluşturulan sayfa, HTML sayfa muamelesi gördüğünden dolayı, JavaScript’in yaşadığı bazı sorunlardan kurtulmuş olunuyor.
Eğer ki SSR yöntemini tercih ederseniz, aşağıda yer alan oluşturma araçlarını kullanabilirsiniz.
- React için Gatsby (https://www.gatsbyjs.com) veya Next.JS (https://nextjs.org )
- Angular Universal: https://angular.io/guide/universal
- js için Nuxt.js (https://nuxtjs.org )
Dynamic Rendering
Geliştirici tarafının ve SEO uzmanlarının dinamik rendering yöntemini tercih etmesi birçok sebepten dolayı uygun olabilir. Google ile web sayfasının statik bir sürümü sunulur. Dinamik sürüm olarak ise diğer kullanıcı istemsicileri üzerinden sunulur.
İçeriği tüketen kullanıcılara göre karma bir çözüm sunması açısından önemli bir yöntemdir. Google botları gibi tüm botlar ve tarayıcılar için statik HTML sunulmuş olur. Bunun yanı sıra gerçek ziyaretçiler için ise JavaScript sürüm sunulur. İki tarafı da mutlu eden bir yaklaşımdır.
Bu yöntem sayesinde, botlar sadece web sayfasının makine öğrenimi ile okunabilmesi için tasarlanan sürümünü alır. Tarayıcılar sayfaları çok daha kolay bir şekilde ayrıştırabilir. Gerçek ziyaretçiler ise ilgili web sayfanın JavaScript sürümünü tüketirler. Bu sayede, gerçek kullanıcılar, tasarlanan ve geliştirilen tüm etkileşim özelliklerini sorunsuz bir şekilde kullanır. Bu da kullanıcı deneyimini artıran bir durumdur.
Önceden oluşturma testlerinizi toplama
Dinamik rendering yöntemi ile sağlanan ön oluşturma sizin için biraz karmaşık olabilir. Özellikle de Google bot nasıl tarayacağını ve ne göreceğini bilemez ve nasıl test edeceğinizi anlamayacağınız için.
Devs ve SEO arasındaki sağlıklı iletişimi sağlamak için prerender.io kullanabilirsiniz.
Oluşturulmuş olan web sayfasının Google botları tarafından nasıl yorumlandığını merak ediyorsanız, Mobil Uyumluluk Test aracını kullanabilirsiniz. Ücretsiz olarak sunulan araç, Googlebot mobil telefon tarayıcısı ile birlikte sayfayı tarar. Bu sayede, önceden oluşturulmuş sürümü görebilirsiniz.
Önceden oluşturmayı daha geniş bir perspektifte görmek isterseniz, Screaming Frog SEO Spider’ı kullanabilirsiniz. https://www.screamingfrog.co.uk/seo-spider/ adres üzerinden ulaşabilirsiniz. Bu araç ile birlikte birçok konuda fayda sağlayacaksınız. Bu arada, JavaScript ile Rendering yapılmasını önlemek için Spider’ın gerekli yapılandırmasını aktif hale getirin.
Dynamic Rendering Sorun Teşkil Eder Mi?
Web geliştiriciler ve SEO uzmanları, Google’a sunulan içerik ile gerçek kullanıcıya sunulan içerik arasındaki farkın bir sorun teşkil edip etmeyeceğini merak ediyor. Temel bir yaklaşım ile birlikte, Google’a sunulan içerik ile gerçek kullanıcıya sunulan içerik arasında bir fark olduğu takdirde çeşitli cezalar verilebilir. Burada Google’dan bir şeyleri gizlediğiniz düşünülebilir. Bunun yanı sıra, web sayfasının yeniden oluşturulan sürümü ile istemcilere sunulan sürüm arasında farklı bir içerik olmadığı takdirde, dinamik rendering yöntemine Google izin verir ve önermektedir.
Dinamik rendering yönteminin fazlasıyla düşük riskte bir yöntem olduğunu unutmayın. Google tarafından oluşturulan açıklayıcı belgeler sayesinde, dinamik rendering yönteminin nasıl ayarlanması gerektiğini takip edebilirsiniz.
Uzman SEO ekibinden profesyonel bir hizmet mi almak istiyorsunuz? Soft Ajans tarafından sunulan SEO hizmeti sayesinde, uzun vadede organik trafiğinizi artırabilir ve ücretli reklam maliyetlerinizi azaltabilirsiniz. Hizmet detayları hakkında bilgi almak için, Soft Ajans iletişim sayfası üzerinde yer alan kontak bilgilerinden bize ulaşabilirsiniz.
