Arama motorları ve SEO ile ilgili AngularJS uygulamasıyla ilgili iki sorun görüyorum:

1) Özel etiketlerle ne olur? Arama motorları bu etiketlerdeki içeriğin tamamını yok sayar mı? yani varsayalım

<custom>
  <h1>Hey, this title is important</h1>
</custom>

olur <h1>içeride özel etiketler olmasına rağmen dizine alınması?

2) Dizine ekleme {{}} arama motorlarının kelimenin tam anlamıyla bağlanmasını önlemenin bir yolu var mı? yani

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

Gibi bir şey yapabileceğimi biliyorum

<h2 ng-bind="title"></h2>

ancak tarayıcının başlığı "görmesine" izin vermek istersem ne olur? Sunucu tarafı oluşturma tek çözüm mü?

Güncelleme Mayıs 2014

Google tarayıcıları artık javascript çalıştırıyor ; sitelerinizin Google tarafından nasıl oluşturulduğunu daha iyi anlamak için Google Web Yöneticisi Araçları'nı kullanabilirsiniz.

Orijinal yanıt
Uygulamanızı arama motorları için optimize etmek istiyorsanız, maalesef tarayıcıya önceden oluşturulmuş bir sürüm sunmanın bir yolu yoktur. Google'ın ajax ve javascript yoğun siteler için önerileri hakkında daha fazla bilgiyi buradan edinebilirsiniz .

Bu bir seçenek ise , sunucu tarafı oluşturma ile Angular için SEO nasıl yapılacağı hakkında bu makaleyi okumanızı tavsiye ederim .

Tarayıcının özel etiketlerle karşılaştığında ne yaptığından emin değilim.

PushState ve Precomposition kullanın

Bunu yapmanın şu anki (2015) yolu JavaScript pushState yöntemini kullanmaktır.

PushState, sayfayı yeniden yüklemeden üst tarayıcı çubuğundaki URL'yi değiştirir. Sekmeler içeren bir sayfanız olduğunu varsayalım. Sekmeler içeriği gizler ve gösterir ve içerik AJAX kullanılarak veya yalnızca display: none ve display: block öğelerini doğru sekme içeriğini gizlemek ve göstermek için dinamik olarak eklenir.

Sekmeler tıklandığında, adres çubuğundaki URL'yi güncellemek için pushState'i kullanın. Sayfa oluşturulduğunda, hangi sekmenin gösterileceğini belirlemek için adres çubuğundaki değeri kullanın. Açısal yönlendirme bunu sizin için otomatik olarak yapacaktır.

önceden oluşturma

PushState Tek Sayfalı Uygulamayı (SPA) vurmanın iki yolu vardır

1. Kullanıcının bir PushState bağlantısını tıkladığı ve içeriğin AJAXed olduğu PushState aracılığıyla.
2. Doğrudan URL'ye basarak.

Siteye yapılan ilk isabet URL’ye doğrudan vurulmasını içerir. Sonraki isabetler, PushState URL'yi güncellediğinden içerik olarak AJAX olacaktır.

Tarayıcılar bir sayfadaki bağlantıları toplar ve daha sonra bunları işlemek için bir kuyruğa ekler. Bu, bir tarayıcı için sunucudaki her isabetin doğrudan bir isabet olduğu anlamına gelir, Pushstate üzerinden gezinmezler.

Precomposition, başlangıç ​​yükünü, muhtemelen JSON nesnesi olarak sunucudan gelen ilk yanıtla birleştirir. Bu, Arama Motorunun AJAX çağrısı yapmadan sayfayı oluşturmasına izin verir.

Google'ın AJAX isteklerini yerine getiremeyebileceğini gösteren bazı kanıtlar var. Burada daha fazlası:

https://web.archive.org/web/20160318211223/http://www.analog-ni.co/precomposing-a-spa-may-become-the-holy-grail-to-seo

Arama Motorları JavaScript'i okuyabilir ve yürütebilir

Google bir süredir JavaScript'i ayrıştırabildi, bu yüzden başlangıçta Chrome'u geliştirdiler ve Google örümcek için tam özellikli bir başsız tarayıcı olarak hareket ettiler. Bir bağlantının geçerli bir href özelliği varsa, yeni URL dizine eklenebilir. Yapacak başka bir şey yok.

Ek olarak bir bağlantıyı tıklamak bir pushState aramasını tetiklerse, sitede kullanıcı tarafından PushState aracılığıyla gezinebilirsiniz.

PushState URL'leri için Arama Motoru Desteği

PushState şu anda Google ve Bing tarafından desteklenmektedir.

Google

Matt Cutts, Paul Irish'ın SEO için PushState hakkındaki sorusuna yanıt veriyor:

http://youtu.be/yiAF9VdvRPw

Google, örümcek için tam JavaScript desteğini açıkladı:

http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html

Sonuç olarak Google, PushState'i destekliyor ve PushState URL'lerini dizine ekleyecek.

Ayrıca bkz. Google web yöneticisi araçlarının Googlebot gibi getirilmesi. JavaScript'inizin (Açısal dahil) yürütüldüğünü göreceksiniz.

Bing

İşte Bing'in Mart 2013 tarihli güzel PushState URL'leri için destek duyurusu:

http://blogs.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/

HashBangs # kullanmayın!

Hashbang URL'leri, geliştiricinin sitenin önceden oluşturulmuş bir sürümünü özel bir konumda sunmasını gerektiren çirkin bir stopgap idi. Hala çalışıyorlar, ama onları kullanmanıza gerek yok.

Hashbang URL'leri şöyle görünür:

domain.com/#!path/to/resource

Bu, şöyle bir meta etiketle eşleştirilir:

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

Google bunları bu formda dizine eklemez, bunun yerine _escaped_fragments_ URL'sinden sitenin statik bir sürümünü alır ve dizine ekler.

Pushstate URL'ler normal bir URL'ye benziyor:

domain.com/path/to/resource

Fark, Angular'ın JavaScript'te onunla ilgili document.location değişikliğini keserek bunları sizin için ele almasıdır.

PushState URL'lerini kullanmak istiyorsanız (ve muhtemelen kullanıyorsanız) tüm eski karma tarzı URL'leri ve meta etiketleri çıkarır ve yapılandırma bloğunuzda HTML5 modunu etkinleştirmeniz yeterlidir.

Sitenizi test etme

Google Web Yöneticisi araçları artık bir URL'yi google olarak getirmenize ve Google'ın oluşturduğu sırada JavaScript oluşturmanıza olanak tanıyan bir araç içeriyor.

https://www.google.com/webmasters/tools/googlebot-fetch

Açısal Olarak PushState URL'leri oluşturma

Gerçek URL'leri # önek yerine Angular'da oluşturmak için $ locationProvider nesnenizde HTML5 modunu ayarlayın.

$locationProvider.html5Mode(true);

Sunucu Tarafı

Gerçek URL'ler kullandığınızdan, tüm geçerli URL'ler için aynı şablonun (ve önceden oluşturulmuş bazı içeriklerin) sunucunuz tarafından gönderilmesini sağlamanız gerekir. Bunu nasıl yapacağınız sunucu mimarinize bağlı olarak değişir.

Site haritası

Uygulamanız, fareyle üzerine gelme veya kaydırma gibi olağandışı gezinme biçimlerini kullanabilir. Google'ın uygulamanızı sürdürebilmesini sağlamak için, büyük olasılıkla, uygulamanızın yanıtladığı tüm URL'lerin basit bir listesi olan bir site haritası oluşturmanızı öneririm. Bunu varsayılan konuma (/ sitemap veya /sitemap.xml) yerleştirebilir veya Google'a web yöneticisi araçlarını kullanarak anlatabilirsiniz.

Yine de bir site haritasına sahip olmak iyi bir fikirdir.

Tarayıcı desteği

Pushstate IE10'da çalışır. Daha eski tarayıcılarda Angular otomatik olarak karma stili URL'lere geri döner

Bir demo sayfası

Aşağıdaki içerik, ön bileşimli pushstate URL kullanılarak oluşturulur:

http://html5.gingerhost.com/london

Doğrulanabileceği gibi, bu bağlantıda içerik dizine eklenir ve Google'da görünür.

404 ve 301 Üstbilgi durum kodlarını sunma

Arama motoru her istek için sunucunuza her zaman çarpacağından, sunucunuzdan başlık durum kodları sunabilir ve Google'ın bunları görmesini bekleyebilirsiniz.

AngularJS ve SEO hakkında kesin bilgi edelim

Google, Yahoo, Bing ve diğer arama motorları, geleneksel tarayıcıları kullanarak web'i geleneksel yollarla tarar. Web sayfalarında HTML'yi tarayan ve yol boyunca bilgi toplayan robotlar çalıştırıyorlar . İlginç kelimeler tutuyor ve diğer sayfalara (bu bağlantılar, bunların miktarı ve bunların sayısı SEO ile devreye giriyor) diğer bağlantıları ararlar.

Peki, arama motorları neden javascript siteleriyle ilgilenmiyor?

Cevap, arama motoru robotlarının başsız tarayıcılar aracılığıyla çalışması ve çoğu zaman bir sayfanın javascript'ini oluşturmak için bir javascript oluşturma motoruna sahip olmamasıyla ilgilidir . Çoğu sayfa için işe yarar çünkü çoğu statik sayfa, içerikleri zaten mevcut olduğundan JavaScript'in sayfalarını görüntülemesini umursamaz.

Bu konuda ne yapılabilir?

Neyse ki, daha büyük sitelerin tarayıcıları, JavaScript sitelerimizi taranabilir yapmamıza izin veren bir mekanizma uygulamaya başladı, ancak sitemizde bir değişiklik yapmamızı gerektiriyor .

Eğer yerine bizim basit hashPrefixolarak değiştirmek , o zaman modern arama motorları yerine kullanmak için istek değiştirecektir . (HTML5 moduyla, yani hash öneki olmayan bağlantılara sahip olduğumuzda, aynı özelliği arka ucumuzdaki başlığa bakarak uygulayabiliriz ).#!#_escaped_fragment_#!User Agent

Yani, normal bir tarayıcıdan gelen bir istek yerine şuna benzer:

http://www.ng-newsletter.com/#!/signup/page

Bir arama motoru sayfada aşağıdakileri arayacaktır:

http://www.ng-newsletter.com/?_escaped_fragment_=/signup/page

Açısal uygulamalarımızın sağlama önekini yerleşik bir yöntem kullanarak ayarlayabiliriz ngRoute:

angular.module('myApp', [])
.config(['$location', function($location) {
  $location.hashPrefix('!');
}]);

Ve eğer kullanırsak html5Mode, bunu meta etiketi kullanarak uygulamamız gerekir:

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

Hatırlatma, biz hizmet html5Mode()ile ayarlayabilirsiniz $location:

angular.module('myApp', [])
.config(['$location', 
function($location) {
  $location.html5Mode(true);
}]);

Arama motorunu kullanma

Arama motorlarına gerçekte statik HTML olarak içerik iletmeyle nasıl başa çıkacağımızı belirlemek için birçok fırsatımız var. Kendimizi bir arka uçta barındırabiliriz, bizim için bir arka uç barındırmak için bir hizmet kullanabiliriz, içeriği sunmak için bir proxy kullanabiliriz vb. Birkaç seçeneğe bakalım:

Kendinden barındırılan

Kendi sitemizi phantomjs veya zombiejs gibi başsız bir tarayıcı kullanarak taramak, sayfanın işlenmiş verileri içeren bir anlık görüntüsünü almak ve HTML olarak saklamakla başa çıkmak için bir hizmet yazabiliriz. ?_escaped_fragment_Bir arama isteğinde sorgu dizesini her gördüğümüzde , önceden oluşturulmuş sayfa yerine sayfanın aldığımız statik HTML anlık görüntüsünü yalnızca JS aracılığıyla gönderebiliriz. Bu, sayfalarımızı ortada koşullu mantıkla sunan bir arka uca sahip olmamızı gerektirir. Bunu kendimiz için başlangıç ​​noktası olarak prerender.io'nun arka ucu gibi bir şey kullanabiliriz . Tabii ki, proxy ve snippet işlemeyi hala ele almamız gerekiyor, ancak bu iyi bir başlangıç.

Ücretli bir hizmet ile

Arama motoruna içerik almanın en kolay ve en hızlı yolu bir hizmet kullanmaktır Brombone , seo.js , seo4ajax ve prerender.io , yukarıdaki içerik oluşturmayı sizin için barındıracak bunlara iyi örneklerdir. Bu, bir sunucu / proxy çalıştırmakla uğraşmak istemediğimiz zamanlar için iyi bir seçenektir. Ayrıca, genellikle süper hızlı.

Angular ve SEO hakkında daha fazla bilgi için, http://www.ng-newsletter.com/posts/serious-angular-seo.html adresinde kapsamlı bir eğitim yazdık ve kitap kitabımızda daha da ayrıntılı olarak açıkladık : AngularJS Üzerine Komple Kitap . Ng-book.com adresinden kontrol edin .

Gerçekten moo blog yılında bir SEO dostu AngularJS sitesi oluşturma öğretici göz atın. Angular'ın belgelerinde belirtilen tüm adımlarda size yol gösterir. http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

Bu teknik kullanılarak, arama motoru özel etiketler yerine genişletilmiş HTML'yi görür.

Bu büyük ölçüde değişti.

http://searchengineland.com/bing-offers-recommendations-for-seo-friendly-ajax-suggests-html5-pushstate-152946

Şunu kullanırsanız: $ locationProvider.html5Mode (true); hazırsınız.

Artık oluşturma sayfası yok.

Bu soru sorulduğundan beri işler biraz değişti. Artık Google'ın AngularJS sitenizi dizine eklemesine izin veren seçenekler var. Bulduğum en kolay seçenek , sizin için crwalable sayfaları oluşturacak ve bunu arama motorlarına sunacak http://prerender.io ücretsiz hizmet kullanmaktı . Neredeyse tüm sunucu tarafı web platformlarında desteklenir. Son zamanlarda onları kullanmaya başladım ve destek de mükemmel.

Onlarla herhangi bir bağlantım yok, bu mutlu bir kullanıcıdan geliyor.

Angular'ın web sitesi arama motorlarına basitleştirilmiş içerik sunar: http://docs.angularjs.org/?_escaped_fragment_=/tutorial/step_09

Açısal uygulamanızın Node.js / Express tabanlı JSON API'sini tükettiğini varsayalım /api/path/to/resource. Belki ile ?_escaped_fragment_olan herhangi bir isteği yeniden yönlendirebilir /api/path/to/resource.htmlve içerik pazarlığını kullanabilirsiniz içeriğinin bir HTML şablonu yerine dönüş daha JSON verilerini işlemek için.

Tek şey, Açısal rotalarınızın REST API'nizle 1: 1 eşleşmesi gerekir.

DÜZENLE : Bunun REST api'nizi gerçekten çamurlama potansiyeline sahip olduğunun farkındayım ve bunu doğal bir uyum olabileceği çok basit kullanım durumlarının dışında yapmanızı önermiyorum.

Bunun yerine, robot dostu içeriğiniz için tamamen farklı bir rota ve denetleyici seti kullanabilirsiniz. Ama sonra tüm AngularJS rotalarınızı ve denetleyicilerinizi Node / Express'te çoğalıyorsunuz.

İdealden biraz daha az hissettiğime rağmen, başsız bir tarayıcıyla anlık görüntüler oluşturmaya karar verdim.

İyi bir uygulama burada bulunabilir:

http://scotch.io/tutorials/javascript/angularjs-seo-with-prerender-io?_escaped_fragment_=tag

Google şu an itibariyle AJAX tarama tekliflerini değiştirdi.

Zaman değişti. Bugün, Googlebot'un JavaScript veya CSS dosyalarınızı taramasını engellemediğiniz sürece, genellikle modern tarayıcılar gibi web sayfalarınızı oluşturabilir ve anlayabiliriz.

tl; dr: [Google] artık 2009 yılında yapılan AJAX tarama önerisini [Google] önermiyor.

Google'ın Taranabilir Ajax Spesifikasyonu, buradaki diğer yanıtlarda belirtildiği gibi, temel olarak cevaptır.

Diğer arama motorlarının ve sosyal botların aynı sorunlarla nasıl başa çıktıklarıyla ilgileniyorsanız, buraya sanat durumunu yazdım: http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html

Taranabilir Ajax Spec'i hizmet olarak uygulayan bir şirket olan https://ajaxsnapshots.com için çalışıyorum - bu rapordaki bilgiler günlüklerimizden gelen gözlemlere dayanıyor.

Üslerinizin çoğunu kapsayacak zarif bir çözüm buldum. Başlangıçta burada yazdım ve buraya referans veren başka bir StackOverflow sorusunu cevapladım .

Bu çözüm, Javascript'in tarayıcı tarafından alınmaması durumunda sabit kodlu yedek etiketler de içerir. Açıkça özetlemedim, ancak doğru URL desteği için HTML5 modunu etkinleştirmeniz gerektiğini belirtmek gerekir.

Ayrıca dikkat: bunlar tam dosyalar değildir, yalnızca ilgili dosyaların önemli parçalarıdır. Başka bir yerde bulunabilecek direktifler, hizmetler vb. İçin kazan plakasını yazmak için yardıma ihtiyacınız varsa. Her neyse, işte gidiyor ...

app.js

Burası, rotalarınızın her biri (başlık, açıklama vb.) İçin özel meta verileri sağladığınız yerdir.

$routeProvider
   .when('/', {
       templateUrl: 'views/homepage.html',
       controller: 'HomepageCtrl',
       metadata: {
           title: 'The Base Page Title',
           description: 'The Base Page Description' }
   })
   .when('/about', {
       templateUrl: 'views/about.html',
       controller: 'AboutCtrl',
       metadata: {
           title: 'The About Page Title',
           description: 'The About Page Description' }
   })

metadata-service.js (hizmet)

Özel meta veri seçeneklerini ayarlar veya varsayılanları yedek olarak kullanın.

var self = this;

// Set custom options or use provided fallback (default) options
self.loadMetadata = function(metadata) {
  self.title = document.title = metadata.title || 'Fallback Title';
  self.description = metadata.description || 'Fallback Description';
  self.url = metadata.url || $location.absUrl();
  self.image = metadata.image || 'fallbackimage.jpg';
  self.ogpType = metadata.ogpType || 'website';
  self.twitterCard = metadata.twitterCard || 'summary_large_image';
  self.twitterSite = metadata.twitterSite || '@fallback_handle';
};

// Route change handler, sets the route's defined metadata
$rootScope.$on('$routeChangeSuccess', function (event, newRoute) {
  self.loadMetadata(newRoute.metadata);
});

metaproperty.js (yönerge)

Görünüm için meta veri hizmeti sonuçlarını paketler.

return {
  restrict: 'A',
  scope: {
    metaproperty: '@'
  },
  link: function postLink(scope, element, attrs) {
    scope.default = element.attr('content');
    scope.metadata = metadataService;

    // Watch for metadata changes and set content
    scope.$watch('metadata', function (newVal, oldVal) {
      setContent(newVal);
    }, true);

    // Set the content attribute with new metadataService value or back to the default
    function setContent(metadata) {
      var content = metadata[scope.metaproperty] || scope.default;
      element.attr('content', content);
    }

    setContent(scope.metadata);
  }
};

index.html

Herhangi bir Javascript alamayan tarayıcılar için daha önce belirtilen sabit kodlu yedek etiketlerle tamamlayın.

<head>
  <title>Fallback Title</title>
  <meta name="description" metaproperty="description" content="Fallback Description">

  <!-- Open Graph Protocol Tags -->
  <meta property="og:url" content="fallbackurl.com" metaproperty="url">
  <meta property="og:title" content="Fallback Title" metaproperty="title">
  <meta property="og:description" content="Fallback Description" metaproperty="description">
  <meta property="og:type" content="website" metaproperty="ogpType">
  <meta property="og:image" content="fallbackimage.jpg" metaproperty="image">

  <!-- Twitter Card Tags -->
  <meta name="twitter:card" content="summary_large_image" metaproperty="twitterCard">
  <meta name="twitter:title" content="Fallback Title" metaproperty="title">
  <meta name="twitter:description" content="Fallback Description" metaproperty="description">
  <meta name="twitter:site" content="@fallback_handle" metaproperty="twitterSite">
  <meta name="twitter:image:src" content="fallbackimage.jpg" metaproperty="image">
</head>

Bu, çoğu arama motoru kullanımında önemli ölçüde yardımcı olacaktır. Sosyal ağ tarayıcıları (Javascript desteğinde iffy olan) için tamamen dinamik oluşturma istiyorsanız, diğer yanıtların bazılarında belirtilen ön işleme hizmetlerinden birini kullanmanız gerekir.

Bu yardımcı olur umarım!

PreRender gibi bir şey kullanın, sitenizin statik sayfalarını yapar, böylece arama motorları dizine ekleyebilir.

Burada hangi platformların mevcut olduğunu öğrenebilirsiniz: https://prerender.io/documentation/install-middleware#asp-net

Angular Universal ile, uygulama için tam uygulamaya benzeyen açılış sayfaları oluşturabilir ve ardından Açısal uygulamanızı arkasına yükleyebilirsiniz.
Açısal Universal, sunucu tarafında saf HTML anlamına gelen javascript sayfaları oluşturur ve gecikmeden bunları kullanıcılara sunar. Böylece, zaten düşük cpu ve ağ hızına sahip olan herhangi bir tarayıcı, bot ve kullanıcıyla başa çıkabilirsiniz. Bu çözüm resmi site tarafından önerilmektedir. SEO ve Angular Universal hakkında daha fazla bilgi

Tarayıcılar (veya botlar), web sayfalarının HTML içeriğini taramak için tasarlanmıştır, ancak eşzamansız veri getirme için AJAX işlemleri nedeniyle, bu, sayfayı oluşturmak ve üzerinde dinamik içerik göstermek için zaman aldığı için bir sorun haline geldi. Benzer şekilde, AngularJSGoogle tarayıcıları için sorun yaratan eşzamansız modeli de kullanın.

Bazı geliştiriciler, gerçek verilerle temel html sayfaları oluşturur ve tarama sırasında bu sayfaları sunucu tarafından sunar. Biz aynı sayfalarını görüntüleyebilen PhantomJSsahip ürün tarafı üzerinde _escaped_fragment_(Google arar Çünkü #!site URL'ler ve daha sonra sonra her şeyi alır #!ve onu ekler _escaped_fragment_sorgu parametresi). Daha fazla ayrıntı için lütfen bu blogu okuyun .

Tarayıcılar zengin özellikli, oldukça stilize bir GUI'ye ihtiyaç duymazlar, sadece içeriği görmek isterler , bu nedenle onlara insanlar için oluşturulmuş bir sayfanın anlık görüntüsünü vermeniz gerekmez.

Benim çözümüm: tarayıcıya, tarayıcının istediklerini vermek için :

Tarayıcının ne istediğini düşünmeli ve ona sadece bunu vermelisin.

İPUCU arka ile uğraşma. Aynı API'yı kullanarak küçük bir sunucu taraflı ön görünüm eklemeniz yeterlidir