Как сделать AngularJS потрясающим с SEO

1. Hashbangs #!
2. Добавьте hashbang в конфигурации AngularJS
3. PhantomJS советы
4. Сообщите вашему безголовому браузеру, когда он будет готов
5. DOM-изменяющие плагины
6. Проверить результат
7. Последние мысли

AngularJS - одна из наиболее быстро растущих сред Javascript на рынке, и все веб-сайты на основе Javascript сталкиваются с той же проблемой, когда дело доходит до индексации вашего предварительно отрендеренного HTML. К счастью, есть способы обойти это с некоторой специальной маршрутизацией URL.

Впервые я столкнулся с этой проблемой, когда выпустил свой первый сайт AngularJS DingScore Я заметил, что Google или Bing вообще не индексируют мои подстраницы, даже с картой сайта XML. Корневая страница была названа {{title}}, и неудивительно, на самом деле это было так в HTML.

Таким образом, мы сталкиваемся с 2 основными проблемами здесь

1. Поисковые системы, кажется, не знают, что это на самом деле две разные страницы. http://dingscore.com/#/livescore/livenow http://dingscore.com/#/livescore/International/13
2. Не выполняется Javascript от сканеров, поэтому, если у вас есть <title> {{title}} </ title> в вашем html, они увидят это так. Не тот результат, который мы хотели бы

Чтобы продемонстрировать, я сделал захват экрана

Этот сайт имеет около 150 уникальных URL-адресов, и я добавил их все в инструменты для веб-мастеров для Google, думая, что этого будет достаточно, но нет.

Hashbangs #!

Если вы никогда не слышали слово hashbang ( не hastag ), не волнуйтесь. Я тоже не По сути, это способ (единственный способ) информировать поисковые системы о том, что текущая веб-страница, к которой осуществляется доступ по текущему URL-адресу, содержит загруженное содержимое AJAX.

Таким образом, два предыдущих URL теперь будут

http://dingscore.com/#!/livescore/livenow http://dingscore.com/#!/livescore/International/13

Google и Bing теперь преобразуют эти два URL-адреса в специально разработанный URL-адрес, который может быть доступен серверу. После этого сканеры посетят преобразованные URL-адреса.

Таким образом, два специальных преобразованных URL, которые будут сканировать Google и Bing,

http://dingscore.com/?_escaped_fragment_=/livescore/livenow http://dingscore.com/?_escaped_fragment_=/livescore/International/13

Итак, теперь вы видите, что у вас есть что-то, что вы могли бы работать на стороне сервера, и вы можете начать генерировать ваши визуализированные снимки HTML. Что я сделал, чтобы создать правило перезаписи в .htaccess, и я использовал PhanthomJS создавать снимки.

Вот мой пример с mod_rewrite с Apache:

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

Когда сканер преобразует ваш hashbang (#!) В? _Escaped_fragment_ =, вы должны убедиться, что снимок существует. Я получил cronjob, сканирующий мой сайт каждые 2 часа и обновляющий снимки с PhantomJS.

Добавьте hashbang в конфигурации AngularJS

Все, что вам нужно сделать, - указать AngularJS использовать их вместо обычного хэша. Просто добавьте одну строку кода в конфигурацию маршрутизации.

.config (['$ routeProvider', '$ locationProvider', функция ($ routeProvider, $ location) {$ location.hashPrefix ('!'); ....

PhantomJS советы

Блокировка аналитики

Одна вещь, которую я заметил, когда начал сканировать свой сайт с помощью PhantomJS, заключается в том, что моя аналитика Google сошла с ума от трафика. Очевидно, это не так удивительно, потому что выполнение всех видов Javascripts для захвата вашего AJAX-контента также вызовет вашу статистику, в моем случае Google Analytics. Поэтому я добавил request.abort () ко всему трафику analytics.js в скрипте.

page.onResourceRequested = function (requestData, request) {if ((/analytics.js/gi).test(requestData['url '])) {request.abort (); }};

Сообщите вашему безголовому браузеру, когда он будет готов

Вы также должны сообщить сценарию, когда страница готова к снимку, PhantomJS не будет знать, когда весь ваш контент AJAX загружен или когда DOM будет окончательным. Поэтому вам нужно установить флаг и обновить флаг, когда все ваши XHR-запросы завершили свою работу.

<body data-status = "{{status}}"> </ body>

А затем добавьте что-то подобное в свои контроллеры, когда вы ожидаете, что страница будет готова

$ scope.status = "ready";

DOM-изменяющие плагины

Первое, что приходит мне в голову, это популярный плагин Javascript Font заменяет плагин Cufon . Не уверен, сколько еще его используют, но вы поняли. Все плагины, изменяющие DOM, лучше всего отключать, когда вы делаете снимки.

<h1> SEO Title </ h1>

И cufon полностью изменит DOM и испортит ваши результаты SEO

<h1> <cufon class = "cufon cufon-canvas" alt = "SEO" style = "width: 92px; height: 32px;"> <canvas width = "117" height = "37" style = "width: 117px; высота: 37px; верх: -4px; слева: -2px; "> </ canvas> <cufontext> SEO </ cufontext> </ cufon> <cufon class =" cufon cufon-canvas "alt =" Название "style =" ширина: 93px; высота: 32px; "> <canvas width =" 111 "высота =" 37 "style =" ширина: 111px; высота: 37px; верх: -4px; слева: -2px; "> </ canvas> < cufontext> Title </ cufontext> </ cufon> </ h1>

Проверить результат

Сделав все это, я заметил, что через 2 дня мои страницы сканируются правильно

Ссылка на сайт:
http://dingscore.com/#!/livescore/livenow
URL сканирования:
http://dingscore.com/?_escaped_fragment_=/livescore/livenow
URL снимка:
http://dingscore.com/snapshots/livescore/livenow.html

Последние мысли

Моя последняя мысль: если сайт AngularJS (разработанный Google) будет иметь большее влияние, когда дело доходит до ранжирования, то, например, блог WordPress с аналогичным содержанием и работой SEO?

Похожие

Комментарии