Angular JS İçin SEO Rehberi

Angular JS Nedir?

21. yüzyıl orta düzeyde teknoloji çağı olarak da düşünülebilir. Web servislerindeki gelişmeler yeni yazılım dillerinin ortaya çıkmasına öncülük etti. Angular da web servisleri ve web uygulamaları çıkan bu yeni yazılım dillerinden biri olarak gruplandırılıyor. Temel olarak Angular TypeScript’te şekillendirilen bir geliştirme platformudur. JavaScript ve Angular oldukça benzer teknolojilerden oluşmakta. Buna ek Anguların odaklandığı şey: bileşenlerle birlikte web uygulamalarının ölçümlenebilir içerik üretmesine yarar, istemci iletişimindeki özellikleri zenginleştiren ve test etmeyi, kod güncelleme statülerini yazılımcılar için kolaylaştıran iyi şekilde entegre olmuş kütüphaneleri bir araya getirmiştir.

“Ya serbest çalışan bir yazılımcı olun ya da belirli bir tarihte doğacak büyük bir girişimin uygulamasını kodlayın… Angular 1.7 milyon geliştiriciyi ürettiklerini sunmaları için bünyesinde barındırır.”

Angular JS SEO Nasıl Yapılır?

Angular SEO bu teknolojinin bir parçasıdır. Arama motorlarının botları JS kodlarıyla nasıl çalışır konusuna daha önce de değinmiştik, şimdi Angular kodlarını ele alacağız. Angular web uygulamaları kolaylıkla kendini öne çıkarabilir mi kapıdan geçebiliyor mu, arama sonuçları arasında sıralamayı yükseltebilir mi? Angular ile kodlanmış bir içeriği arama sayfalarında indekslemek kolay mıdır?

Angular doğası gereği istemci yönlü ayıklamayla çalışır. Bunun anlamı uygulamanızın ilk başlatıldığı an botların boş sayfadan oluşan bir HTML koduyla karşılaşmasıdır. SEO dünyası uygulamalara düzgün şekilde indekslenmiş mi diye göz atar. Eğer yazılımcı herhangi bir sorun fark ederse bunu SEO’ ya uyumlu hale getirip hatayı gidermelidir. Hata URL’ de, başlıklarda, meta taglerde olabilir. Konuyu derinlemesine ele almak ve SEO ile Angular’ı işbirliği yapar konuma getirmek verimi arttırır.

Yukarıda belirtildiği gibi Angular uygulaması istemci yönlü ayıklama yapar. Botlar bir insanın algıladığı şekilde site içeriğini algılayamaz, ama bu uygulamaların arka dünyası botların algoritmalarına bağlı çalışmalıdır. Bağlı veya odaklı… Ön taraftaki kullanıcı içeriğin ne olduğunu kolaylıkla anlar, Angular’ın kişiselleştirilmiş deneyim sunabilmesi kullanıcılar tarafından sevilen bir konudur. Bu etkileşim kullanıcı ve uygulama arasında tetiklendiği zaman, sayfalar belge nesne modelinde ayıklanmaya başlar. Ancak diğer tarafta botlar kullanıcıya web uygulamasını ulaştırmakta anahtar role sahiptir, bu sebeple Angular ile kodlanmış web uygulamaları ve botlar arasında sağlıklı bir etkileşim kurulması için bazı ayarlamalar yapılmalıdır.

İlk olarak Angular Universal kütüphanesini SSR (server-side rendering) sunucu yönlü ayıklama yapılabilir ancak bu pahalı bir yöntemdir. Bunun sebebi hem zaman hem de diğer maliyetler açısından, implementasyonu zaman alan bir süreçtir. Süreç istemci yönlü ayıklama sebebiyle biraz karmaşık işler. Sunucu yönlü ayıklamayı istemciye implemente etmek kodun içerisinde bazı yinelemelere sebep verebilir. Bu da kodların birbiriyle çakışmasına sebep olur. 

Ayıklama 2 farklı süreç ve türü içerir. Bu hem dinamik hem de statik olabilir ve süreç indeksleme ve botların çalışmasıdır. İndeksleme süreci metinlerin, linklerin taranmasıyla başlar.

Botlar sorgulama ve sayfalar arasındaki ilişkiyi fark ettiğinde sitenin indekslenmesine izin verir. Bu arama sonuçlarındaki sıralamayı doğrudan etkiler. Şimdi dinamik ayıklama hakkında konuşalım. Statik HTML kodlarını dinamik JavaScript koduna dönüştürmek gerçek hikayedir. Böylece ziyaretçiler zamanını keyifli şekilde geçirdikleri deneyimden hoşnut kalırlar çünkü site dinamizmi ön tarafta kullanıcıya göre şekil almaktadır. Kullanıcı ne kadar beğenirse o kadar çok trafik gelir. Google başta olmak üzere bütün arama motorları trafik bakımından zengindir.

Angular’ın birincil motivasyonu JavaScript kodlarından oluşan web sitelerini ölçümleyebilmektir. Her bir JS kodu kendi karakteristik yapısına sahiptir ancak yazılımcı bu kodları arama motoru optimizasyonuna uygun derlemelidir. HTML sizin sunucunuzdan gönderilir ve sayfalarda interaktif şekilde hareket eder.

SPA (single page application) kullanıcılar için yönlendirici bir web uygulamasıdır, daha yoğun ve duyarlıdır. Profesyoneller sıklıkla bunun SPI (single-page interface) olduğunu ifade ederler. Çünkü arayüzde kullanıcılar aradıkları şeye en yakın sonucu görürler. Daha iyi yanıt verme süresi ve basit implementasyonlar için düzenlemeler yapılabilir. Angular SPA’ de bir çözüm olarak seçilebilir, aynı zamanda bunu çözmekte birçok yol vardır.

SPA, API entegrasyonları ile sayfayı çağırır. Angular tamamıyla JavaScript kodlarına bağlıdır. Sayfalardaki meta datayı dinamik bir şekilde destekler. Ancak botlar bu meta datayı ayıklamakta zorlanır ve hata yapar. Web sitelerinin dünyasında HTML bütün kodları bünyesinde tutar. Bunun aksine SPA sayfayı basit yapıda tutmayı tercih eder. Angular SPA’yi SEO dostu dinamik ayıklamaya dönüştürüp böyle çalıştırmak gerekir. Bunun yanında başlıkları ve meta dataları ulaşılabilir, okunabilir şekilde ayarlamak bir zorunluluk olur.

Zorluklara rağmen, Angular SEO profesyoneller arasında tercih edilen bir türdür. Yazılımcılar konu hakkında yeterli deneyime sahipse ve yeni teknolojileri takip ediyorsa sitenizi Angular ile hava kaldırmanız kolay olacaktır. 

Yazılım dilleri ve arama motorları sahne arkasına bir diyalog halindedir. Aynı dili konuşmazlarsa birbirlerini anlayamazlar, arama motorlarını bir şirketin CEO’su olarak düşünebilirsiniz. Onunla buluşabilmek için önce sekreterleri veya ilgili departmanlarıyla iletişime geçmeniz gerekir. İşte bu departmanlar botlardır. Yani kodu botlar okursa en tepedeki de ikna olur ve sizi de tepeyle buluşturur. Hikaye açıklık ve netlik ile alakalıdır.

Yeni teknolojiler her zaman oluşacaktır, hepimizin bildiği gibi dönem teknoloji çağı. Yeniliklere adapte olmak, trendleri yakalamak belki zorlayıcı olabilir. CoreSEO olarak sizinle bu zorlukları aşmaya hazırız. Bizimle iletişime geçebilirsiniz, SEO profesyonellerimiz en kısa sürede size dönecektir.