Jak sprawić, by AngularJS był niesamowity dzięki SEO
- Hashbangs #!
- Dodaj hashbang w konfiguracji AngularJS
- Wskazówki PhantomJS
- Poinformuj przeglądarkę bezgłową, kiedy będzie gotowa
- Wtyczki zmieniające DOM
- Sprawdź wynik
- Końcowe przemyślenia
AngularJS jest obecnie jedną z najszybciej rozwijających się struktur Javascript na rynku, a wszystkie strony oparte na Javascript stoją przed tym samym problemem, jeśli chodzi o indeksowanie wstępnie renderowanego HTML. Na szczęście istnieją sposoby na to dzięki specjalnemu routingowi URL.
Po raz pierwszy spotkałem się z tym problemem, kiedy wydałem pierwszą witrynę AngularJS DingScore , Zauważyłem, że Google lub Bing w ogóle nie indeksował moich podstron, nawet z mapą strony XML. Strona główna pojawiła się jako {{title}} i nic dziwnego, że tak było w HTML.
Mamy tu do czynienia z 2 głównymi problemami
- Wyszukiwarki nie wydają się wiedzieć, że to w rzeczywistości dwie różne strony. http://dingscore.com/#/livescore/livenow http://dingscore.com/#/livescore/International/13
- Nie ma wykonywania Javascript od robotów indeksujących, więc jeśli masz <title> {{title}} </title> w swoim html, zobaczą to w ten sposób. Nie wynik, jaki chcielibyśmy
Aby zademonstrować, zrobiłem zrzut ekranu 
Ta witryna ma około 150 unikalnych adresów URL i dodałem je wszystkie w narzędziach dla webmasterów Google, które uznały, że to wystarczy, ale nie.
Hashbangs #!
Jeśli nigdy wcześniej nie słyszałeś słowa hashbang ( nie hastag ), nie martw się. Ja też nie. Zasadniczo jest to sposób (jedyny sposób) informowania wyszukiwarek, że bieżąca strona jest dostępna pod bieżącym adresem URL zawierającym załadowaną zawartość AJAX.
Tak więc teraz byłyby dwa poprzednie adresy URL
http://dingscore.com/#!/livescore/livenow http://dingscore.com/#!/livescore/International/13
Google i Bing będą teraz konwertować te dwa adresy URL na specjalny adres URL, który będzie dostępny dla serwera. Następnie roboty indeksujące odwiedzą przekonwertowane adresy URL.
Dwa specjalne przekonwertowane adresy URL, które będą indeksowane przez Google i Bing
http://dingscore.com/?_escaped_fragment_=/livescore/livenow http://dingscore.com/?_escaped_fragment_=/livescore/International/13
Więc teraz widzisz, że masz coś, co możesz pracować ze stroną serwera i możesz zacząć generować renderowane migawki HTML. Stworzyłem regułę przepisywania w .htaccess i użyłem PhanthomJS aby utworzyć migawki.
Oto mój przykład z mod_rewrite z Apache:
RewriteEngine On Options + FollowSymLinks RewriteCond% {REQUEST_URI} ^ / $ RewriteCond% {QUERY_STRING} ^ _escaped_fragment _ = /? (. *) $ RewriteRule ^ (. *) $ / Snapshots /% 1? [NC, L]
Gdy robot indeksujący konwertuje hashbang (#!) Na? _Escaped_fragment_ =, musisz upewnić się, że migawka istnieje. Mam cronjob skanujący moją stronę co 2 godziny i aktualizujący migawki za pomocą PhantomJS.
Dodaj hashbang w konfiguracji AngularJS
Wszystko, co musisz zrobić, to poinstruować AngularJS, aby używał ich zamiast zwykłego skrótu. Po prostu dodaj jeden wiersz kodu w konfiguracji routingu
.config (['$ routeProvider', '$ locationProvider', funkcja ($ routeProvider, $ location) {$ location.hashPrefix ('!'); ....
Wskazówki PhantomJS
Blokowanie Analytics
Jedna rzecz, którą zauważyłem, gdy zacząłem indeksować moją witrynę za pomocą PhantomJS, to fakt, że mój Google Analyics zwariował na punkcie ruchu. Oczywiście nie jest to tak zaskakujące, ponieważ wykonywanie wszelkiego rodzaju skryptów JavaScript w celu pobrania zawartości AJAX również spowoduje wyświetlenie statystyk, w moim przypadku Google Analytics. Dodałem request.abort () do całego ruchu analytics.js w skrypcie.
page.onResourceRequested = funkcja (requestData, request) {if ((/analytics.js/gi).test(requestData['url '])) {request.abort (); }};
Poinformuj przeglądarkę bezgłową, kiedy będzie gotowa
Musisz także powiedzieć skryptowi, że strona jest gotowa do migawki, PhantomJS nie będzie wiedział, kiedy cała zawartość AJAX jest załadowana lub gdy DOM jest ostateczny. Więc musisz ustawić flagę i zaktualizować flagę, gdy wszystkie twoje żądania XHR zakończyły swoje zadania.
<body data-status = "{{status}}"> </body>
A następnie dodaj coś takiego do kontrolerów, gdy oczekujesz, że strona będzie gotowa
$ scope.status = "ready";
Wtyczki zmieniające DOM
Najpierw przychodzi mi do głowy popularna czcionka JavaScript, która zastępuje wtyczkę Cufon . Nie jestem pewien, ile jeszcze go używa, ale masz pomysł. Wszystkie wtyczki zmieniające DOM najlepiej wyłączyć, gdy robisz migawki.
<h1> Tytuł SEO </h1>
A cufon całkowicie zmieni DOM i zakłóci wyniki SEO
<h1> <cufon class = "cufon cufon-canvas" alt = "SEO" style = "szerokość: 92px; wysokość: 32px;"> <szerokość płótna = "117" wysokość = "37" styl = "szerokość: 117px; wysokość: 37px; top: -4px; left: -2px; "> </canvas> <cufontext> SEO </cufontext> </cufon> <cufon class =" cufon cufon-canvas "alt =" Title "style =" width: 93px; height: 32px; "> <canvas width =" 111 "height =" 37 "style =" width: 111px; height: 37px; top: -4px; left: -2px; "> </canvas> < cufontext> Title </cufontext> </cufon> </h1>
Sprawdź wynik
Po tym wszystkim zauważyłem po 2 dniach, że moje strony są poprawnie indeksowane
Adres URL witryny:
http://dingscore.com/#!/livescore/livenow
Adres URL indeksowania:
http://dingscore.com/?_escaped_fragment_=/livescore/livenow
Adres URL migawki:
http://dingscore.com/snapshots/livescore/livenow.html
Końcowe przemyślenia
Moja ostatnia myśl dotyczy tego, czy strona internetowa AngularJS (opracowana przez Google) będzie miała lepszy wpływ na ranking, a następnie na przykład blog WordPress o podobnej treści i pracy SEO?
Com/?Com/?
RewriteRule ^ (. *) $ / Snapshots /% 1?
Com/?