Przewodnik dla programistów do wykonywania SEO na AngularJS Web Apps

Indeksowanie aplikacji AngularJS
Nowoczesne wyszukiwarki i adres URL aplikacji po stronie klienta
Tworzenie trybów routingu HTML5 zamiast Hashbangów
Obsługa SEO ze strony serwera za pomocą ExpressJS
Robienie zdjęć przy użyciu Node.JS
Ważne są również mapy witryn

Przed 23 maja 2014 r., Gdybyś poprosił mnie o utworzenie dla Ciebie witryny JavaScript z wyszukiwarką i botem, chciałbym cię zniechęcić. Teraz, gdybyś mnie zapytał, powiedziałbym ci, że tak jest.
Prawie wszystkie frameworki JavaScript MVC, które zawierają AngularJS, modyfikują wewnętrzną zawartość struktury HTML. Służyło to do utrudnienia indeksowania wstępnie renderowanego kodu HTML w wyszukiwarkach. Jednak wraz z rozwojem technologii Google i inne wyszukiwarki są lepsze zrozumienie stron internetowych . Bot-Crawling JavaScript, a dokładniej JS, nie jest już poważnym problemem, a zawartość coraz większej liczby aplikacji internetowych jest indeksowana przez wyszukiwarki.
To świetna wiadomość dla webmasterów, jednak sam Google zaleca, aby zachować ostrożność.

„Zawsze jest dobrym pomysłem, aby Twoja strona uległa pogorszeniu. Pomoże to użytkownikom cieszyć się treścią, nawet jeśli ich przeglądarka nie ma kompatybilnych implementacji JavaScript. Pomoże także odwiedzającym z wyłączonym lub wyłączonym JavaScriptem, a także wyszukiwarkom, które nie mogą jeszcze uruchomić JavaScript. ” Google.

Nadal więc nie ma czasu na porzucanie starych sztuczek zoptymalizowanych pod kątem wyszukiwarek JavaScript. Istnieje wiele sposobów, w jakie dawni webmasterzy wykorzystują pełne wsparcie SEO dla AngularJS i innych aplikacji. Ale według mnie najlepszą metodą na przyjazne JS SEO jest użycie specjalnego routingu URL i stworzenie bezgłosowej przeglądarki do automatycznego pobierania HTML.

Indeksowanie aplikacji AngularJS

Chociaż Google indeksuje Twoje treści automatycznie, możesz dostosować właściwości renderowania treści w taki sposób, aby Google Bots indeksowały treść dokładnie tak, jak chcesz. Jedna z najprostszych technik, aby to osiągnąć, obsługując zawartość Angular JS za pośrednictwem niestandardowego serwera zaplecza.

Nowoczesne wyszukiwarki i adres URL aplikacji po stronie klienta

Aby ułatwić indeksowanie treści aplikacji internetowych, Google i inne wyszukiwarki udostępniły webmasterom funkcję formatu adresu URL hashbang . Ilekroć wyszukiwarka napotka URL hashbag, tj. URL zawierający #! ' konwertuje go na adres URL ? _escaped_fragment_ =, w którym znajduje pełną renderowaną treść HTML gotową do indeksowania.

Na przykład Google zmieni adres URL hashbang z: http://www.example.com/#!/page/content W adres URL: http://www.example.com/?_escaped_fragment_=/page/content

W drugim adresie URL, który nie jest pierwotnie wyświetlany odwiedzającym witrynę, wyszukiwarka znajdzie zawartość inną niż JS, która byłaby łatwa do indeksowania.
Teraz następnym krokiem jest uczynienie twojej aplikacji wystarczająco inteligentną, aby kiedy bot wyszukiwarki wyszukiwał drugi adres URL, serwer powinien zwrócić niezbędne migawki HTML strony. Więc musisz skonfigurować następujący specjalny URL przekierowujący / przepisujący dla twojej aplikacji.

RewriteEngine On RewriteCond% {REQUEST_URI} ^ / $ RewriteCond% {QUERY_STRING} ^ _escaped_fragment _ = /? (. *) $ RewriteRule ^ (. *) $ / Snapshots /% 1? [NC, L]

Tutaj możesz zauważyć, że ustawiliśmy specjalny katalog migawek jako adres URL przekierowania. Ten katalog będzie zawierał migawki HTML odpowiednich stron aplikacji. Możesz skonfigurować swój własny katalog i wprowadzić odpowiednie zmiany.

Kolejnym problemem do rozwiązania jest poinstruowanie AngularJS, aby używał skrótów. Kątowe domyślnie wydzielaj adresy URL z tylko # zamiast #! . Aby zrobić Angulara, wystarczy dodać następujący moduł jako zależność z podstawowymi modułami Angular

angular.module ('HashBangURLs', []). config (['$ locationProvider', funkcja ($ location) {$ location.hashPrefix ('!');}]);

Tworzenie trybów routingu HTML5 zamiast Hashbangów

Czy wspominaliśmy, że HTML5 jest niesamowity? No cóż, tak jest. Tak więc, wraz z wspomnianą powyżej techniką Hashbang, kombinacja HTML5 i AngularJS daje nam jeszcze jeden hak do oszukania wyszukiwarek do parsowania adresów URL ? _Escaped_fragment_ , bez używania adresów URL Hashbang.
Aby to zrobić, najpierw musisz poinstruować Google, że faktycznie używamy treści AJAX, a bot powinien odwiedzić ten sam adres URL przy użyciu składni _escaped_fragment_. Możesz to zrobić, dołączając następującą metę do kodu HTML.

Następnie musielibyśmy skonfigurować AngularJS, aby korzystał z adresów URL HTML5 zawsze i wszędzie, gdzie musiał obsługiwać adresy URL i routing. Możesz to zrobić, dodając następujący kod AnglarJS do swojego kodu

angular.module ('HTML5ModeURLs', []). config (['$ routeProvider', funkcja ($ route) {$ route.html5Mode (true);}]);

Obsługa SEO ze strony serwera za pomocą ExpressJS

W naszych poprzednich postach rozmawialiśmy o niesamowitości ExpressJS jako nasz framework JavaScript / nodeJS po stronie serwera . Możesz także użyć ExpressJS do naszego przekierowania po stronie serwera zamiast Apache.
Aby framewor ExpressJS dostarczał statyczny HTML, musimy najpierw skonfigurować oprogramowanie pośrednie, które będzie szukać _escaped_fragment_ w naszych wejściowych adresach URL. Po znalezieniu natychmiast wyświetli migawki HTML.

// W naszej konfiguracji app.js app.use (funkcja (req, res, next) {var fragment = req.query._escaped_fragment_; // Jeśli nie ma fragmentu w parametrach zapytania // to nie obsługujemy crawler if (! fragment) return next (); // Jeśli fragment jest pusty, podaj // stronę indeksu if (fragment === "" || fragment === "/") fragment = "/index.html "; // Jeśli fragment nie zaczyna się od '/' // dodaj go do naszego fragmentu jeśli (fragment.charAt (0)! ==" / ") fragment = '/' + fragment; // Jeśli fragment się nie kończy z '.html' // dołącz do fragmentu if (fragment.indexOf ('. html') == -1) fragment + = ".html"; // Podaj statyczną migawkę html try {var plik = __dirname + "/ snapshots" + fragment; res.sendfile (plik);} catch (err) {res.send (404);}});

Ponownie ustawiliśmy nasze migawki w katalogu najwyższego poziomu o nazwie „/ snapshot” . ExpressJS bierze również pod uwagę możliwość, że renderowany URL wyszukiwarki-silnika-bota nie ma prostych funkcji składniowych, takich jak '/' lub '.html' , a zatem zapewnia botowi odpowiednią część.

Robienie zdjęć przy użyciu Node.JS

Na rynku dostępnych jest wiele narzędzi, których można używać do robienia migawek HTML swojej aplikacji internetowej, z których Zombie.JS i Phantom.JS są najczęściej używane. Te migawki są tym, co wrócilibyśmy, gdy Google zażąda adresu URL z zapytaniem _escaped_fragment_ .

Ideą PhantomJS, a nawet ZombieJS jest stworzenie bezgłowej przeglądarki, która uzyskuje dostęp do zwykłego adresu URL strony internetowej aplikacji, pobiera renderowaną treść HTML po jej pełnym wykonaniu, a następnie zwraca ostateczny kod HTML w pliku tymczasowym.
Jest tam wiele zasobów, które możesz poprowadzić Cię, jak zrobić to doskonale samemu

Więc nie wchodzimy w szczegóły na ten temat. Jednak z pewnością chcielibyśmy wyróżnić narzędzie open source, którego używasz do robienia migawek HTML, Prerender.IO . Możesz go użyć jako usługi lub możesz zainstalować go na swoim własnym serwerze, ponieważ projekt jest otwarty i dostępny GitHub

Jednak to, co jest jeszcze łatwiejsze, to narzędzie o nazwie Grunt-html-snapshot i zgadnij, gdzie można je znaleźć, Node.JS.

NodeJS jest dostarczany w komplecie z narzędziem Grunt i można go łatwo używać do tworzenia własnych zrzutów ekranu bez kłopotów. Oto kroki, aby skonfigurować gruntowne narzędzie i zacząć generować HTML

Najpierw zainstaluj NodeJS. Możesz go pobrać z http://nodejs.org . Wraz z węzłem zainstaluj także npm (menedżer pakietów węzłów). Dla użytkowników komputerów Mac i Windows NodeJS jest dostępny jako kliknięcie i instalacja aplikacji. Użytkownicy Ubuntu musieliby rozpakować plik tar.gz, a następnie zainstalować go z terminalu komend. Osoby z najnowszą wersją Ubuntu mogą również zainstalować za pomocą sudo apt-get install polecenie nodejs nodejs-dev npm . Npm jest wyposażony w Grunt
Otwórz konsolę poleceń i przejdź do folderu projektu.
Aby zainstalować narzędzie Grunt globalnie, uruchom polecenie: npm install -g grunt-cli
Możesz także zainstalować lokalną kopię Grunta i jego niezbędną funkcję migawki HTML za pomocą polecenia npm install grunt-html-snapshot –save-dev
Następnym krokiem jest stworzenie własnego gruntowego pliku javascript Gruntfile.js. Plik JS będzie miał następujący kod

module.exports = function (grunt) {grunt.loadNpmTasks ('grunt-html-snapshot'); grunt.initConfig ({htmlSnapshot: {all: {options: {snapshotPath: '/ project / snapshots /', sitePath: 'http://example.com/my-website/', urls: ['#! / page1' , '#! / page2', '#! / page3'] sanitize: function (requestUri) {// zwraca 'index.html', jeśli adres URL to '/', w przeciwnym razie prefiks if (// $ /. test ( requestUri)) {return 'index.html';} else {return requestUri.replace (/// g, 'prefix-');}}, // jeśli nie chcesz trzymać tagów skryptów w migawkach html // ustaw `removeScripts` na true, domyślnie falsesScripts: true,}}}}); grunt.registerTask ('default', ['htmlSnapshot']); };

Kiedy już to zrobisz, możesz uruchomić zadanie za pomocą polecenia grunt htmlSnapshot

Narzędzie Grunt ma kilka dodatkowych funkcji, które pominęliśmy tutaj. Możesz dowiedzieć się o nich więcej na stronie grunt-html-snapshot strona. Można również zauważyć, że podajemy ścieżkę do strony aplikacji internetowej w zadaniu, więc aby działała poprawnie, należy najpierw skonfigurować witrynę na serwerze, a następnie wskazać zadanie na poprawne adresy URL. Również migawka tutaj jest automatycznie zapisywana w ścieżce / projekcie / migawkach / , możesz ją zmienić zgodnie ze swoimi wymaganiami.

Ważne są również mapy witryn

Aby uzyskać lepszą kontrolę nad tym, jak boty wyszukiwarek uzyskują dostęp do Twojej witryny, musisz również dostosować mapę witryny. Za każdym razem, gdy bot wyszukiwarki znajdzie example.com/sitemap.xml, podąża za linkami podanymi w mapie witryny, zanim ślepo prześledzi wszystkie linki na stronie. Jest to najlepszy sposób, jeśli chcesz zaindeksować stronę, która nie jest połączona z żadną inną stroną, na przykład strony docelowe kampanii mailerowej, chociaż ta praktyka nie jest mile widziana.
W przypadku treści AJAX najlepiej jest wymienić wszystkie strony / adresy URL generowane przez aplikację, aby wyszukiwarki odpowiednio je indeksowały, nawet jeśli aplikacja jest aplikacją pojedynczej strony. Oto przykładowa mapa witryny

<urlset xmlns = "http://www.sitemaps.org/schemas/sitemap/0.9"> ... <url> <loc> http://www.yourwebsite.com/#!/page1 </loc> < changefreq> daily </changefreq> <priority> 1.0 </priority> </url> <url> <loc> http://www.yourwebsite.com/#!/page2 </loc> <changefreq> codziennie </ changefreq > <priority> 1.0 </priority> </url> <url> <loc> http://www.yourwebsite.com/#!/page3 </loc> <changefreq> codziennie </changefreq> <priority> 1.0 < / priority> </url> ... </urlset>

AngularJS Awesomeness

Gdy przeszkoda braku indeksowalności zniknie z drogi, nie ma powodu, dla którego nie można tworzyć całych stron internetowych za pomocą JavaScript. Ludzie już mocno polegają na JS i trend się nie skończy. Wcześniej głównym problemem był HTML, ale teraz dzięki rozwiązaniu zindeksowanej treści AJAX możesz zrobić prawie wszystko. Idź latać.

Następujące dwie karty zmieniają zawartość poniżej.

Rachit jest liderem w dziedzinie rozwoju mobilności, strategii mobilności i praktyki konsultingowej w Algoworks. Jest ekspertem we wszystkich technologiach mobilnych i ma doświadczenie w zarządzaniu zespołami zaangażowanymi w rozwój niestandardowych aplikacji na iPhone'a / iPada / Androida.