Angular, özellikle bir web sitesinde veya uygulamada dinamik etkileşim geliştirmek için kullanılan bir JavaScript çerçevesidir. Başlangıçta bir Google projesiydi, ancak şu anda çok popüler bir çerçevedir. Angular iyi bir kullanıcı deneyimi sunsa da, bu çözümün SEO bakış açısından engellenebileceği unutulmamalıdır.

Google bir Angular alt yapılı siteyi nasıl yorumlar?

Google, kılavuzlarında “JavaScript’in işlenmesinin şu anda zor olduğunu ve tüm arama motoru tarayıcılarının bunu doğru veya hemen işleyemediğini” belirtmektedir. Ama Angular bir framework… JavaScript!

JavaScript devre dışı bırakıldığında Angular kullanan bir site nasıl görünür; sayfanın hiçbir öğesi görüntülenemez:

JavaScript devre dışı bırakılmış bir Angular sitesinin görüntülenmesi (kullanılan araç: Web Developer)

Çoğu durumda, Google bir Angular sitesini incelediğinde gördüğü tek şey boş bir kabuktur: içerik yok, bağlantı yok, SEO etiketleri yok, vb. Dolayısıyla iyi referans alma şansı çok düşüktür!

CSR’nin (Client-Side Rendering) arama motorları ve SEO üzerindeki etkisi:

Bir arama motorunun Angular sitelerini anlayabilmesi için JavaScript’in nasıl yürütüleceğini bilmesi gerekir. Ancak, birçok arama motoru JavaScript’i çalıştıramaz; imkansız olmasa da doğal olarak karmaşıktır:

Varsayılan olarak, bir Angular sitesi, kullanıcı onlarla etkileşime girdikçe Belge Nesne Modelindeki (DOM) sayfaları oluşturan İstemci Tarafı Oluşturma (CSR) özelliğini kullanır. Hatırlatmak gerekirse, DOM bir web sayfasının HTML’sini temsil eden ve bu web sayfasının öğelerine JavaScript dili kullanılarak erişilmesini ve değiştirilmesini sağlayan bir programlama arayüzüdür.

Tarayıcılar, yüksek etkileşimli bir Angular sayfasının içeriğini veya yapısını anlayamaz.

İstemci Tarafı Oluşturma, tarayıcının sitenizin HTML içeriğini oluşturmak için JavaScript’i yorumlamasına izin vermeyi içerir. Yani tarayıcı sunucuya bir istekte bulunduğunda, HTML belgesinin tüm içeriğini almak yerine, tarayıcının sitenin geri kalanını oluşturmasını sağlayacak bir JavaScript dosyası ile birlikte basit bir HTML belgesi alırsınız. Başka bir deyişle, sitede tüm içeriği oluşturacak ve sayfayı onunla “giydirecek” bir komut dosyasından başka bir şey yoktur (sayfa bir bakıma boş bir HTML kabuğudur).

CSR (Client-Side Rendering) bu şekilde çalışır:

Sonuç olarak, arama motorları Angular sitelerinde bulunan herhangi bir içeriği indekslemekte zorluk çeker. SEO optimizasyonu hedefinizse, bu işleme yönteminden kaçınmak en iyisidir. JavaScript kaynakları çoğu durumda indeksleme robotları tarafından göz ardı edildiğinden (işlenmeleri/çalıştırılmaları çok uzun sürdüğü için), CSR SEO açısından bir engel olabilir. Bununla birlikte, Google’ın tarayıcılarının artık JavaScript çerçeveleriyle tasarlanmış uygulamaları / siteleri yorumlayabildiği unutulmamalıdır. Bununla birlikte, bu henüz optimal değildir; sonuç, ziyaretçilere sunulan site ile robota sunulan site arasında bir uyumsuzluk olabilir ve bu da zararlı olabilir.

Standart istemci tarafı görüntülemeye sahip bir Angular sitesi tercih edildiğinde, Bing, Yahoo, DuckDuckGo ve Yandex arama motorları URL’leri dizine eklemeyecektir. Sadece boş HTML sayfaları göreceklerdir, çünkü botları dinamik içeriğin nasıl yürütüleceğini bilmemektedir; sosyal ağ botları da bunu bilmemektedir.

Google’da Angular ve SEO konumlandırması:

Projeniz için önemli olan tek arama motoru Google ise, dinamik sayfalarınızın dizine eklenme ihtimali yüksektir. Ancak bunun garantisi yoktur. Google Search Central belgeleri, JavaScript ile oluşturulmuş içeriğinizin doğru ve hızlı bir şekilde dizine eklenmemesinin çeşitli nedenlerini listeler:

Googlebot’un renderer kuyruğunun neden olduğu dinamik içeriğin indekslenmesindeki gecikmeler.
Özellikle sayfadaki eylemler tarafından tetikleniyorsa JavaScript kodunuzun yavaş veya gecikmeli yüklenmesi.
Yürütülmesi pahalı olan ve Googlebot’un işleme bütçesini aşan karmaşık JavaScript kodu.
İşlem sırasında içeriğinizin belirli bölümlerinin dizine ulaşmadığı anlamına gelen oluşturma hataları.
Bir hatırlatma olarak, Google’ın URL’leri SERP’lerde konumlandırma sürecini burada bulabilirsiniz:

Google’ın Angular’ı taramasına/keşfetmesine yardımcı olmanın yolları :

Sitenizin dizine eklenmesini ve sıralanmasını sağlamanın tek bir yolu vardır: sitedeki her URL, yüklenir yüklenmez meta veriler ve içerikle birlikte tamamen işlenmiş bir HTML sayfası döndürmelidir.

Bu hedefe ulaşmak için 3 yöntem vardır:

Sunucu Tarafı İşleme (= SSR)
Ön render (= Ön Render)
Dinamik Rendering

Bu üç yöntem istenen sonucu verir: tarayıcılar yüklendiğinde tüm içeriği alır (statik HTML içeriği) ve normal bir HTML sayfası gibi dizine ekler. Ancak bu yöntemler farklı şekillerde çalışır:

SSR / Sunucu Tarafı İşleme: her HTML sayfası çalışma zamanında sunucuda işlenir ve ardından istemciye (tarayıcıya) tam olarak işlenir. Bu, sayfa yüklenmeden önce sunucunun HTML’yi talep üzerine oluşturması ve tarayıcıya göndermesi için biraz zaman geçmesi anlamına gelir. Bu yöntem, özellikle aynı anda çok sayıda istek yapılıyorsa, sayfanın yüklenme hızını potansiyel olarak azaltabilir.

Ön Oluşturma: Oluşturma zamanında her URL için bir HTML dosyası oluşturulur. Bu, sitedeki tüm HTML dosyalarının önceden oluşturulduğu ve böylece sayfaların talep üzerine hızlı bir şekilde yüklenmeye hazır olduğu anlamına gelir. Dezavantajı, bu sayfalarda yapılan herhangi bir değişikliğin her seferinde yeniden oluşturulmasını gerektirmesidir.
Dinamik Render: Site önceden render edilmiş HTML sayfalarına sahiptir ve bunları yalnızca tarayıcılara sunar. Gerçek kullanıcılar ise sitenin normal istemci tarafında işlenmiş sürümüyle etkileşime girer.

Evet, Angular SEO dostu olabilir:

Her JavaScript çerçevesi, SEO engellerini kaldırmak için yukarıdaki yöntemlerden birini uygulamak için kendi araçlarına ve araçlarına sahiptir. Angular, Angular Universal adı verilen eksiksiz bir SSR (Sunucu Tarafı Oluşturma) ve Ön Oluşturma çözümü sağlar.

Angular Universal, tek bir sitede hem sunucu tarafı hem de istemci tarafı oluşturmaya izin veren bir çözümdür. Tüm URL’ler için HTML sayfalarını önceden alır. Bu sayfalar arama motoru örümceklerine sunulur ve içerik sorunsuz bir şekilde taranır. Gerçek kullanıcılar için Angular Universal, site kodunu statik HTML ile istemci tarafında işlenmiş olarak gönderir. Sayfanın ilk içeriği statik HTML kodundan yüklenir ve ardından site sayfanın kontrolünü ele alarak istemci tarafında etkileşimli bir kullanıcı deneyimi sağlar.

Sitenizde Angular Universal kullanmak için nedenler:

Angular sitenizi SEO dostu hale getirmek için Universal’ı başlangıçtan itibaren veya mevcut bir siteye kademeli olarak uygulayabilirsiniz. Angular Universal, indeksleme için meta etiketler (başlık, meta açıklama vb.) ve URL’lerle bağlantılı tüm sorunları çözer ve hızlı sayfa yükleme sürelerini garanti eder. Angular, 5. sürümden bu yana Sunucu Tarafı Oluşturmayı (SSR) desteklemektedir. SSR, kullanıcının tarayıcısına göndermeden önce sayfanın tüm yapısını sunucuya devretme işlemidir. Angular Universal çözümü, en son web teknolojilerinden yararlanmanızı ve doğal referanslama üzerinde çalışmanızı sağlar.

Teknik açıdan Angular Universal, kullanıcı tarafından talep edilen statik sayfaları oluşturmak için NodeJS ve Express yapısını temel alır. Bu çözümü kullanarak, Angular Universal Bundle’dan yararlanabilir ve tek bir sitede istemci tarafı ve sunucu tarafı oluşturmadan faydalanabilirsiniz.

Paket şu şekilde çalışır:

Angular Universal, sayfa ilk yüklendiğinde sunmak için sitenin HTML sayfalarını önceden alır.
Daha sonra sitenin istemci tarafında işlenen kodunu, ilk statik HTML’nin yerini alması için tarayıcıya gönderir.
Değiştirme işlemi tamamlandığında, site istemci tarafı oluşturma modunda çalışmaya devam eder.
Angular Universal Bundle ile teknik SEO gereksinimlerini karşılayabilir ve daha iyi bir kullanıcı deneyimi sağlayabilirsiniz:

Tarayıcılar ve botlar, dizine eklenebilir URL’lere karşılık gelen ilk statik HTML sayfalarını işler = içerik bu nedenle taranabilir,
Site içeriği, kullanıcılar boş tarayıcı ekranlarına/pencerelerine bakmak zorunda kalmadan birkaç milisaniye içinde yüklenir (tarayıcının yalnızca HTML’yi okuması ve JavaScript’i oluşturmak için yorumlamaması gerekir; JavaScript’i yürütmeyen veya zayıf bir şekilde yürüten cihazlara yüklenen tarayıcılar için veya kullanıcıların JavaScript kodunun yürütülmesini engellemek istediği durumlarda bir avantajdır,
Kullanıcılar sayfalarla etkileşime geçmeye başladıklarında sorunsuz bir dinamik sayfa deneyiminden yararlanırlar = gelişmiş sayfa yükleme hızı.

SSR (Server-Side Rendering) bu şekilde çalışır:

SEO dostu bir site yapısı sağlamak:

Bir Angular sitesini SEO dostu yapmak için göz önünde bulundurulması gereken bir diğer husus, tüm sayfaların kullanıcı ve arama motoru dostu bir URL’ye sahip olmasını sağlamaktır. Bu, URL’lerde hash (” # ” ) kullanımından kaçınılması gerektiği anlamına gelir, çünkü bir URL’de # işaretini takip eden hiçbir şey Google tarafından takip edilmez:

John MUELLER, Google Web Yöneticisi Trendleri Analisti: “Google hash’ten sonra gelen her şeyi yok sayıyor” (kaynak)
Arama motoru dostu URL’ler oluşturmak için HashLocationStrategy (myurl.com/#/article/breaking-news) yerine PathLocationStrategy (myurl.com/article/breaking-news) kullanılmalıdır.

Tek tip bir URL yapısını benimsedikten sonra, tüm URL’leri merkezileştirecek bir XML site haritası oluşturmanız gerekecektir. Oluşturulduktan sonra, Google’ın tüm URL’leri daha kolay keşfedebilmesi için bu harita Google Search Console’a gönderilmelidir:

Google Search Console’da bir sitemap.xml bildirme/gönderme
Aynı zamanda robots.txt dosyasına XML site haritasının yolu girilmelidir:

Robots.txt dosyasındaki sitemap.xml’nin yolunu girin
URL isimlendirmesi ayarlandıktan sonra, her URL için SEO sistemini optimize edin; her URL’nin :

benzersiz ve optimize edilmiş: maksimum 600 piksel (= maksimum 50 ila 60 karakter arasında)
tamamlanmış ve benzersiz: maksimum 920 piksel (= maksimum 120 ila 160 karakter arasında)

…

doldurulmuş ve benzersiz
completed: self-canonical (sayfa kendini hedefler)
tamamlandı (sitede birden fazla dil sürümü varsa)
SEO optimizasyonlarının kabulü ve izlenmesi:
Googlebot’un URL’leri tararken nasıl “gördüğünü” görmek için Google Search Console’daki “URL Denetimi” işlevini kullanın (sayfanın kaynak kodu Googlebot’un gördüğü şekilde görüntülenir):

Google Search Console’da URL inceleme aracı
Sonuç:
Evet, Angular yukarıdaki yöntemlerden birini izleyerek ve SEO kurallarını uygulayarak SEO’ya uygun olabilir. Bir konuda hatırlatmak isteriz, her JavaScript çerçevesinin kendi araçları ve kaynakları vardır ve Angular Universal hem SSR (Server-Side Rendering) hem de Pre-Rendering yapmanıza izin verir. Optimizasyon aşamaları sırasında, Google’ın siteyi oluşturan sayfaları nasıl gördüğünü ve yorumladığını Google Search Console’da test etmeniz ve izlemeniz önerilir.

Angular: Framework Nasıl SEO’ya Uygun Hale Getirilir? yazısı ilk önce Profesyonel SEO ve E-ticaret Uzmanı – Yemliha TOKER üzerinde ortaya çıktı.