Vue Uygulamalarımızı SEO Dostu Yapmak
Vue.js uygulamalarımızı SEO dostu yaparak Google sıralamasını nasıl iyileştirebiliriz? Hadi başlayalım.
Bir araştırmaya göre kötü SEO kaynakları ve JavaScript kullanımı nedeniyle websitelerin %56’sı sıralamasını kaybediyor. Ürünlerinizde bu tür felaketleri önlemek için Vue uygulamanızı SEO dostu hale getirmeniz gerekiyor. Bunu yapabilmek için öncelikle Vue içerisindeki farklı sorunları ve bunları nasıl çözebileceğinizi bilmeniz gerekir.
Vue.js Uygulamalarındaki SEO Problemleri
Konu SEO olduğunda Vue frameworkünde bir çok sorun vardır. Sadece Vue değil bunun yanı sıra Angular ve React gibi diğer frameworkler de aynı sorunları yaşamaktadırlar. Bu sorunları bazıları şunlardır:
- Tek Sayfalı Uygulama (Single Page Application) olması.
- Sayfa yükleme hızı.
- Meta tagleri, kanonik URL ve site haritasını güncellemek zordur.
- Hash URL’ler.
Peki Neden Hala Vue.js?
Büyük şeylerin küçük paketlerde geldiği söylenir, aynı durum Vue.js için de geçerlidir. Bir frameworkün boyutu ne kadar küçük olursa o kadar çok kullanılır. Bu Vue.js’in en büyük avantajlarından biridir. Bu frameworkün boyutu yalnızca 33.30KB’dir, Angular ve React’tan daha küçüktür ve kullanıcıların indirebilmeleri çok zaman almaz. Gitlab, Behance gibi çoğu popüler websitesi Vue ile geliştirilmiştir.
Vue ve SEO: Nasıl SEO dostu yaparız?
Aklınızda tutmanız gereken yöntemlerin kısa bir listesi:
- ‘Hash’ modu yerine ‘History’ modunu kullanın.
- Vue Router kullanın.
- Vue-meta npm paketini yükleyerek sayfanıza özel meta tagleri ekleyin.
- Komponentleriniz için Lazy Loading işlemi uygulayın.
- Pre-rendering ya da server side rendering (SSR) kullanın.
- Vue.js’de sayfa yükleme hızınızı iyileştirin.
- Ve uygulamanızı mobil uyumlu hale getirin. (Vuetify ile rahatlıkla mobil uyumlu websiteler yapabilirsiniz)
‘Hash’ modu yerine ‘History’ modu kullanımı
Birçok URL’de ‘#’ (hashtag) farketmiş olabilirsiniz. Nitekim Google’ın bu URL’leri indekslemesi oldukça zordur. Bu da sıralamanızı kötü yönde etkiler. Google’da bir arama yaparsanız göreceksiniz ki karşınıza çıkan ilk 10 sonuçta “example.com/about” gibi okunması kolay temiz URL’lerle karşılaşacaksınız. Bu hashtaglerden kurtulmak için Vue router içerisinde ‘History’ modunu kullanabilirsiniz. Vue2 için bunu manuel yapmamız gerekir. Ancak Vue3 ile birlikte artık CLI kurulumu yapılırken ‘hash mode’ ile ‘history mode’ arasında bir seçim yapabiliyoruz.
Bunun yanı sıra aşağıdaki gibi bu işlemi gerçekleştirebiliriz:
const router = new VueRouter ({
mode: ‘history’, //bu satırı eklemeniz yeterlidir
router: [] //router linklerimizin array’i
)}
İşte bu kadar basit! Bu kod ile birlikte URL’inizi SEO dostu hale getirebilirsiniz.
Vue router kullanın
Basitçe söylemek routing sayfalar arasında kullanıcı sayfayı yenilemeden gezinme işlemidir. Vue router, gezinme işlemini oldukça kolay ve hızlı hale getirir.
Vue router yapılandırması ile URL’lerimizi ‘history mode’ kullanarak SEO dostu yapabileceğimizi söylemiştik.
Bir yönlendirme yaparken <a href=”/path”>About </a> kullanmak yerine <router-link to=”/about”>About</router-link> kullanabilirsiniz. Router link navigasyon işlemlerimizi oldukça hızlandırır ve bu da günün sonunda SEO için faydalıdır. Aşağıda bir başka router-link kullanımının örneğini görebilirsiniz.
<router-link to="/contact"> COntact </router-link><router-link to="/our-team"> Our Team </router-link>
Vue Router ile ilgili daha detaylı bilgiye vue.js sitesi üzerinden ulaşabilirsiniz.
Vue-Meta ile meta taglerinizi güncelleyin
Vue.js, tıpkı React gibi tek sayfalık bir uygulama frameworkü olduğundan komponentler üzerinde çalışır ve sadece tek bir HTML dosyamız olur. Vue uzantılı dosyalarda <head> tagı kullanamazsınız. Bu da meta açıklamaları, başlıklar ve kanonik URL’ler ekleyemememiz gibi bir takım problemlere neden olur.
Meta tagleri Google’da daha iyi sıralamalar elde edebilmemiz adına büyük rol oynar. Vue-meta npm paketi ile birlikte Vue uygulamalarımıza meta tagleri eklememiz oldukça kolay. Örneğin homepage.vue gibi sayfamız olduğunu düşünelim. Yapmamız gereken homepage.vue komponentinde aşağıda belirttiğim gibi <script> tagleri içerisinde meta taglerinizi ekleyebilirsiniz Daha detaylı bilgi için vue-meta npm sayfasını inceleyebilirsiniz.
<template>...</template> <script> export default { metaInfo: { title: 'Homepage', titleTemplate: '%s - Yay!', htmlAttrs: { lang: 'en', amp: true } } }</script>
Komponentler için Lazy Loading işlemi uygulayın
Lazy Loading (gecikmeli yükleme) kavramı tüm sayfayı render etmek yerine gerekli komponentleri render etme işlemidir. Lazy loading işlemi sayfanızın yüklenme hızını arttırmasına da yardımcı olur. Vue’da bunu yapabilmeniz için router dosyamızda bir takım değişiklikler yapmamız gerekir. Daha ayrıntılı bilgi için vuejs dokümentasyonunu okumanızı öneririm.
Pre-rendering ya da Server Side Rendering (SSR) kullanın
Vue.js komponentlerden dinamik olarak güncellenen id’si ”app” olan bir <div> ve tek bir HTML sayfasına sahip Tek Sayfalı (SPA) bir Uygulama frameworküdür. Uygulamanızın kaynağını tarayıcı üzerinden kaynağı görüntüle diyerek görüntüleyecek olursanız her açılış sayfasında aynı HTML kaynağını göreceksiniz. Aşağıdaki resimlerde uygulamanın iki farklı sayfasının kaynağı yer almaktadır ancak ikisinin de kaynak kodu benzerdir.
Bu dezavantaj nedeniyle Google botları sayfalarımızı ziyaret ettiğinde indeksleme işlemini gerçekleştiremezler ve bu da sitemizin üst sıralara çıkmasına engel olur. Bunu çözebilmemizin iki farklı yolu vardır.
“Pre-rendering” ve “Server Side Rendering” işlemleri.
Pre-rendering
Nedir bu pre-rendering (ön işleme)? Pre-rendering, Google botları sayfamızı ziyaret ettiğinde içeriği görebilmesi için sayfadaki tüm elementleri önceden yükleme işlemidir. Pre-render servisi sayfa yüklendiğinde kullanıcının “bot” olup olmadığını anlamak için tüm istekleri durdurur. Eğer kullanıcı bir “bot” ise pre-render JavaScript, resimler vs. gibi dosyaları statik olarak oluşturularak bot’a göstermek için gönderir. Eğer ki kullanıcı “bot” değil de gerçek bir kullanıcı ise her şey normal akışında gerçekleşir. Ön yükleme işlemi sadece botlar için uygulanır.
Bir işletme websitesi gibi küçük ve bir kaç sayfadan oluşan bir uygulama geliştiriyorsanız “Pre-rendering” (Ön işleme) yöntemini kullanabilirsiniz.
Bu işlem için “vue-cli-plugin-prerender-spa” paketini kullanabilirsiniz.
Server Side Rendering (SSR)
Server side rendering nedir? Server side rendering (Sunucu tarafında işleme) web sayfalarımızı tarayıcıda işlemek yerine sunucu tarafında işler ve tarayıcıya bunu iletir. SSR tarayıcıya tam olarak render edilmiş sayfayı iletir ve SPA uygulamamızın çalışmasını sağlar.
Eğer çok sayfalı bir web uygulaması geliştiriyorsanız SSR kullanmanız tavsiye edilir. SSR Nuxt.js ile gerçekleştirilebilir ve Vue.js sitesinde gerekli dokümanlar mevcuttur.
Mobil uyum
Google web uygulamalarınızın mobil uyumlu olmasına çok büyük önem verir. Bunun yanı sıra Google sorunsuz masaüstü web uygulamalarına kıyasla mobile çok daha fazla önem veriyor.
Vue geliştiriyorsanız mobil uyumlu websiteler yapmak için Vuetify kullanabilirsiniz. Vuetify uygulamanızı sorunsuz bir şekilde geliştirmenize yardımcı olan, temiz, semantic, tekrar kullanılabilir komponentler oluşturmanıza yardımcı olan bir UI frameworküdür.
Sayfa Yüklenme Hızı
Bildiğiniz üzere Dünya hızla ilerliyor ve insanların dikkat süreleri gittikçe kısalıyor. Aramaların hızlı ve kesin hale gelmesinin nedeni de budur. Bununla birlikte eğer ki sayfa yükleme hızınız 5 saniyeden fazlaysa Google yönergelerine göre sizi cezalandırabilir.
Vue harika bir state yönetimi modeli olan Vuex kütüphanesine sahiptir. Tıpkı React’ın Redux’a sahip olması gibi. Vuex ile birlikte komponentler arası iletişim için artık props veya eventleri kullanmanıza gerek yok. Bu yüzden yazdığınız kod satırı azalır ve uygulamanızın performansı artar. Sayfa yüklenme hızını arttırmak için Lazy Loading, Pre-rendering, Server Side Rendering ve routing gibi işlemleri Vuex ile birlikte kullanabilirsiniz.
Site haritası (Site map) eklemek
Adından da anlaşılacağı üzere site haritası arama botları için sitenizin mimarisinin bir haritasıdır. Site haritasına sahip olmak çok önemli değildir ancak arama botlarına hangi sayfalarınızın önemli olduğunu vurgulamak için kullanışlıdır. Yine, site haritasını Tek Uygulamalı Sayfa’ya (Single Page Application) eklemek karmaşıktır. Bir kaç sayfadan oluşan küçük bir uygulama geliştiriyorsanız site haritası eklemek çok gerekli değildir. Ancak büyük bir uygulama geliştiriyorsanız site haritası eklemek SEO düşünüldüğünde çok önemlidir. Uygulamanıza “Vue-router-sitemap” paketi ile site haritası ekleyebilirsiniz.