Jak wyszukiwarki radzą sobie z aplikacjami AngularJS?


697

Widzę dwa problemy z aplikacją AngularJS dotyczące wyszukiwarek i SEO:

1) Co dzieje się z niestandardowymi tagami? Czy wyszukiwarki ignorują całą treść tych tagów? tzn. załóżmy, że mam

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

zostałby <h1>zaindeksowany, mimo że znajduje się w niestandardowych tagach?


2) Czy istnieje sposób na uniknięcie dosłownie wyszukiwarek indeksujących {{}}? to znaczy

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

Wiem, że mógłbym zrobić coś takiego

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

ale co, jeśli chcę pozwolić robotowi „zobaczyć” tytuł? Czy renderowanie po stronie serwera jest jedynym rozwiązaniem?


17
wszystkie te „rozwiązania” po prostu sprawiają, że chcę odejść od technologii takich jak AngularJS, przynajmniej do czasu, aż Google i wszyscy będą mieli bardziej inteligentne roboty.
Codemonkey,

22
@Codemonkey: Tak, można by się zastanawiać, dlaczego ze wszystkich AngularJS, które jest produktem Google, nie ma wbudowanego rozwiązania dla tego .. Właściwie Wierd ..
Roy MJ

11
Właściwie Misko napisał Angular, zanim zaczął pracować dla Google. Google sponsoruje teraz projekt, ale nie są pomysłodawcami.
superluminarny

2
Być może ktoś tutaj może / powinien zaktualizować artykuł Wikipedii na temat SPA, który stwierdza, że ​​„SPA nie są zwykle używane w kontekście, w którym indeksowanie wyszukiwarek jest albo wymagane, albo pożądane”. en.wikipedia.org/wiki/Single-page_application [# Optymalizacja pod kątem wyszukiwarek] Istnieje ogromny akapit na temat (niejasnej) frameworku Java o nazwie IsNat, ale nie ma sugestii, że SEO został rozwiązany przez Angularjs.
linojon

3
@Roy MJ - Dlaczego nikt nie widzi zamiaru? PageSpeed, Angular itp. Są wrogami naturalnych, organicznych ofert na SERP. Celowo. Kiedy masz ogromny model biznesowy oparty na Pay-Per-Clicks ... jak lepiej zmusić ludzi do płacenia za swoje wpisy, niż stworzyć cały zestaw narzędzi, który nie da im żadnej opcji, jak tylko to zrobić? Zamiast budować wysokiej jakości strony internetowe wypełnione cennymi treściami, branża ta jest teraz przepełniona oszustami i rozwiązaniami, które nie osiągają ani nie rozwiązują przysadkowo.
Steven Ventimiglia,

Odpowiedzi:


403

Aktualizacja maja 2014 r

Przeszukiwacze Google wykonują teraz javascript - możesz użyć Narzędzi Google dla webmasterów, aby lepiej zrozumieć, w jaki sposób Twoje witryny są renderowane przez Google.

Oryginalna odpowiedź
Jeśli chcesz zoptymalizować swoją aplikację pod kątem wyszukiwarek, niestety nie ma sposobu, aby udostępnić robotowi wstępnie renderowaną wersję. Możesz przeczytać więcej o zaleceniach Google Ajax i JavaScript ciężkich stron tutaj .

Jeśli jest to opcja, polecam przeczytanie tego artykułu o tym, jak robić SEO dla Angulara z renderowaniem po stronie serwera.

Nie jestem pewien, co robi przeszukiwacz, gdy napotka niestandardowe tagi.


13
To nie jest już aktualne. Teraz powinieneś teraz użyć pushState. Nie ma potrzeby podawania osobnej statycznej wersji witryny.
superluminarny

3
nawet z aktualizacją Google, ng-view nie będzie renderowany poprawnie, co widzę w narzędziach Google dla webmasterów
tschiela

10
Tak, tylko dlatego, że wykonują javascript, nie oznacza, że ​​twoja strona będzie poprawnie indeksowana. Najbezpieczniejszym sposobem jest wykrycie użytkownika bota Google, użycie bezgłowej przeglądarki, takiej jak phantomjs, uzyskanie page.contenti zwrócenie statycznego HTML.
tester

6
Zdaję sobie sprawę, że to pytanie dotyczy SEO, ale pamiętaj, że inne roboty (Facebook, Twitter itp.) Nie są jeszcze w stanie ocenić JavaScript. Na przykład udostępnianie stron w serwisach społecznościowych nadal stanowiłoby problem bez strategii renderowania po stronie serwera.
Stephen Watkins

3
Czy ktoś może podać przykład poprawnie zaindeksowanej witryny AngularJS bez implementacji specyfikacji schematu indeksowania Google?
check_ca

470

Użyj PushState i Prekompozycji

Obecnym (2015) sposobem jest skorzystanie z metody pushState JavaScript.

PushState zmienia adres URL na górnym pasku przeglądarki bez ponownego ładowania strony. Załóżmy, że masz stronę z kartami. Zakładki ukrywają i pokazują zawartość, a zawartość jest wstawiana dynamicznie, albo za pomocą AJAX, albo po prostu ustawiając display: none i display: block, aby ukryć i pokazać prawidłową zawartość karty.

Po kliknięciu kart użyj pushState, aby zaktualizować adres URL na pasku adresu. Gdy strona jest renderowana, użyj wartości na pasku adresu, aby określić, która karta ma zostać wyświetlona. Routing kątowy zrobi to za Ciebie automatycznie.

Prekompozycja

Istnieją dwa sposoby na uruchomienie aplikacji pojedynczej strony PushState (SPA)

  1. Poprzez PushState, gdzie użytkownik klika link PushState, a zawartość jest AJAXed.
  2. Naciskając bezpośrednio adres URL.

Pierwsze trafienie w witrynie będzie wymagało bezpośredniego trafienia w adres URL. Kolejne działania będą po prostu AJAX w treści, gdy PushState aktualizuje adres URL.

Roboty zbierają linki ze strony, a następnie dodają je do kolejki w celu późniejszego przetworzenia. Oznacza to, że dla przeszukiwacza każde trafienie na serwerze jest trafieniem bezpośrednim, nie nawigują one za pośrednictwem Pushstate.

Prekompozycja łączy początkowy ładunek w pierwszą odpowiedź z serwera, być może jako obiekt JSON. Dzięki temu wyszukiwarka może renderować stronę bez wykonywania wywołania AJAX.

Istnieją dowody sugerujące, że Google może nie wykonywać żądań AJAX. Więcej na ten temat tutaj:

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

Wyszukiwarki mogą czytać i uruchamiać JavaScript

Google już od jakiegoś czasu może analizować JavaScript, dlatego pierwotnie opracowali Chrome, aby działał jako w pełni funkcjonalna przeglądarka bezgłowa dla pająka Google. Jeśli link ma prawidłowy atrybut href, nowy adres URL można zindeksować. Nic więcej nie można zrobić.

Jeśli dodatkowo kliknięcie łącza spowoduje wywołanie pushState, użytkownik może nawigować po stronie za pośrednictwem PushState.

Obsługa wyszukiwarek dla adresów URL PushState

PushState jest obecnie obsługiwany przez Google i Bing.

Google

Oto Matt Cutts odpowiadający na pytanie Paula Irisha dotyczące PushState dla SEO:

http://youtu.be/yiAF9VdvRPw

Oto Google ogłasza pełną obsługę JavaScript dla pająka:

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

Rezultatem jest to, że Google obsługuje PushState i będzie indeksować adresy URL PushState.

Zobacz także pobieranie narzędzi Google dla webmasterów jako Googlebota. Zobaczysz, że JavaScript (w tym Angular) jest wykonywany.

Bing

Oto ogłoszenie Bing dotyczące obsługi ładnych adresów URL PushState z marca 2013 r .:

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

Nie używaj HashBangs #!

Adresy URL Hashbang były brzydką stopą wymagającą od dewelopera dostarczenia wstępnie renderowanej wersji witryny w specjalnej lokalizacji. Nadal działają, ale nie musisz ich używać.

Adresy URL Hashbang wyglądają tak:

domain.com/#!path/to/resource

Zostałoby to sparowane z takim metatagiem:

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

Google nie zaindeksuje ich w tym formularzu, ale zamiast tego pobierze statyczną wersję witryny z adresu URL _escaped_fragments_ i zaindeksuje ją.

Adresy URL typu pushstate wyglądają jak każdy zwykły adres URL:

domain.com/path/to/resource

Różnica polega na tym, że Angular obsługuje je za Ciebie, przechwytując zmianę w document.location zajmując się tym w JavaScript.

Jeśli chcesz używać adresów URL PushState (i prawdopodobnie tak robisz), usuń wszystkie stare adresy URL i metatagi w stylu skrótu i ​​po prostu włącz tryb HTML5 w swoim bloku konfiguracji.

Testowanie witryny

Narzędzia Google dla webmasterów zawierają teraz narzędzie, które pozwala pobrać adres URL jako google i renderować JavaScript podczas renderowania go przez Google.

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

Generowanie adresów URL PushState w Angular

Aby generować prawdziwe adresy URL w Angular, zamiast # z prefiksem, ustaw tryb HTML5 na obiekcie $ locationProvider.

$locationProvider.html5Mode(true);

Po stronie serwera

Ponieważ używasz prawdziwych adresów URL, musisz upewnić się, że ten sam szablon (plus niektóre wstępnie skomponowane treści) zostanie dostarczony przez serwer dla wszystkich prawidłowych adresów URL. To, jak to zrobisz, będzie się różnić w zależności od architektury serwera.

Mapa strony

Twoja aplikacja może korzystać z nietypowych form nawigacji, na przykład najeżdżania myszą lub przewijania. Aby mieć pewność, że Google będzie w stanie prowadzić Twoją aplikację, prawdopodobnie sugeruję utworzenie mapy witryny, prostej listy wszystkich adresów URL, na które odpowiada twoja aplikacja. Możesz umieścić to w domyślnej lokalizacji (/ sitemap lub /sitemap.xml) lub poinformować o tym Google za pomocą narzędzi dla webmasterów.

W każdym razie dobrze jest mieć mapę witryny.

Obsługa przeglądarki

Pushstate działa w IE10. W starszych przeglądarkach Angular automatycznie powróci do adresów URL w stylu mieszania

Strona demonstracyjna

Następująca treść jest renderowana przy użyciu adresu URL typu pushstate ze wstępnym składem:

http://html5.gingerhost.com/london

Jak można zweryfikować, pod tym linkiem treść jest indeksowana i pojawia się w Google.

Podawanie kodów statusu nagłówka 404 i 301

Ponieważ wyszukiwarka zawsze trafi na Twój serwer dla każdego żądania, możesz podawać kody statusu nagłówków z serwera i oczekiwać, że Google je zobaczy.


Muszę się temu przyjrzeć - dzięki za wyjaśnienie. Zastanawiam się tylko, czy Google teraz uruchamia javascript przed zaindeksowaniem strony?
jvv

1
„PushState zmienia adres URL na górnym pasku przeglądarki bez ponownego ładowania strony ... Po kliknięciu kart, użyj pushState, aby zaktualizować adres URL na pasku adresu. Gdy strona jest renderowana, użyj wartości na pasku adresu, aby ustalić, który , aby wyświetlić. Rutowanie kątowe zrobi to za Ciebie automatycznie ”. Żarówka!
atconway

1
@superluminary, czy mógłbyś wyjaśnić ten temat nieco głębiej? Zwłaszcza sekcja „po stronie serwera”. Używam angularjs + angularjs-route + locationProvider.html5Mode + api + dynamiczna nawigacja (nie statyczna jak na html5.gingerhost.com. Adresy URL są wyświetlane poprawnie, jednak treść nie wydaje się być indeksowana. Czy muszę podawać jakoś statyczną treść podczas uzyskiwania dostępu do strony przez bezpośredni adres URL? Tak naprawdę jestem zdezorientowany tą wiadomością: >> musisz upewnić się, że ten sam szablon zostanie wysłany przez serwer dla wszystkich prawidłowych adresów URL. Czy możesz to wyjaśnić? Dzięki z góry
Sray

1
@sray - Jeśli każdy adres URL w Twojej witrynie obsługuje ten sam szablon, przeglądarka będzie mogła pobrać szablon, a Angular będzie mógł go stąd pobrać, sprawdzając adres URL i wyświetlając poprawną treść. Jeśli trafienie tego adresu URL bezpośrednio na serwerze zwróci 404 lub 500, wtedy masz problem, bezpośrednie linki nie będą działać, zakładki nie będą działać i nie będziesz indeksowany. Czy teraz widzisz
superluminarny

1
@ user3339411 - Powinieneś mieć jeden adres URL dla każdej strony, na którą witryna odpowie. Jeśli Twoja witryna musi odpowiadać tylko na jeden adres URL za pomocą jednego zestawu treści, w ogóle nie potrzebujesz routingu. To jest w porządku dla prostej strony. Jeśli jednak witryna zawiera różne dane (za pośrednictwem JSON) dla różnych adresów URL, warto zastosować routing. Ponieważ strony statyczne Github są oparte na plikach, potrzebny byłby rzeczywisty plik HTML wspierający każdy adres URL w tym przypadku. Nie ma reguły, że witryna musi opierać się na plikach, a jeśli korzystasz z alternatywnej platformy, możesz wyświetlać ten sam szablon dla wielu adresów URL.
superluminarny

107

Uzyskajmy definitywne informacje na temat AngularJS i SEO

Google, Yahoo, Bing i inne wyszukiwarki indeksują sieć w tradycyjny sposób za pomocą tradycyjnych robotów. Uruchamiają roboty, które indeksują HTML na stronach internetowych, zbierając po drodze informacje. Trzymają ciekawe słowa i szukają innych linków do innych stron (te linki, ich liczba i liczba wchodzą w grę z SEO).

Dlaczego więc wyszukiwarki nie obsługują stron z javascript?

Odpowiedź ma związek z faktem, że roboty wyszukiwarek działają w przeglądarkach bezgłowych i najczęściej nie mają silnika renderującego javascript do renderowania javascript strony. Działa to na większości stron, ponieważ większość stron statycznych nie przejmuje się renderowaniem strony przez JavaScript, ponieważ ich treść jest już dostępna.

Co można z tym zrobić?

Na szczęście roboty w większych witrynach zaczęły wdrażać mechanizm, który pozwala nam indeksować nasze strony JavaScript, ale wymaga to wprowadzenia zmian w naszej witrynie .

Jeśli zmienimy nasze hashPrefixna #!zamiast po prostu #, nowoczesne wyszukiwarki zmienią żądanie użycia _escaped_fragment_zamiast #!. (W trybie HTML5, tj. Tam, gdzie mamy linki bez prefiksu skrótu, możemy zaimplementować tę samą funkcję, patrząc na User Agentnagłówek w naszym backendzie).

To znaczy, zamiast żądania z normalnej przeglądarki, która wygląda następująco:

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

Wyszukiwarka przeszuka stronę za pomocą:

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

Możemy ustawić prefiks mieszania naszych aplikacji Angular za pomocą wbudowanej metody z ngRoute:

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

A jeśli używamy html5Mode, będziemy musieli zaimplementować to za pomocą metatagu:

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

Przypomnienie, możemy ustawić za html5Mode()pomocą $locationusługi:

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

Obsługa wyszukiwarki

Mamy wiele możliwości ustalenia, jak poradzimy sobie z faktycznym dostarczaniem treści do wyszukiwarek w postaci statycznego kodu HTML. Sami możemy hostować backend, możemy użyć usługi do hostowania back-endu, możemy użyć proxy do dostarczenia treści itp. Spójrzmy na kilka opcji:

Hosting własny

Możemy napisać usługę do obsługi przeszukiwania własnej witryny przy użyciu przeglądarki bezgłowej, takiej jak phantomjs lub zombiejs, biorąc migawkę strony z renderowanymi danymi i przechowując ją jako HTML. Ilekroć widzimy ciąg zapytania ?_escaped_fragment_w żądaniu wyszukiwania, możemy dostarczyć statyczną migawkę HTML strony, którą pobraliśmy zamiast zamiast strony wstępnie renderowanej, tylko przez JS. Wymaga to od nas zaplecza, które dostarcza naszym stronom logikę warunkową pośrodku. Możemy użyć czegoś takiego jak backend prerender.io jako punktu wyjścia do uruchomienia tego samodzielnie. Oczywiście nadal musimy obsługiwać proxy i obsługę fragmentów, ale to dobry początek.

Z płatną usługą

Najłatwiejszym i najszybszym sposobem na przeniesienie treści do wyszukiwarki jest skorzystanie z usługi Brombone , seo.js , seo4ajax i prerender.io to dobre przykłady tych, które będą hostować powyższe renderowanie treści dla Ciebie. To dobra opcja na czas, gdy nie chcemy zajmować się uruchomieniem serwera / proxy. Ponadto jest to zwykle bardzo szybkie.

Aby uzyskać więcej informacji na temat Angular i SEO, napisaliśmy obszerny samouczek na ten temat na stronie http://www.ng-newsletter.com/posts/serious-angular-seo.html i szczegółowo opisaliśmy to w naszej książce ng-book: Kompletna książka o AngularJS . Sprawdź to na ng-book.com .


1
SEO4Ajax jest również dobrym przykładem płatnej usługi (bezpłatnej w fazie beta). Niestety wygląda na to, że nie mogę edytować tej odpowiedzi, aby dodać ją do listy.
check_ca

1
@auser Czy nadal polecasz to podejście? Nowszy najczęściej głosowany komentarz wydaje się zniechęcać do takiego podejścia.
Lycha

To świetny przykład tego, dlaczego nigdy nie powinniśmy mówić takich rzeczy jak „ostateczny przewodnik” w CS :). Główne wyszukiwarki wykonują teraz Javascript, więc ta odpowiedź musi zostać przepisana lub usunięta całkowicie.
Seb

1
@seb jest to nadal potrzebne, powiedzmy, tagi otwartego wykresu, które muszą znajdować się na stronie, gdy roboty ją indeksują. Na przykład potrzebne są karty Facebooka lub Twittera. Ale ta odpowiedź powinna zostać zaktualizowana, aby skupić się na pushstate HTML5 zamiast hashbang, który jest już nieaktualny.
adriendenat

@Grsmto masz rację! Więc chyba powinien zostać przepisany, ponieważ mówi, że główne wyszukiwarki nie wykonują JS, co nie jest już prawdą.
Seb

57

Naprawdę powinieneś zapoznać się z samouczkiem na temat budowania przyjaznej SEO witryny AngularJS w roku blogu moo. Przeprowadzi cię przez wszystkie kroki opisane w dokumentacji Angulara. http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

Korzystając z tej techniki, wyszukiwarka widzi rozszerzony HTML zamiast tagów niestandardowych.


@Brad Green, nawet jeśli pytanie zostało zamknięte (z jakichkolwiek powodów), możesz być w stanie odpowiedzieć na to pytanie. Chyba coś mi brakuje: stackoverflow.com/questions/16224385/…
Christoph

41

To drastycznie się zmieniło.

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

Jeśli użyjesz: $ locationProvider.html5Mode (true); jesteś ustawiony.

Nigdy więcej renderowania stron.


3
To powinna być teraz najlepsza odpowiedź. Jesteśmy w 2014 roku i odpowiedź @joakimbl nie jest już optymalna.
Stan

11
To jest niepoprawne. Ten artykuł (od marca 2013 r.) Nic nie mówi o Bingie wykonującym javascript. Bing po prostu daje zalecenie użycia pushstate zamiast ich poprzedniego zalecenia użycia #!. Z artykułu: „Bing mówi mi, że chociaż nadal obsługują wersję #! Indeksowalnej AJAX, którą pierwotnie uruchomiła firma Google, okazuje się, że przez większość czasu nie jest ona poprawnie wdrażana i zdecydowanie zaleca zamiast tego pushState”. Nadal musisz renderować statyczny kod HTML i podawać go jako _escaped_fragment_adresy URL. Bing / Google nie będzie wykonywać wywołań javascript / AJAX.
Prerender.io

2
Nadal potrzebujesz _escaped_fragment_i renderujesz czyste strony HTML. To nic nie rozwiązuje.
Stan

Wciąż robot Google nie widzi dynamicznej zawartości mojej witryny, tylko pustą stronę.
calmbird

witryna wyszukiwania: mysite.com pokazuje {{personel}}, a nie treść ładowaną przez AngularJS. Jakby robot Google nigdy nie słyszał o JavaScript. Co mogę zrobić?
Zestaw narzędzi

17

Od czasu zadania tego pytania wiele się zmieniło. Istnieją teraz opcje umożliwiające Google zaindeksowanie Twojej witryny AngularJS. Najłatwiejszą opcją, jaką znalazłem, było skorzystanie z bezpłatnej usługi http://prerender.io , która wygeneruje dla Ciebie strony do crwalable i poda je wyszukiwarkom. Jest obsługiwany na prawie wszystkich platformach sieciowych po stronie serwera. Ostatnio zacząłem ich używać, a wsparcie jest również doskonałe.

Nie mam z nimi żadnego związku, pochodzi od szczęśliwego użytkownika.


6
Kod prerender.io znajduje się na github ( github.com/collectiveip/prerender ), więc każdy może go uruchomić na własnych serwerach.
user276648,

To jest teraz również przestarzałe. Zobacz odpowiedź @ user3330270 poniżej.
Les Hazlewood

2
To nie jest przestarzałe. Odpowiedź @ user3330270 jest nieprawidłowa. Artykuł, do którego prowadzą link, mówi po prostu, że używa pushstate zamiast # !. Nadal musisz renderować strony statyczne dla robotów, ponieważ nie wykonują one języka JavaScript.
Prerender.io

9

Własna strona internetowa Angulara udostępnia uproszczoną treść wyszukiwarkom: http://docs.angularjs.org/?_escaped_fragment_=/tutorial/step_09

Powiedz, że Twoja aplikacja Angular korzysta z interfejsu API JSON opartego na Node.js / Express /api/path/to/resource. Być może przekierować wszystkie żądania z ?_escaped_fragment_do /api/path/to/resource.htmli użyć negocjacji zawartości do renderowania szablon HTML treści, zamiast wrócić danych JSON.

Jedyną rzeczą jest to, że trasy Angular musiałyby pasować 1: 1 do interfejsu API REST.

EDYCJA : Zdaję sobie sprawę, że może to naprawdę popsuć interfejs API REST i nie polecam robić tego poza prostymi przypadkami użycia, w których może to być naturalne dopasowanie.

Zamiast tego możesz użyć zupełnie innego zestawu tras i sterowników dla treści przyjaznych robotom. Ale następnie powielasz wszystkie swoje trasy i kontrolery AngularJS w Node / Express.

Postawiłem na generowanie migawek za pomocą bezgłowej przeglądarki, mimo że uważam, że to trochę mniej niż idealne.



7

Na razie Google zmieniło propozycję indeksowania AJAX.

Czasy się zmieniły. Obecnie, o ile Google nie blokuje Googlebotowi indeksowania plików JavaScript lub CSS, jesteśmy w stanie renderować i rozumieć Twoje strony internetowe jak nowoczesne przeglądarki.

tl; dr: [Google] nie zaleca już propozycji indeksowania AJAX [Google] z 2009 roku.


@Toolkit co masz na myśli?
Thor

1
Googlebot NIE jest w stanie analizować stron Angular
Toolkit

4
@Toolkit, mówisz o absolutnej obręcz, moja pełna strona Angular została zindeksowana przez google za pomocą dynamicznych metadanych bez żadnych problemów
twigg,

@twigg masz wadliwą logikę, masz na myśli, że jeśli jedna (twoja) strona Angular została zindeksowana, wszystkie były. Mam dla ciebie niespodziankę. Żaden z moich nie został zindeksowany. Może dlatego, że używam kątowego routera interfejsu użytkownika lub kto wie dlaczego. Nawet główne strony bez danych ajax
Toolkit

@Toolkit Jeśli nawet Twoje statyczne strony HTML nie są indeksowane, nie ma to nic wspólnego z możliwością przeszukiwania plików JS przez Google. Jeśli mówisz, że Google nie może zaindeksować niczego właściwie ... myślę, że się mylisz
phil294 19.04.16

6

Przeszukiwalna specyfikacja Ajax firmy Google, o której mowa w innych odpowiedziach tutaj, jest w zasadzie odpowiedzią.

Jeśli interesuje Cię, w jaki sposób inne wyszukiwarki i boty społecznościowe radzą sobie z tymi samymi problemami, opisałem stan techniki tutaj: http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html

Pracuję dla https://ajaxsnapshots.com , firmy, która implementuje specyfikację indeksowania Ajax jako usługę - informacje w tym raporcie oparte są na obserwacjach z naszych dzienników.


Link znajduje się na liście blog.ajaxsnapshots.com
Kevin,

4

Znalazłem eleganckie rozwiązanie, które pokryłoby większość twoich baz. Początkowo pisałem o tym tutaj i odpowiedziałem na inne podobne pytanie StackOverflow , które go odwołuje.

Do Twojej dyspozycji to rozwiązanie zawiera także zakodowane tagi zastępcze na wypadek, gdyby robot nie wykrył Javascript. Nie określiłem tego wyraźnie, ale warto wspomnieć, że należy aktywować tryb HTML5, aby uzyskać poprawną obsługę adresów URL.

Uwaga: to nie są pełne pliki, tylko ważne części tych, które są istotne. Jeśli potrzebujesz pomocy w napisaniu schematu dla dyrektyw, usług itp., Które można znaleźć gdzie indziej. W każdym razie, oto idzie ...

app.js

Tutaj podajesz niestandardowe metadane dla każdej ze swoich tras (tytuł, opis itp.)

$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 (usługa)

Ustawia niestandardowe opcje metadanych lub używa domyślnych jako rezerwowych.

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 (dyrektywa)

Pakuje wyniki usługi metadanych dla widoku.

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

W komplecie z wymienionymi wcześniej tagami zastępczymi dla robotów, które nie mogą pobrać żadnego Javascript.

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

To powinno radykalnie pomóc w przypadku większości przypadków użycia wyszukiwarek. Jeśli chcesz w pełni dynamicznego renderowania dla przeszukiwaczy sieci społecznościowych (które są luźne w obsłudze Javascript), nadal będziesz musiał skorzystać z jednej z usług renderowania wstępnego wymienionych w niektórych innych odpowiedziach.

Mam nadzieję że to pomoże!


Stosuję się również do tego rozwiązania i wcześniej tak myślałem, ale chcę zapytać, czy wyszukiwarki przeczytają zawartość niestandardowych tagów.
Ravinder Payal

@RavinderPayal czy możesz sprawdzić to rozwiązanie za pomocą seoreviewtools.com/html-headings-checker
vijay


2

Dzięki Angular Universal możesz wygenerować strony docelowe aplikacji, które wyglądają jak kompletna aplikacja, a następnie załadować za nią swoją aplikację Angular.
Angular Universal generuje czysty HTML, czyli strony bez javascript po stronie serwera i bezzwłocznie udostępnia je użytkownikom. Możesz więc poradzić sobie z każdym robotem, botem i użytkownikiem (który ma już niską moc procesora i prędkość sieci), a następnie możesz przekierować je za pomocą linków / przycisków do swojej faktycznej aplikacji kątowej, która już się za nią załadowała. To rozwiązanie jest zalecane przez oficjalną stronę. -Więcej informacji o SEO i Angular Universal-


1

Przeszukiwacze (lub boty) są zaprojektowane do przeszukiwania treści HTML stron internetowych, ale z powodu operacji AJAX do asynchronicznego pobierania danych, stało się to problemem, ponieważ zajmuje trochę czasu, aby wyświetlić stronę i wyświetlić na niej zawartość dynamiczną. Podobnie AngularJSużyj również modelu asynchronicznego, który stwarza problem dla robotów Google.

Niektórzy programiści tworzą podstawowe strony HTML z prawdziwymi danymi i obsługują te strony od strony serwera podczas indeksowania. Możemy renderować te same strony przy użyciu PhantomJSstrony, która ma _escaped_fragment_(ponieważ Google szuka #!w adresach URL naszej witryny, a następnie bierze wszystko po #!i dodaje do _escaped_fragment_parametru zapytania). Aby uzyskać więcej informacji, przeczytaj ten blog .


To nie jest już prawdą począwszy od października 2017 roku, w tym podatek dochodowy kalkulator income-tax.co.uk zbudowana jest z czystych angularjs (nawet titls są jak <title> Kalkulator podatkowa za £ {{earningsSliders.yearly | numerem: 0}} wynagrodzenie </title>, które renderuje się jak „kalkulator podatkowy za wynagrodzenie w wysokości 30000 £), a Google indeksuje je, umieszczając je na pierwszej stronie pod kątem setek słów kluczowych. Wystarczy zbudować witryny dla ludzi, sprawić, by były niesamowite, a Google zajmie się resztą ;)
Kaszoni Ferencz

0

Przeszukiwacze nie potrzebują bogatego, ładnie zaprojektowanego GUI, chcą tylko zobaczyć zawartość , więc nie musisz im przedstawiać migawki strony stworzonej dla ludzi.

Moje rozwiązanie: dać robotowi to, czego chce robot :

Musisz pomyśleć o tym, czego chce robot i dać mu tylko to.

WSKAZÓWKA nie zadzieraj z plecami. Wystarczy dodać mały widok z przodu serwera przy użyciu tego samego interfejsu API

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.