AngularJS SEO Sorunu ve Çözümü

Sefa Said Deniz

Konuk yazarımız Sefa Sadi Deniz Beykent Üniversitesi yazılım mühendisliği mezunu, 24 yaşında genç bir girişimci.

İnsanların herhangi bir konu hakkındaki görüşlerini karşılaştırmak analiz yapmak ve fikir alışverişi üzerine kurulmuş tamamen kullanıcı yorumlarına dayanan Maabac.com yeni nesil tartışma – karşılaştırma platformunun kurucusu.

Hepinizin malumudur single page application(spa olarak adlandıracağım) yani tek sayfa uygulamaların SEO ile ilgili sorunları. Bu uygulamalar sayfayı yenilemeden içeriği değiştirerek oluşan uygulamalardır. Bir projeye başladığınızda sistem hareketli olsun daha dinamik bir yapıda olsun istiyorsanız herhangi bir javascript kütüphanesini tercih edebilirsiniz. Ben angularjs tercih ettim. Dilerseniz Jquery bile kullanabilirsiniz. Tamamen size kalmış. Javascript tarayıcıda çalıştığı için Google ilk etapta sayfa içeriğini göremiyor.

Yahut gördüğü şekil:

<title>{{title}}</title>

Bunu çözmek için izlenilen yol ise şu şekilde:

Google, sitelerin javascriptlerini çalıştırıp öyle gösteriyor(kaynak). Ancak bazı şartlar var bunun için. Sayfanın başına

<meta name="fragment" content="!">

meta tagını koyman lazım. Angularjs’de url yapıları www.siteismi.com/# şeklinde olur. Yani bir sayfaya girdiğinizde www.siteismi.com/#sayfa şeklinde gösterir.

Google bu meta tagı görünce url yapısını www.siteismi.com/?_escaped_fragment_=sayfa haline getiriyor ve sayfayı indexlemeye başlıyor.

Buraya kadar herşey güzel görünüyor. Ancak Google botları fazla beklemeden siteden çıkabiliyor. Yani sayfa içeriğiniz tam oluşmadan ayrılabiliyor. Daha kötü senaryoda ise içerik oluşsa bile diğer sayfaları indexlemiyor. Çünkü sayfa yapımız # ile başlıyor. Ya tüm siteyi Google’a tek tek yollayacaksınız (sitemap da yapılabilir) ya da farklı bir çözüm yolu deneyeceksiniz.

Bunun için Angularjs de html5 modunu açmanız lazım. Bu da $locationProvider ile mümkün.

$locationProvider.html5Mode({
    enabled: true
});

Bu kod ile url yapımızdan #’ı sildik. Peki sitemiz artık www.siteismi.com/sayfa haline geldi. Peki Google botları sitenin javascript tabanlı olduğunu nasıl anlayacak?

Bunun içinde prerender yani önceden yükleyip göstermemiz gerekiyor(benim bulduğum çözüm bu şekilde). Prerender için çeşitli servisler var. Örn prerender.io . Ancak bu servisler ücretli. Bu servisler kullanmak yerine opensource ve ücretsiz ancak zahmetli bir kaç yöntem var. (Açıkçası prerender.io bende çalışmadı. sebebini bilmiyorum.)

Bir kurtarıcı PHANTOMJS

Nedir bu phantomjs?

Javascript api ile çalışan bir webkit aracıdır. Yani javascript ile çalışan bir web motorudur. Daha çok testler için kullanılıyor. Ancak biz prerender için kullanacağız.

Öncelikle bu siteden Phantomjs’i indiriyoruz ve burdaki scripti indiriyoruz.

Dikkat! Örnek vereceğim websitem phantomjs 2 sürümünde tam çalıştı.

Script sizin normal kullandığınız sitenin portundan farklı olsun (apache için 80 yahut nodejs için 3000 portu gibi). 9000 portunu tercih ettim.

Script çalıştığında böyle ekran gelecek. Bu script önce bir webserver oluşturuyor. 9000 portundan bağlantı bekliyor. Bağlantı geldiğinde bir web sayfası oluşturuyor. Maabac.com sitesine bağlanıyor ve içindeki javascript, css vb şeyleri çalıştırıyor. Render aldıktan sonra webserver html şeklinde istemciye yolluyor. Yani bir bakıma php’deki derleme işlemini yapıyoruz diyebiliriz.

Test etmek için farklı bir terminalden curl komutunu kullanacağız. Komut olarak

curl ‘http://localhost:9000‘ girin ve enter’a basın.

Eğer sitenizde bir hata yoksa bu şekilde derlenmiş olarak konsola gelecektir. Eğer herhangi bir hata varsa zaten phantomjs konsolu takip edip size bildiriyor.

Buraya kadar herşey tamam. Peki biz bunu Google botlarına nasıl yönlendireceğiz? Bunun için de nginx reverse proxy kullanacağız.

Sunucuda phantomjs’i çalıştırdıktan sonra nginx.conf dosyasını düzenlemeniz lazım. Benim düzenlediğim kod sadece Google için geçerli.

Önce location / kısmı içine

error_page 418 = @googlebot;

recursive_error_pages on;

if ($http_user_agent ~ “Googlebot|yahoo|bingbot|baiduspider|yandex|yeti|yodaobot|gigabot|ia_archiver|developers\.google\.com”) {

return 418;

}

kodlarını ekliyoruz

Bu kodlar şu anlama geliyor. Arama motoru botları geldiğinde 412 kodlu @googlebot u çalıştır.

@googlebot tanımı ise şu şekilde

location @googlebot {

proxy_pass http://ip:9000;

}

Yani @googlebot çalıştığında aslında ip:9000 çalışıyor demek. Yani bizim phantomjs server çalıştırılıp getiriliyor. Dosyayı kaydedip Nginx’i yeniden başlatın.

Bu aşamada Google Search Console ile Google gibi getir ile deneme yapabiliriz.

Eğer Google gibi getir ve oluştur dediğinizde <title>{{title}}</title> değil de <title>Başlık</title> şeklinde görüyorsanız yaptığınız işlem başarılı olmuştur. İşlem başarılı değilse reverse proxy hatalıdır.