Arama motorları AngularJS uygulamalarıyla nasıl ilgilenir?


697

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ü?


17
tüm bu "çözümler" sadece AngularJS gibi teknolojilerden uzaklaşmamı sağlıyor, en azından google ve daha akıllı tarayıcılara sahip olana kadar.
Codemonkey

22
@Codemonkey: Evet, Google'ın bir ürünü olan tüm AngularJS'nin neden bunun için yerleşik bir çözüm üretmediğini merak ediyorum .. Wierd aslında ..
Roy MJ

11
Aslında Misko, Google için çalışmaya başlamadan önce Angular'ı yazdı. Google şimdi projeye sponsor oluyor, ancak yaratıcıları değiller.
superluminary

2
Belki de burada birisi "SPA'ların arama motoru indekslemesinin bir gereklilik olduğu ya da arzu edildiği bir bağlamda kullanılmadığı" SPA hakkındaki Wikipedia makalesini güncelleyebilir / güncellemelidir. en.wikipedia.org/wiki/Single-page_application [# Arama motoru optimizasyonu] IsNat adlı (belirsiz) java tabanlı bir çerçeve hakkında büyük bir paragraf var, ancak SEO'nun Angularjs'ın beğenisine hitap ettiği yönünde bir öneri yok.
linojon

3
@Roy MJ - Neden kimse niyeti görmüyor? PageSpeed, Angular, vb. Tüm SERP'lerdeki doğal, organik listelerin düşmanlarıdır. Bilerek. Tıklama Başına Ödeme'ye dayanan büyük bir iş modeliniz olduğunda ... insanları listelemeleri için ödeme yapmaya zorlamak, onlara seçenek sunmayacak, ancak bunu yapmayacak bir araç kutusu oluşturmaktan daha iyi ne kadar iyidir? Değerli içeriklerle dolu kaliteli web siteleri oluşturmak yerine, bu endüstri artık çömelmeyi başaramayan veya çözmeyen hileler ve çözümlerle dolup taşıyor.
Steven Ventimiglia

Yanıtlar:


403

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.


13
Bu artık geçerli değil. Şimdi bunun yerine pushState kullanmalısınız. Sitenin ayrı bir statik sürümünü sunmaya gerek yoktur.
superluminary

3
Google güncellemesinde bile, Google Web Yöneticisi araçlarında görebildiğim gibi ng-view doğru oluşturulmayacak
tschiela

10
Evet, sadece javascript çalıştırdıkları için sayfanızın düzgün bir şekilde dizine ekleneceği anlamına gelmez. En güvenli yol google bot useragent'ı tespit etmek, phantomjs gibi başsız bir tarayıcı kullanmak, page.contentstatik html elde etmek ve iade etmektir .
tester

6
Bu sorunun SEO'ya özgü olduğunu anlıyorum, ancak diğer tarayıcıların (Facebook, Twitter vb.) Henüz JavaScript'i değerlendiremediğini unutmayın. Örneğin, sayfaları sosyal medya sitelerinde paylaşmak, sunucu tarafı oluşturma stratejisi olmadan yine de sorun teşkil eder.
Stephen Watkins

3
Lütfen, birisi Google tarama şeması belirtimini uygulamadan doğru bir şekilde dizine eklenmiş bir AngularJS sitesi örneği verebilir mi?
check_ca

470

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.


Bunu incelemeliyim - açıklama için teşekkürler. Merak ettiğim bir şey var, google artık sayfayı dizine eklemeden önce javascript'i çalıştırıyor mu?
jvv

1
"PushState, sayfayı yeniden yüklemeden üst tarayıcı çubuğundaki URL'yi değiştirir ... Sekmeler tıklandığında, adres çubuğundaki URL'yi güncellemek için pushState'i kullanın. Sayfa oluşturulduğunda, adres çubuğundaki değeri kullanarak Açısal yönlendirme bunu sizin için otomatik olarak yapacaktır. " Ampul!
atconway

1
@superluminary, lütfen konuyu biraz daha açıklayabilir misiniz? Özellikle 'Sunucu tarafı' bölümü. Angularjs + angularjs-route + locationProvider.html5Mode + api + dinamik gezinme kullanıyorum (html5.gingerhost.com'da olduğu gibi statik olanı değil. URL'ler iyi görüntüleniyor, ancak içerik dizine alınmıyor gibi görünüyor. Bir sayfaya doğrudan bir URL ile erişirken bir şekilde statik bir içerik sunma Aslında bu iletiyle kafam karıştı: >> Aynı şablonun sunucunuz tarafından tüm geçerli URL'ler için gönderilmesini sağlamanız gerekecek. Lütfen açıklayabilir misiniz? içinde peşin.
sray

1
@sray - Sitenizdeki her URL aynı şablonu sunuyorsa, tarayıcı şablonu alabilir ve Angular, URL'yi inceleyerek ve doğru içeriği oluşturarak oradan alabilir. Bu URL'yi doğrudan sunucuya vurmak bir 404 veya 500 döndürürse, bir sorununuz varsa, doğrudan bağlantılar çalışmaz, yer işaretleri çalışmaz ve dizine eklenmez. Şimdi görüyor musun
superluminary

1
@ user3339411 - Sitenizin yanıt vereceği her sayfa için bir URL'niz olmalıdır. Sitenizin yalnızca bir içerik kümesiyle bir URL'ye yanıt vermesi gerekiyorsa, yönlendirmeye hiç ihtiyacınız yoktur. Bu basit bir site için iyidir. Ancak siteniz farklı URL'ler için farklı veriler (JSON aracılığıyla) getiriyorsa, yönlendirmeyi kullanmak mantıklı olacaktır. Github statik sayfaları dosya tabanlı olduğundan, bu örnekte her URL'yi yedekleyen gerçek bir html dosyasına ihtiyacınız olacaktır. Bir web sitesinin dosya tabanlı olması gerektiğine dair bir kural yoktur ve alternatif bir platform kullanırsanız aynı şablonu birden çok URL için sunabilirsiniz.
superluminary

107

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 .


1
SEO4Ajax ayrıca ücretli hizmet için iyi bir örnektir (beta sırasında ücretsiz). Ne yazık ki, bu yanıtı listeye eklemek için düzenlememe izin verilmiyor gibi görünüyor.
check_ca

1
@auser Bu yaklaşımı hala tavsiye ediyor musunuz? En yeni oy alan yorum bu yaklaşımı caydırıyor gibi görünüyor.
Lycha

Bu CS'de neden "kesin rehber" gibi şeyler söylemememiz gerektiğine dair harika bir örnektir :). Büyük arama motorları artık Javascript çalıştırıyor, bu nedenle bu cevabın tamamen yeniden yazılması veya silinmesi gerekiyor.
Seb

1
@seb robotlar tararken sayfada olması gereken açık grafik etiketleri için hala gerekli. Örneğin Facebook veya Twitter kartlarının buna ihtiyacı var. Ancak bu yanıt, şu anda kullanımdan kaldırılan hashbang yerine HTML5 pushstate'e odaklanacak şekilde güncellenmelidir.
adriendenat

@Grsmto haklısın! Sonra büyük arama motorları artık doğru değil JS yürütmez diyor çünkü yeniden yazılması gerekir sanırım.
Seb

57

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.


@Brad Green bile soru kapatılmış olsa bile (her ne sebeple olursa olsun) ona cevap verme pozisyonunuz olabilir. Sanırım bir şey eksik olmalıyım: stackoverflow.com/questions/16224385/…
Christoph

41

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.


3
Bu şimdi en iyi cevap olmalı. 2014'teyiz ve @joakimbl tarafından verilen yanıt artık optimum değil.
Stan

11
Bu yanlış. Bu makale (Mart 2013'ten itibaren) Bing'in javascript yürütmesi hakkında hiçbir şey söylemiyor. Bing, önceki kullanım önerileri yerine pushstate kullanımı için bir öneri verir #!. Makaleden: "Bing, orijinal olarak Google tarafından başlatılan taranabilir AJAX'ın #! Hala statik HTML'yi oluşturmanız ve _escaped_fragment_URL'ler için sunmanız gerekir. Bing / Google, javascript / AJAX çağrılarını yürütmez.
Prerender.io

2
Hala _escaped_fragment_saf html sayfalarına ihtiyacınız var . Bu hiçbir şeyi çözmez dostum.
Stan

Yine de google robot sitemin dinamik içeriğini göremiyor, sadece boş bir sayfa.
calmbird

arama sitesi: sitem.com AngularJS aracılığıyla yüklenen içeriği değil, {{personel}} gösterir. Google tarayıcısı JavaScript'i hiç duymamış gibi. Ne yapabilirim?
Araç Seti

17

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.


6
Prerender.io kodu github üzerindedir ( github.com/collectiveip/prerender ), böylece herkes onu kendi sunucularında çalıştırabilir.
user276648

Bu da artık eskidir. Aşağıdaki @ user3330270'in cevabına bakınız.
Les Hazlewood

2
Bu modası geçmiş değil. @ user3330270 kullanıcısının yanıtı yanlış. Bağlantı verdikleri makale sadece #! Yerine pushstate kullanmayı söylüyor. Hala javascript çalıştırmadığından tarayıcılar için statik sayfalar oluşturmanız gerekir.
Prerender.io

9

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.



7

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.


@Toolkit ne demek istiyorsun?
Thor

1
Googlebot, Açısal web sitelerini ayrıştıramaz
Toolkit

4
@Araç seti mutlak kasnaktan bahsediyorsun, tam Açısal sitem google tarafından dinamik meta verilerle endekslendi
dizine eklendi

@twigg hatalı mantığınız var, yani bir (sizin) Açısal web siteniz dizine eklenmişse, hepsi öyleydi. Sana bir sürprizim var. HİÇBİRİ endekslenmedi. Açısal UI yönlendirici kullandığım veya nedenini bilen biri olabilir. Herhangi bir ajax verisi olmayan ana sayfalar bile değil
Toolkit

@Toolkit Statik html sayfalarınız bile dizine eklenmemişse, bunun JS dosyalarını tarama becerisi ile ilgisi yoktur.
Google'ın herhangi bir

6

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.


Bağlantı listelenen blogda yok.ajaxsnapshots.com
Kevin

4

Ü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!


Ben de bu çözümü takip ediyorum ve bundan önce böyle düşündüm ama arama motorları özel etiket içeriğini okuyacak sormak istiyorum.
Ravinder Payal

@RavinderPayal bu çözümü seoreviewtools.com/html-headings-checker
vijay


2

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


1

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 .


Bu Ekim 2017 itibariyle artık geçerli değil, bu gelir vergisi hesap makinesi income-tax.co.uk saf AngularJs ile inşa edilmiştir (başlıklar bile <title> £ {{earningsSliders.yearly | number: 0}} maaş </title> "30000 £ maaş için vergi hesaplayıcısı) gibi görünür ve Google onları yüzlerce anahtar kelime için ilk sayfada sıralar. Sadece insanlar için web sitelerinizi oluşturun, mae onları ve Google gerisini halleder ;)
Kaszoni Ferencz

0

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

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.