AngularJS'de Arama Motoru Optimizasyonu (Seo) Turkish Tutorial
Neler Öğreneceğim?
- AngularJS'de Arama Motoru Optimizasyonu (Seo)
- AngularJS'de Uygulamanın Seo'ya İhtiyacı Varmı?
- Seoya Arkadaş Canlısı Sayfa Implementasyonu
- Sitemap ile Sitenin Tüm İçeriğini Listelemek
- Örümceği Sayfanın Hazır olduğunu Söylemek
- AngularJS'de Material Design Modülü
- Material Design Kurulum ayarlarını Yapmak
Gereksinimler
- Notepad++
Zorluk Düzeyi
- Intermediate (Orta Seviye)
English
Search Engine Optimization in AngularJS (Seo)
For SEO work, searches on search engines can be called by the developer to direct users to the content of your final site.
In this section, we will discuss superficially how the content of a web application that uses AngularJS can be made more easily searchable by search engines.
Does AngularJS Need to Seo?
AngularJS is a Javascript Framework that is usually used for single page applications. Accordingly, the development of a content-providing application with AngularJS is essentially non-functional. Nevertheless, in some cases it is possible for us to find that the content of the generated applications can be scanned by the search engine.
Türkçe
AngularJS'de Arama Motoru Optimizasyonu (Seo)
SEO çalışmalarına, arama motorlarındaki aramaları sonucu sitenizin içeriğine kullanıcıların yönlenebilmesi için geliştirici tarafından yapılması gerekenler olarak adlandırılabilir.
Bu bölümünde, AngularJS kullanan bir web uygulamasının içeriğinin nasıl arama motorları tarafından daha kolay taranabilir hale getirilebileceğini yüzeysel olarak tartışacağız.
AngularJS'de Uygulamanın Seo'ya İhtiyacı Varmı?
AngularJS, genellikle tek sayfa uygulamalar için kullanılan bir Javascript Framework'üdür. Buna göre içerik sunan bir uygulamanın AngularJS ile geliştirilmesi temelde işlevsel değildir. Buna ragmen bazı durumlarda oluşturulan uygulamaların içeriğinin arama motoru tarafından taranabilir olması işimize yarayabiliyor.
Seoya Arkadaş Canlısı Sayfa Implementasyonu
Önceki bölümünler de, AngularJS route modülü ile içeriğin nasıl adreslenebileceğini ve kullanıcının istediği özel içeriğe adres değiştirerek nasıl ulaşabileceğini tartıştık. Bu durumun arama motorları için çok önemli olduğu söylenebilir.
Genellikle arama motorlarının örümceklerinin sitenizi tararken yaptığı yaklaşım adımlar halinde şöyle gerçekleşir;
» Hali hazırda indeksli bir web sayfasından sizin sitenize çıkan bir adresi taramaya başlar. Sizin sitenizde bahsi geçen adres içindeki tüm linkleri tarar.
» Taradığı tüm iç linkler için de aynı işlemi gerçekleştirir.
Sonuç olarak buradan çıkartmamız gereken bilgi, uygulamanın herhangi bir view bölümünde, diğer view'lerin tamamının linklenmiş veya geniş bir link haritasında örümcek için görülebilir olması gerekir.
Not: Örümcek kelimesi ile; arama motorlarının sitenin sayfa haritasını ve sayfaların içerik verilerini toplayan otomatik yazılımı kast ediyoruz.
Bunu sağlamak için template'ler arasındaki bağlantılandırmayı önceden düşünerek daha mantıklı bir şekilde ayarlamalıyız.
Sitemap ile Sitenin Tüm İçeriğini Listelemek
Bazı arama motorlarının desteklediği, manuel olarak sitemap oluşturmak da, sitemizin tüm içeriğinin adreslere dağılmış versiyonunu arama motorlarına submit etmek için güzel bir yöntem olabilir.
Not: Sitemap dosyaları, sitede bulunan tüm linklerin ve bu sayfaların başlıkları ile duruma göre içeriklerinin kısaca belirtildiği genellikle XML formatındaki dosyalardır. Bu içeriği genellikle veritabanı ile iletişime geçip kullandığımız backend dili ile oluşturuyoruz.
Oluşturulan farklı sayfaların arama motoru tarafından indekslenebilir olabilmesi için bahsi geçen sayfanın künyesinin birbirinden farklı olması gerekir.
Özellikle sayfanın title değeri ve meta açıklama kısmı (AngularJS gibi sonradan initilize edilen içerikte arama motorunun bulabilmesi zor olabilir) head kısmında verilmelidir.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<title>{{sayfaBaslik}} - {{siteBaslik}}</title>
<meta name="description" itemprop="description" content="{{desc}}" />
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
Sayfa İçeriği
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope){
});
</script>
</body>
</html>
Örnek kodumuzda $scope üzerinden içeriğe bağladığımız değişkenler ile sayfanın künyesini her sayfa için farklı bir hale getiriyoruz.
Örümceği Sayfanın Hazır olduğunu Söylemek
AngularJS, ilk bölümlerinde de bahsettiğimiz gibi, DOM elementlerinin oluşturulması sonrasında (bir kısmı sırasında) içerik bağlamayı aktive eden bir Javascript kütüphanesi, buna göre örümcek sayfamızı yüklediğinde, HTML template sayfasının AngularJS tarafından elden geçirilmemiş versiyonunu görebilir.
Bunu somut bir örnek ile anlatırsak, kitapların AngularJS ile sunulduğu bir sayfanın template sayfası şu şekilde görülecek;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<title>{{sayfaBaslik}} - {{siteBaslik}}</title>
<meta name="description" itemprop="description" content="{{desc}}" />
</head>
<body>
<b>{{kitap.baslik}}</b>
<p>{{kitap.aciklama}}</p>
<span>Sayfa sayısı: {{kitap.sayfaSayisi}}</span>
</body>
</html>
Bir arama motoru eğer bu template sayfasını, AngularJS işlemini gerçekleştirmeden önce okursa göreceği şey içeriğin boş hali olan süslü parantezli {{}} halini görecek ve bunu kayıt edecektir.
Bu durumu engellemek için arama motoruna bir belirteç vermemiz gerekiyor. Bunun için body elementinde data-status nitelik tamamlayıcısını içerik yüklenmesi tamamlandığında ready değerine çekmeliyim;
<body data-status="">
$scope.status = 'ready';
Bu sayede, popüler arama motorlarının desteklediği status nitelik tamamlayıcısı kullanılarak, arama motoruna sayfanın crawling için hazır olup olmadığını söylüyoruz.
Not: Buna ek olarak isterseniz, Javascript çıktısını kısa süreliğine HTML dosyası olarak tutarak istek sırasında işlev tamamlandıktan sonra çıktı veren bir tür eklenti (örn: PhantomJS) kullanılabilir.
Bu bölümünde bahsettiğimiz AngularJS için büyük önem taşıyan SEO çalışmalarının yanı sıra, yapılması gereken, tamamını listeyemeyeceğimiz çıktı HTML içerisindeki çalışmakların tamamının da yapılmlş olması uygulamanın arama motorları tarafından indexlenebilir (dizine eklenebilir) hale gelmesinde büyük bir önem taşıyor.
Bu açıdan uygulamanızı güncel iç SEO çalışmaları adına tekrar gözden geçirmek en verimli sonucu da verecektir.
AngularJS'de Material Design Modülü
Önceki bölümler de 3. parti veya AngularJS tarafından geliştirilmiş dış modüllerin nasıl kullanılacağına dair ayrıntılı bilgi verdik.
Bu bölümde ise, yine Google tarafından önerilen tasarım konsept önerisi olan Material Design konseptinin web ve AngularJS için uygulanmış halinin modülünün nasıl kullanıldığını ve özelliklerini inceleyeceğiz.
Material Design Kurulum ayarlarını Yapmak
Material Design modülü, uygulamanızda kullanabileceğiz arayüz ögelerini, Google tarafından önerilmiş tasarım konsepti olan material design'a uyumlu hale getirmenize yardımcı olan bir modül.
Görselde gördüğünüz gibi; buttonlar, input'lar gibi arayüz ögeleri için önceden belirlenmiş style değerleri atamanıza ön ayak olur.
Dependency dosyalarını (sistemin çalışması için gerekli olan dosyaları) yükledikten sonra, her modüıü eklediğimiz gibi ngMaterial etiketi ile, ana uygulama modülümüze aktarıyoruz.
NPM üzerinden veya internet sayfasından indirerek gerekli dosyaları alıp sayfamıza ekleyelim;
<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</head>
<body ng-app="uygulamam" ng-cloak>
<script type="text/javascript">
angular.module('uygulamam', ['ngMaterial']);
</script>
</body>
</html>
Material modülünü kullanan bir AngularJS uygulamanın basit yapısı bu şekilde olmalı. Material modülünün, çalışması için animate, aria ve messages modüllerinin de uygulamamıza eklenmiş olması gerekiyor. Buna ek olarak an itibari ile stabil versiyon olan 1.5.5 versiyon AngularJS minified versiyonunu da sayfaya ekliyoruz.
Son olarak material modülünün çalışması için, yine aynı internet sitesinden indirdiğimiz (veya kendi portu ile kullandığımız) angular-material.css dosyasını da uygulamanın head bölümüne ekliyoruz.
Not: Burada dikkat etmemiz gereken bir nokta, aktardığımız modüllerin body elementi kapanmadan hemen önce eklenmiş olmasıdır. Bu sayede tarayıcı, bu Javascript dosyalarının indirmekle zaman kaybetmeden önce site içeriğini indirebilir.
Bu noktadan sonra, uygulamanız içinde material modülü tarafından tanımlı arayüz ögelerini kullanmaya başlayabilirsiniz.
Posted on Utopian.io - Rewarding Open Source Contributors