Rendertron ile Angular SEO'nun Gücünü Keşfedin

İçindekiler

• Giriş
• Render Tron Nedir ve Nasıl Çalışır?
• Angular Uygulamasında SEO Dostu Meta Etiketleri Oluşturma
• Firebase Veritabanından Veri Alarak Meta Etiketleri Oluşturma
• Render Tron'un Kendi Örneğini Dağıtma
• Firebase Cloud Functions ile Bot ve İnsan Ayırt Etme
• Angular Uygulamanı SEO İçin Optimize Etme

Giriş

Bu makalede, Angular 5 kullanarak bir ilerici web uygulamasının SEO dostu hale getirilmesi konusunu ele alacağım. Bu amaçla, Angularfire veya başka herhangi bir asenkron veri kaynağıyla uyumlu hale getirilecek ve aynı zamanda Googlebot ve Bing bot gibi arama motoru tarayıcıları tarafından okunabilir hale getirilecek. Bunları yaparken, Angular Universal kullanmadan sadece Google Chrome ekibi tarafından sunulan Render Tron adlı yeni bir kütüphaneyi kullanacağız. Bu makalede, Render Tron'un nasıl kullanılacağını, Angular 5 ve Firebase Cloud Functions ile nasıl entegre edileceğini adım adım göstereceğim. Tamamen çalışan bir demo, Firebase Hosting'e dağıtılmış durumda ve kaynak kodu da Angular Firebase websitesinde paylaşılıyor. Hazırsanız, sistemin nasıl çalıştığına daha yakından bakalım.

🚀 Render Tron Nedir ve Nasıl Çalışır?

Render Tron, Angular ilerici web uygulamanızı sunucu üzerinde çalışan bir Chrome tarayıcısı gibi render eder ve ardından bu verileri sayfayı okumak isteyen bir tarayıcıya geri gönderir. Bu sayede meta etiketlerini veya sayfaya asenkron olarak yüklenen verileri okuyabilecek herhangi bir bot tarafından okunabilir hale getirilebilirsiniz. Örneğin, bir ziyaretçinin bir bağlantıyı paylaşması durumunda, Facebook botu, bir önizleme göstermek için sitenizi taramak isteyecektir. Cloud Functions işlevi, isteği önce Render Tron'a yönlendirecek, ardından tamamen render edilmiş bir sayfa ile Facebook botuna yanıt verecektir. Bu, meta etiketlerini dinamik olarak oluşturmanıza veya verileri asenkron olarak yüklemenize olanak tanır ve herhangi bir tarayıcı botu tarafından okunabilir hale getirilir. Normal bir insan ziyaretçi siteye geldiğinde, Render Tron'u atlayacak ve doğrudan Angular uygulamasını sunacaktır. Eğer kullanıcı uygulamanızdaki bir bağlantıyı sosyal medyada paylaşırsa, ilgili sayfaya ait meta etiketleri gösterilecektir. Google Chrome ekibi, kendi çalışan bir Render Tron örneğine sahip ancak bu, üretimde kullanım için önerilmez. Kendi örneğinizi App Engine'e nasıl dağıtacağınızı göstereceğim, eğer üretimde kullanmak isterseniz bu konuda size yol gösterecektir.

Render Tron'un Kurulum ve Dağıtılmasına Nasıl Giriş Yapılır?

Render Tron'u kullanma öncesi, öncelikle Render Tron projesini klonlamanız gerekmektedir. Ardından proje ana dizinine girerek Docker imajını oluşturmanız gerekmektedir. İmaj oluşturma işlemi birkaç dakika sürebilir ve tamamlandığında yerel olarak çalıştırabilirsiniz. Bu adıma ihtiyaç duymadan, kendi Render Tron örneğinizi üretimde kullanmak isterseniz, resmi yönergeleri takip edebilirsiniz. Render Tron'un yapılandırma dosyasına giderek CPU ve bellek ayarlarını yapmalısınız. Google bulut platformu komut satırı araçları yüklü ise g-cloud app deploy komutunu kullanarak App Engine'e dağıtabilirsiniz. İyi haber şu ki ilerici web uygulamanız artık arama motorları için optimize hale getirildi ve link botları tarafından kullanılabilir oldu ve bu süreçte Angular uygulamanıza herhangi bir zarar vermediniz. Her şey oldukça yeni sayılabilir, bu yüzden çalışan demo uygulamayı kullanmanızı öneririm. Herhangi bir sorunuz varsa Slack üzerinden bana ulaşabilirsiniz.

🔍 Angular Uygulamasında SEO Dostu Meta Etiketleri Oluşturma

Angular uygulamanızın her bir bileşeni için SEO dostu meta etiketlerini dinamik olarak oluşturmak istiyoruz. Bunun için Angular'dan meta etiketlerini dinamik olarak belirleyebilmemiz için bir SEO servisi oluşturmalıyız. İlk olarak, Angular'dan Meta servisini içe aktarmamız gerekmektedir. Bu servis, belgenin başlığında meta etiketlerini dinamik olarak ayarlamamızı sağlar. Daha sonra, yapılandırma nesnesini çağırmak için bu servisi içe aktaracağız. Bu yapılandırma nesnesi, kendi yapılandırma nesnenizle değiştirilebilen adlandırılmış argümanları alır. Bu yöntemin amacı, her bir bileşen için meta etiketlerini defalarca tekrarlamamaktır. Servisimizden bu etiketleri belirleyebiliriz. Her bir bileşen yüklendiğinde, bu etiketleri en güncel haline getirecektir. Servisimizi kullanarak bileşenimize meta etiketlerini dinamik olarak atayabiliriz. Bu şekilde, rotaya yüklenen her bileşen için meta etiketlerini dinamik olarak ayarlamış oluruz. Bu işlemin çalıştığından emin olmak için uygulamanızı açtığınızda ve belgenin başına gelip düzenlediğinizde, her bir rotaya geçtiğinizde meta etiketlerinin değiştiğini görmelisiniz. Bu oldukça cool!

🌍 Firebase Veritabanından Veri Alarak Meta Etiketleri Oluşturma

Veritabanından gelen verilere göre meta etiketlerini dinamik olarak oluşturmak istiyoruz. Bunu yapabilmek için Firebase veritabanını ve Firebase CLI aracını kullanmalıyız. Firebase hesabınız varsa ve AngularFire'ı da kurduysanız, ana kimlik doğrulama deposundaki resmi yönergeleri izleyebilirsiniz. Firebase veritabanını ve AngularFire veritabanını içe aktardıktan sonra, bir RxJS gözlemci oluşturmalıyız. Bunu, açık kaynaklı Node.js paketi olan RxJS'i kullanarak yapabiliriz. Reactive Extensions (RxJS) kontrol etmek için take operatörünü de içe aktarmalıyız. Referansımıza erişmek ve veriyi almak için SEO servisini ve AngularFire veritabanını inşa sınıfında da enjekte etmeliyiz. Referansı almak için DB.objectı çağırmalı ve değeri RxJS gözlemcisi olarak almalıyız. Bir gözlemci abonesi içerisinde aldığımız veriyi SEO servisimizle kullanarak meta etiketlerini ayarlayacağız. Firestore yerine veritabanını kullanabilirsiniz. İyi haber şu ki artık React uygulamanız tamamen SEO dostu hale geldi ve asenkron olarak yüklenen verilerle birlikte tüm meta etiketleri herhangi bir tarayıcı botu tarafından okunabilir durumda artık.