AngularJS: Indeks i doładuj swoje SEO

1. Chcesz pobrać te instrukcje i cały kod w pliku PDF?
2. AngularJS and SEO: problem
3. AngularJS and SEO: rozwiązanie
4. Krok pierwszy: Generuj migawki
5. Krok 2: Instalacja serwera
6. 1 - Zainstaluj NPM i NodeJS
7. 2 - Zainstaluj na zawsze
8. 3 - Zainstaluj i uruchom Prerender.io
9. 4 - Zainstaluj serwer Redis
10. 5 - Spraw, by Prerender używał serwera Redis do buforowania migawek
11. Krok 3: Konfiguracja serwera
12. Krok 4: Konfiguracja aplikacji
13. Krok 5: Przetestuj serwer Prerender
14. Krok 6: Dodaj mapę witryny
15. Wniosek

AngularJS jest dobrą strukturą do tworzenia stron internetowych i aplikacji, ponieważ czyni je znacznie szybszymi i bogatszymi dla użytkowników.

Ale każdy programista napotyka na jeden problem, pchając swój produkt AngularJS: Optymalizacja wyszukiwarek lub SEO.

Jakość SEO oznacza znalezienie się pośród całego hałasu online. Gdy witryna lub aplikacja jest zoptymalizowana pod kątem wyszukiwania, jest bardziej prawdopodobne, że znajdą ją potencjalni użytkownicy. Jeśli nie jest zoptymalizowany, deweloper może równie dobrze krzyczeć na wietrze - brak ekspozycji i brak użytkowników są prawie gwarancjami.

Obecnie najpowszechniejszymi technikami ograniczania tego problemu jest albo budowanie oddzielnych wersji aplikacji lub witryny dla wyszukiwarek, albo wstępne renderowanie stron na serwerze. Problem z tymi rozwiązaniami polega jednak na tym, że trzeba utrzymywać dwa oddzielne systemy: jeden dla użytkowników, a drugi dla Google i innych wyszukiwarek.

Podczas gdy Google próbował pomóc programistom, ulepszając ich zdolność do indeksowania JavaScript i CSS, ale nawet jeśli Wysiłki Google na rzecz indeksowania JavaScript od 2014 roku są zaawansowane, nie oznacza to, że Twoja aplikacja zostanie poprawnie zaindeksowana. W rzeczywistości Google nadal zaleca tworzenie migawek aby umożliwić indeksowanie aplikacji AJAX .

Ale jak dokładnie powstają te migawki? W jaki sposób deweloper może mieć pewność, że jego aplikacja lub witryna AngularJS jest poprawnie i całkowicie zaindeksowana przez Google?

W tym poście prezentujemy bezpłatne i samodzielne rozwiązanie do generowania migawek oraz upewnienia się, że witryna lub aplikacja AngularJS jest indeksowana przez, indeksowana i zoptymalizowana dla Google.

Chcesz pobrać te instrukcje i cały kod w pliku PDF?

Wpisz swój adres e-mail i pobierz go za darmo!

AngularJS and SEO: problem

Przeszukiwacze wyszukiwarek zostały pierwotnie zaprojektowane do indeksowania treści HTML stron internetowych.

Dziś jednak JavaScript i inne struktury, takie jak AngularJS i BackboneJS, odgrywają wiodącą rolę w tworzeniu stron internetowych i tworzeniu treści i aplikacji online.

Niestety, roboty indeksujące i inne mechanizmy indeksowania za wyszukiwarkami pozostają zdecydowanie nieprzyjazne dla witryn opartych na JavaScript.

AngularJS and SEO: rozwiązanie

Przezwyciężenie problemu z indeksowaniem nie jest trudne, gdy programiści wykorzystują tzw. Migawki.

Migawki to termin odnoszący się do treści generowanych dla robotów wyszukiwarek na zapleczu witryny. Idea migawek polega na tym, że deweloper wykonuje pracę dla robota, której nie może lub nie chce wykonywać samodzielnie. Optymalizacja i buforowanie migawek nie tylko pomaga indeksować, ale także znacznie zwiększa szybkość indeksacji.

Ważna uwaga: indeksacja JavaScript ma obecnie zastosowanie tylko do robota Google. Inne przeszukiwacze (takie jak wyszukiwarki Bing firmy Microsoft) nie obsługują jeszcze przeszukiwania aplikacji JavaScript. Ponadto, mimo że treści internetowe są coraz częściej udostępniane sieciom społecznościowym, takim jak Facebook i Twitter, większość robotów społecznościowych również nie obsługuje JavaScript.

Jak więc generować migawki i jak z nimi pracować, aby mieć pewność, że są indeksowane?

Zapoznaj się z przewodnikiem krok po kroku.

Krok pierwszy: Generuj migawki

Pierwszym krokiem jest wygenerowanie samych migawek.

Aby to zrobić, potrzebujemy dostępu do serwera migawek opartego na a przeglądarka bezgłowa takich jak PhantomJS lub ZombieJS. W tym przykładzie użyjemy oprogramowania pośredniego typu open source Prerender który już pakuje PhantomJS i jest gotowy do obsługi naszych specjalnych żądań przeszukiwaczy i obsługi migawek HTML.

Aby skrócić czas potrzebny na wygenerowanie migawek, można wykorzystać pamięć podręczną. Migawki są buforowane na serwerze Redis za pierwszym razem, gdy są wymagane, a następnie ponownie buforowane raz dziennie (uwaga: można to skonfigurować ręcznie do własnych potrzeb), aby upewnić się, że treść pozostaje aktualna. W rezultacie statyczna migawka jest zawsze i natychmiast dostępna do udostępnienia przeszukiwaczowi.

Krok 2: Instalacja serwera

W tym przykładzie użyjemy serwera Apache uruchomionego na Ubuntu 14.04.2 LTS.

Jest tutaj pięć pod-kroków do wykonania.

1 - Zainstaluj NPM i NodeJS

sudo apt-get update sudo apt-get install nodejs npm ln -s / usr / bin / nodejs / usr / bin / node

2 - Zainstaluj na zawsze

npm zainstaluj na zawsze -g

3 - Zainstaluj i uruchom Prerender.io

git clone https://github.com/prerender/prerender.git cd prerender npm install

Upewnij się, że serwer zaczyna się od 4001 i że PhantomJS jest włączony 4002.

Możesz edytować ten plik, jeśli chcesz zmienić port:

/lib/index.js

Wróć do folderu Prerender i uruchom serwer na zawsze - pomoże to w ciągłym uruchamianiu serwera w tle.

forever uruchom server.js

4 - Zainstaluj serwer Redis

Dodaj repozytoria Dotdeb do źródeł APT. Aby to zrobić, utwórz nowy plik listy w /etc/apt/sources.list.d/ i wypełnij go następującą treścią:

# /etc/apt/sources.list.d/dotdeb.org.list deb http://packages.dotdeb.org squeeze all deb-src http://packages.dotdeb.org squeeze all

Następnie musisz uwierzytelnić te repozytoria przy użyciu klucza publicznego:

wget -q -O - http://www.dotdeb.org/dotdeb.gpg | sudo apt-key add -

Następnie zainstaluj Redis za pomocą apt-get:

sudo apt-get update sudo apt-get zainstaluj redis-server

Następnie włącz usługę Redis, aby rozpocząć rozruch:

sudo service redis_6379 start sudo service redis_6379 stop

Następnie powinieneś sprawdzić status Redis:

$ redis-cli ping

Otrzymasz „PONG”, jeśli wszystko będzie w porządku.

5 - Spraw, by Prerender używał serwera Redis do buforowania migawek

Prerender ma otwarty moduł źródłowy, Prerender-Redis-Cache , co ułatwia wykonywanie tego zadania.

W lokalnym projekcie prerender (prerender / server.js) uruchom:

$ npm install prerender-redis-cache --save

Następnie dodaj te dwie linie w prerender / server.js:

process.env.PAGE_TTL = 3600 * 24 * 5; // zmień na 0, jeśli chcesz buforować cały czas server.use (require ('prerender-redis-cache'));

Uruchom ponownie Prerender przez:

na zawsze stopall na zawsze uruchom server.js

A jeśli chcesz wyczyścić całą pamięć podręczną REDIS, możesz użyć:

redis-cli -p 6379 flushall

Krok 3: Konfiguracja serwera

Teraz przekierujemy roboty indeksujące na lokalny serwer Prerender za pomocą prostego pliku .htaccess.

Ten plik htaccess zawiera wszystkie konfiguracje przekierowań. Zauważ, że plik .htaccess musi znajdować się w tym samym katalogu, co główny plik index.html AngularJS.

<IfModule mod_rewrite.c> RewriteEngine On Options + FollowSymLinks # przekieruj inne niż www na www RewriteCond% {HTTP_HOST}! ^ Www RewriteRule ^ (. *) $ Http: //www.% {HTTP_HOST} / $ 1 [R = 301, L] # Nie przepisuj plików lub katalogów RewriteCond% {REQUEST_FILENAME} -f [OR] RewriteCond% {REQUEST_FILENAME} - d RewriteRule ^ - [L] # Lista wszystkich robotów i botów możesz dodać więcej RewriteCond% {HTTP_USER_AGENT} Googlebot | bingbot | Googlebot-Mobile | Baiduspider | Yahoo | YahooSeeker | DoCoMo | Twitterbot | TweetmemeBot | Twikle | Netseer | Daumoa | SeznamBot | Ezooms | MSNBot | Exabot | MJ12bot | sogou spider | YandexBot | bitlybot | ia_archiver | proximic | spbot | ChangeDetection | NaverBot | MetaJobBot | magpie-crawler | Genieo sWeb filtr | Qualidator.com SBot | Woko | Vagabondo | 360Spider | ExB język sCrawler | AddThis.com | aiHitBot | Spinn3r | BingPreview | GrapeshotCrawler | Kariera | ZumBot | ShopWiki | bixocrawler | uMBot | sistrix | linkdexbot | AhrefsBot | archiwum ! | Plukkie | yacybot | trendictionbot | UASlinkChecker | Blekkobot | Wotbox | YioopBot | meanpathbot | TinEye | LuminateBot | FyberSpider | Infohelfer | linkdex.com | Ciekawy George | Fetch-Gue ss | ichiro | MojeekBot | SBSearch | WebThumbnail | socialbm_bot | SemrushBot | Vedma | alexa site saudit | SEOkicks-Robot | Browsershots | BLEXBot | woriobot | AMZNKAssocBot | Speedy | oBot | HostTracker | OpenWebSpider | WBSearchBot | FacebookExternalHit | quora podgląd | showyoubot | outbrain | pinterest | slackbot | vkShare | W3C_Validator [NC, OR] RewriteCond% {QUERY_STRING} _escaped_fragment_ # Tylko proxy dla Prerender, jeśli jest to żądanie HTML RewriteRule ^ (?!. *? (js | .css | .xml | bez | png | jpg | jpeg | gif | pdf | .doc | .txt | .ico | rs | zip | mp3 | rar | exe | wmv | doc | .avi | ppt | .mpg | mpeg | .tif | .wav | mov | .psd | .ai | .xls | .mp4 | m4a | .swf | .dat | .dmg | .iso | .flv | .m4v | torrent)) ( . *) http://www.mydomain.com:4001/http://www.mydomain.com/$2 [P, L] # Przepisz wszystko inne do index.html, aby zezwolić na linki stanu html5 RewriteRule ^ index.html [ L] </IfModule>

Zakończono już wszystkie zadania instalacji po stronie serwera, więc nadszedł czas, aby skonfigurować aplikację AngularJS.

Krok 4: Konfiguracja aplikacji

Najpierw otwórz plik index.html Angularjs i:

1. upewnij się, że masz <base href = ”/”> przed </head>
2. dodaj <meta name = ”fragment” content = ”!”> między <head> </head> (dodając ten tag do strony www.example.com, robot tymczasowo połączy ten adres URL z www.example.com? _escaped_fragment_ = i zażąda tego od twojego serwera)

Po drugie, aktywuj tryb HTML5.

W pliku config.js dodaj:

$ locationProvider.html5Mode (true);

Dzięki temu aplikacja będzie korzystać z formatu URL HTML5.

Adresy URL zazwyczaj wyglądają tak http://www.example.com/directory/page . Domyślnie elementy AngularJS będą miały takie adresy URL: http://www.example.com/#!/directory/page

var app = angular.module ('app') .config (['$ httpProvider', '$ locationProvider', funkcja ($ httpProvider, $ locationProvider) {// użyj API historii HTML5 $ locationProvider.html5Mode (true);…

Po trzecie, musisz zarządzać metatagami.

Aby poprawić SEO swojej aplikacji lub witryny, musisz mieć unikalny tytuł i opis dla każdej strony. Wywołany moduł AngularJS AngularJS-View-Head już istnieje, aby rozwiązać ten problem. Ten moduł pomoże nam zmienić tytuł HTML i elementy głowy na podstawie widoku.

Jak to działasz w praktyce?

Zacznij od zainstalowania tego modułu za pomocą altany.

Następnie zadeklaruj moduł jako zależność aplikacji:

var app = angular.module ('myApp', ['ng', 'viewhead']);

Dzięki temu dostępne są dyrektywy opisane w szablonie HTML.

Na koniec dodaj metatagi w swoim szablonie.

<view-title> {{artist.title}} </view-title> <meta view-head name = "description" content = "{{'SEO.ARTIST.DESCRIPTION" | przetłumacz: {artist: artist.name, artist_ar: artist.name_ar}}} "/> <! - Open Graph data ---> <meta view-head property =" og: title "content =" {{artist.name}} "/> <meta view -head property = "og: type" content = "article" /> <meta view-head property = "og: url" content = "http://www.example.com/artist/{{artist.slug}} "/> <meta view-head property =" og: image "content =" {{artist.photo}} "/> <meta view-head property =" og: description "content =" {{artist.description}} „/>

Krok 5: Przetestuj serwer Prerender

Jeśli wykonałeś wszystkie kroki, wszystko powinno działać dobrze. Jednak lepiej, niż przepraszam, czas na testy.

Porównaj źródło jednej ze swoich stron z i bez _escaped_fragment_ w adresie URL.

Możesz sprawdzić określone trasy w przeglądarce i porównać:

http://www.example.com/directory/page
http://www.example.com/directory/page?_escaped_fragment_=

Krok 6: Dodaj mapę witryny

Ostatnim krokiem w strategii SEO AngularJS jest opracowanie mapy witryny.

Aby pomóc wyszukiwarkom indeksować Twoją aplikację lub witrynę i zapewnić szybkie indeksowanie stron, musisz utworzyć mapę witryny dla wszystkich tras. Wydaje się to trudne, jednak dzięki odpowiednim procesom budowania można to zautomatyzować za pomocą narzędzia takiego jak Grunt.

(Heads up: wkrótce opublikujemy kolejny post wyjaśniający, jak zautomatyzować mapę witryny za pomocą Grunt!)

Wniosek

Konieczne jest upewnienie się, że wyszukiwarki i - poprzez wyszukiwania - użytkownicy mogą znaleźć Twoją aplikację lub witrynę. Strategia przedstawiona w tym poście jest szybka do wdrożenia, skalowalna i łatwa w utrzymaniu, a tam, gdzie jest stosowana, powinna pomóc w nawiązaniu potrzebnych połączeń i wygraniu pożądanych użytkowników.