AngularJS SEO z Prerender.io

Problem
Rozwiązanie
Co będziemy budować
Jak to działa
O Prerender.io
Pakiet konfiguracyjny węzła.json
Serwer konfiguracji węzła.js
Strona główna index.html
Instalacja kątowa app.js
Więc co się dzieje?
Sprawia, że to działało
Ostrzeżenia
Wniosek

AngularJS to doskonała platforma do tworzenia stron internetowych i aplikacji. Wbudowany routing, powiązanie danych i dyrektywy, między innymi, umożliwiają AngularJS całkowite obsłużenie frontonu dowolnego typu aplikacji.

Jedną z pułapek korzystania z AngularJS (na razie) jest Search Engine Optimization (SEO). W tym samouczku omówimy, w jaki sposób Google może przeszukiwać witrynę lub aplikację AngularJS.

Problem

Wyszukiwarki (lub roboty) były pierwotnie zaprojektowane do indeksowania treści HTML stron internetowych. Wraz z rozwojem Internetu technologie zasilające strony internetowe i JavaScript stały się de facto językiem sieci. AJAX zezwala na asynchroniczne operacje w sieci. AngularJS w pełni obejmuje model asynchroniczny i to stwarza problemy dla robotów Google.

[ ] [1]

Jeśli w pełni wykorzystujesz AngularJS, istnieje duże prawdopodobieństwo, że będziesz miał tylko jedną prawdziwą stronę HTML, która będzie asynchronicznie dostarczać częściowe widoki HTML. Cała logika routingu i aplikacji jest wykonywana po stronie klienta, więc niezależnie od tego, czy zmieniasz strony, publikujesz komentarze, czy wykonujesz inne operacje CRUD, robisz to wszystko z jednej strony.

Rozwiązanie

Bądź pewny, Google ma sposób na indeksowanie aplikacji AJAX, a Twoja aplikacja AngularJS może być indeksowana , indeksowana i pojawiać się w wynikach wyszukiwania tak jak każda inna strona. Istnieje kilka ograniczeń i dodatkowych kroków, które trzeba wykonać, ale te metody są w pełni obsługiwane przez Google. Aby dowiedzieć się więcej o wytycznych Google dotyczących indeksowania treści AJAX Wytyczne Google dotyczące indeksowania AJAX Google .

Co będziemy budować

Nasza aplikacja będzie mogła być renderowana przez bota Google i wszystkich jego przyjaciół (Bing bot). W ten sposób nie napotkamy problemu pokazanego na powyższym obrazku. Otrzymamy ładne wyniki wyszukiwania, jakich oczekują od nas nasi użytkownicy.

[ ] [2]

Jak to działa

Gdy robot indeksujący wyszukiwarki odwiedzi Twoją aplikację i zobaczy <meta name = "fragment" content = "!"> Doda tag? _Escaped_fragment_ = do twojego adresu URL.
Twój serwer przechwyci to żądanie i wyśle je do oprogramowania pośredniego, które będzie obsługiwać specjalne żądanie przeszukiwacza. W tym artykule wybraliśmy Prerender.io, więc następny krok jest specyficzny dla Prerender.io.
Prerender.io sprawdzi, czy żądana strona ma istniejącą migawkę (lub stronę z pamięci podręcznej), jeśli tak, to wyświetli tę stronę przeszukiwaczowi, jeśli nie, Prerender wykona wywołanie do PhantomJS, co spowoduje wyświetlenie strona w całości i pokaż ją robotowi.
Nie buforowane strony, które wymagają wywołania PhantomJS, będą dłużej renderować, co prowadzi do znacznie dłuższego czasu odpowiedzi, dlatego dobrym pomysłem jest częste buforowanie stron.
Istnieją dodatkowe sposoby, aby to zrobić!

Alternatywy :

Skonfiguruj własną usługę Prerender przy użyciu otwartego kodu źródłowego Prerender.io
Użyj innej istniejącej usługi, takiej jak BromBone , Seo.js lub SEO4AJAX
Utwórz własną usługę do renderowania i wyświetlania migawek w wyszukiwarkach

O Prerender.io

Prerender.io to usługa kompatybilna z wieloma różnymi platformami, w tym Node, PHP i Ruby. Usługa jest w pełni open-source, ale oferuje rozwiązanie hostowane, jeśli nie chcesz przechodzić przez kłopoty związane z konfigurowaniem własnego serwera dla SEO. Ludzie z Prerender wierzą, że SEO jest prawem, a nie przywilejem i wykonali świetną pracę, rozszerzając swoje rozwiązanie, dodając wiele dostosowywanych funkcji i wtyczek.

Pakiet konfiguracyjny węzła.json

Będziemy budować prostą aplikację Node / AngularJS, która ma wiele stron z dynamiczną zawartością. Użyjemy Node.js jako nasz serwer zaplecza z Express. Sprawdź poniższy plik Node package.json, aby zobaczyć wszystkie nasze zależności dla tego samouczka. Kiedy będziesz gotowy, zarejestruj się za darmo prerender.io konto i zdobądź swój token.

// package.json {"name": "Angular-SEO-Prerender", "description": "...", "version": "0.0.1", "private": "true", "dependencies": {"express": "latest", "prerender-node": "latest"}}

Teraz, gdy mamy już gotowy pakiet.json, zainstalujmy zależności Node przy użyciu instalacji npm.

Serwer konfiguracji węzła.js

Konfiguracja tutaj jest dość standardowa. W naszym pliku server.js będziemy wymagać usługi Prerender i połączyć się z nią za pomocą naszego tokena prerenderowania.

// server.js var express = require ('express'); var app = module.exports = express (); app.configure (function () {// Tutaj wymagamy oprogramowania pośredniego prerender, które będzie obsługiwać żądania od robotów wyszukiwarek // Ustawiamy token tylko wtedy, gdy używamy aplikacji prerender.io.use (wymagaj ('prerender- node '). set (' prerenderToken ',' YOUR-TOKEN-HERE ')); app.use (express.static („public”)); app.use (app.router);}); // Zapewni to, że cały routing zostanie przekazany do aplikacji AngularJS app.get ('*', function (req, res) {res.sendfile ('./ public / index.html');}); app.listen (8081); console.log („Go Prerender Go!”);

Strona główna index.html

Strona główna jest również dość standardowa. Napisz swój kod, jak zwykle. Dużą zmianą będzie po prostu dodanie <meta name = "fragment" content = "!"> Do <head> strony. Ten metatag powie robotom indeksującym wyszukiwarki, że jest to witryna z dynamiczną treścią JavaScript, którą należy zaindeksować.

Dodatkowo, jeśli twoja strona nie jest właściwie buforowana lub brakuje jej zawartości, możesz dodać następujący fragment skryptu: window.prerenderReady = false; co powie serwisowi Prerender, aby poczekał, aż cała strona zostanie w pełni wykonana przed wykonaniem migawki. Będziesz musiał ustawić window.prerenderReady = true po upewnieniu się, że zawartość została załadowana. Istnieje duże prawdopodobieństwo, że nie będziesz musiał dołączać tego fragmentu, ale opcja jest dostępna, jeśli jej potrzebujesz.

To jest to! Zobacz poniższy kod, aby uzyskać dodatkowe komentarze.

<! - index.html -> <! doctype html> <! - Stworzymy mainController i połączymy go z HTML, co da nam dostęp do całego DOM -> <html ng-app = "prerender- tutorial "ng-controller =" mainController "> <head> <meta name =" fragment "content ="! "> <! - Definiujemy zmienne SEO, które chcemy dynamicznie aktualizować -> <title> Scotch Tutorial | {{seo.pageTitle}} </title> <meta name = "description" content = "{{seo.metaDescription}}"> <! - CSS -> <link rel = "arkusz stylów" type = "text / css "href =" / assets / bootstrap.min.css "> <style> body {margin-top: 60px; } </style> <! - JS -> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"> </script> < skrypt src = "http://code.angularjs.org/1.2.10/angular-route.min.js"> </script> <skrypt src = "/ app.js"> </script> </head> <body> <div class = "container"> <! - BAR NAWIGACJI -> <div class = "bs-example bs-navbar-top-example"> <nav class = "navbar navbar-default navbar-fixed- top "> <div class =" navbar-header "> <a class="navbar-brand" href="/"> Angular SEO Prerender Tutorial </a> </div> <ul class =" nav navbar-nav " > <li> <a href="/"> Strona główna </a> </li> <li> <a href="/about"> Informacje </a> </li> <li> <a href = " / features "> Funkcje </a> </li> </ul> </nav> </div> <h1 class =" text-center "> Witamy w samouczku Angular SEO Prerender </h1> <! - gdzie wstrzykniemy nasze dane szablonu -> <div ng-view> </div> </div> </body> </html>

Instalacja kątowa app.js

W naszym app.js, stronie, na której definiujemy nasz kod AngularJS, będziemy musieli dodać ten kod do naszej konfiguracji routingu: $ locationProvider.hashPrefix ('!') ;. Ta metoda zmieni sposób zapisywania adresów URL.

Jeśli używasz html5Mode, nie zobaczysz żadnej różnicy, w przeciwnym razie twój adres URL będzie wyglądał jak http: // localhost: 3000 / #! / Home w porównaniu ze standardowym http: // localhost: 3000 / # / home.

Ten #! w Twoim adresie URL jest bardzo ważne, ponieważ ostrzega roboty indeksujące, że Twoja aplikacja ma zawartość AJAX i że powinna to robić magia indeksowania AJAX.

// app.js var app = angular.module ('prerender-tutorial', ['ngRoute']) .config (funkcja ($ routeProvider, $ locationProvider) {$ routeProvider.when ('/', {templateUrl: 'views /homeView.html ', kontroler:' homeController '}) $ routeProvider.when (' / about ', {templateUrl:' /views/aboutView.html ', kontroler:' aboutController '}) $ routeProvider.when (' / features ', {templateUrl:' /views/featuresView.html ', kontroler:' featuresController '}) $ routeProvider.otherwise ({redirectTo:' / '}); $ locationProvider.html5Mode (true); $ locationProvider.hashPrefix ('! ');}); function mainController ($ scope) {// Stworzymy zmienną seo w zakresie i zdecydujemy, które pola chcemy wypełnić $ scope.seo = {pageTitle: '', pageDescription: ''}; } function homeController ($ scope) {// W tym tutorialu po prostu uzyskamy dostęp do zmiennej $ scope.seo z głównego kontrolera i wypełnimy ją treścią. // Dodatkowo możesz utworzyć usługę do aktualizacji zmiennych SEO - ale to jest kolejny tutorial. $ scope. $ parent.seo = {pageTitle: 'AngularJS SEO Tutorial', pageDescripton: 'Witamy w naszym poradniku na temat indeksowania stron i aplikacji AngularJS przez Google.' }; } function aboutController ($ scope) {$ scope. $ parent.seo = {pageTitle: 'About', pageDescripton: 'Jesteśmy stroną o dużej zawartości, więc musimy być indeksowani.' }; } function featuresController ($ scope) {$ scope. $ parent.seo = {pageTitle: 'Features', pageDescripton: 'Sprawdź niektóre z naszych niesamowitych funkcji!' }; }

W powyższym kodzie możesz zobaczyć, w jaki sposób radzimy sobie z routingiem kątowym i naszym innym pageTitle i pageDescription dla stron. Zostaną one przekazane robotom indeksującym na stronę gotową do SEO!

Więc co się dzieje?

Gdy robot indeksujący odwiedzi twoją stronę pod adresem http: // localhost: 3000 / #! / Home, adres URL zostanie przekonwertowany na http: // localhost: 3000 /? <em> escaped_fragment </em> = / home, gdy Prerender oprogramowanie pośredniczące widzi ten typ adresu URL, nawiąże połączenie z usługą Prerender. Alternatywnie, jeśli używasz trybu HTML5, gdy robot odwiedza twoją stronę pod adresem http: // localhost: 3000 / home, adres URL zostanie przekonwertowany na http: // localhost: 3000 / home /? <em> escaped_fragment </em> =.

Usługa Prerender sprawdzi i zobaczy, czy ma migawkę lub już renderowaną stronę dla tego adresu URL, jeśli tak, wyśle go do robota, jeśli nie, to wyrenderuje migawkę w locie i wyśle renderowany HTML do robota indeksującego w celu prawidłowego indeksowania.

Sprawia, że to działało

Prerender udostępnia pulpit nawigacyjny, aby zobaczyć różne strony, które zostały renderowane i indeksowane przez boty. To świetne narzędzie do sprawdzania działania stron SEO.

Ostrzeżenia

Niedawno miałem okazję porozmawiać z twórcą Prerender.io i poprosiłem go o wskazówki dotyczące indeksowania aplikacji na jedną stronę. Oto co miał do powiedzenia:

Służy robotom indeksującym wstępnie napisany HTML, a nie JavaScript,
Nie wysyłaj miękkich 404
Jeśli używasz znaków # dla swoich adresów URL, upewnij się, że ustawiłeś hashPrefix ('!'), Aby adresy URL były przepisywane jako #! '
Jeśli masz dużo stron i treści, pamiętaj o dołączeniu sitemap.xml i robots.txt
Google indeksuje tylko określoną liczbę stron dziennie, co zależy od rankingu PageRank. Dołączenie pliku sitemap.xml pozwoli Ci ustalić, które strony zostaną zaindeksowane.
Podczas testowania, aby zobaczyć, jak strony AngularJS są renderowane w Narzędziach Google dla webmasterów, pamiętaj o dodaniu #! lub? _escaped_fragment_ = we właściwym miejscu, ponieważ narzędzia ręczne nie zachowują się dokładnie tak, jak robią to rzeczywiste roboty.

Wniosek

Mam nadzieję, że nie pozwolisz, aby SEO wady aplikacji Angular powstrzymywały Cię przed korzystaniem z tego wspaniałego narzędzia. Istnieją usługi, takie jak Prerender i sposoby indeksowania treści AJAX. Upewnij się, że spojrzysz na Google Webmaster Wskazówki dotyczące indeksowania AJAX i baw się dobrze, budując przyjazne dla SEO aplikacje Angular!

Quot;> Doda tag?
Więc co się dzieje?
Home, adres URL zostanie przekonwertowany na http: // localhost: 3000 /?
Alternatywnie, jeśli używasz trybu HTML5, gdy robot odwiedza twoją stronę pod adresem http: // localhost: 3000 / home, adres URL zostanie przekonwertowany na http: // localhost: 3000 / home /?
Lub?