SEO для одностраничных приложений

  1. SEO решение
  2. 1. Включите hashbang на стороне клиента
  3. 2. Направляйте URL-адреса с помощью escaped_fragment на кэшированные страницы на стороне сервера.
  4. 3. Захватывайте, сохраняйте и сохраняйте предварительно обработанные снимки
  5. SPA SEO Услуги

Шесть месяцев назад нашими критериями для разработки приложений с использованием клиентской MVC (одностраничные приложения или SPA) или серверной MVC были либо: клиентская MVC, если SEO (поисковая оптимизация) не имела значения, либо серверная MVC, если она была…   Однако эта стратегия оказалась менее применимой, поскольку популярность SPA растет, а MVC на стороне сервера продолжает снижаться
Шесть месяцев назад нашими критериями для разработки приложений с использованием клиентской MVC (одностраничные приложения или SPA) или серверной MVC были либо: клиентская MVC, если SEO (поисковая оптимизация) не имела значения, либо серверная MVC, если она была…

Однако эта стратегия оказалась менее применимой, поскольку популярность SPA растет, а MVC на стороне сервера продолжает снижаться. Мы часто сталкиваемся с проектами, которые требуют как MVC на стороне клиента, так и SEO. Поскольку большинство поисковых систем не выполняют сценарии JavaScripts на страницах html, а содержимое на страницах SPA в основном генерируется JavaScript, индексация страниц одностраничного приложения дает плохие результаты SEO.

SEO решение

Используя (наш любимый) AngularJS, вот один из подходов к решению проблемы SEO для одностраничных приложений. Примечание. Тот же подход можно использовать и для других платформ (например, Backbone и Ember). Смотрите ссылки в разделе Ресурсы для более подробной информации.

Большинство поисковых систем поддерживают соглашение об использовании hashbang - когда они видят #! в URL они заменят его на? _escaped_fragment_.

Например:

http: //example.com/#!/products

будет проиндексирован по расширенному URL:

http: //example.com/?_escaped_fragment_=/products

Таким образом, идея состоит в том, чтобы хранить и обслуживать предварительно отрендеренные страницы (снимки) по расширенным URL-адресам. Снимок страницы содержит содержимое DOM, уже обработанное JavaScript.

Требуется несколько шагов, чтобы сделать эту работу:

1. Включите hashbang на стороне клиента

Так как по умолчанию Angular route (urls) использует префикс / # /, нам нужно использовать следующее, чтобы создавать маршруты для использования формата / #! / Hashbang.

$ locationProvider. hashPrefix ('!');

Для приложений, использующих push5 для HTML5, нам нужно добавить

& lt; meta name = "фрагмент" содержание = "!" & gt;

в раздел <head> страниц для индексации. В приложениях Angular push-состояние активируется с помощью:

$ locationProvider. html5Mode (true);

2. Направляйте URL-адреса с помощью escaped_fragment на кэшированные страницы на стороне сервера.

Rails / Sinatra - используйте промежуточное программное обеспечение Rack для перенаправления на предварительно обработанные URL-адреса. Node / Express - используйте промежуточное программное обеспечение для перенаправления на предварительно обработанные URL-адреса. Apache - используйте mod_rewrite для перезаписи на предварительно обработанные URL-адреса. Nginx - используйте прокси для предварительно обработанных URL-адресов.

Для приложений Rails вы можете определить в промежуточном программном обеспечении Rack, поступает ли запрос от искателя, проверив, присутствует ли в запросе «_escaped_fragment», и перенаправив на предварительно обработанные URL-адреса:

query_hash = Rack :: Utils. parse_query (request. query_string) если query_hash. has_key? ('_escaped_fragment_') # перенаправить на предварительно обработанные URL-адреса ... end

3. Захватывайте, сохраняйте и сохраняйте предварительно обработанные снимки

Делайте это на регулярной основе, желательно, как только будут внесены изменения в содержание страниц, которые необходимо проиндексировать. Примечание: захватывайте только страницы, достойные SEO.

Существует ряд инструментов, которые можно использовать для создания снимков веб-страниц. PhantomJS, CasperJS и Zombie - отличные варианты.

Вот пример JavaScript, который использует CasperJS (который использует PhantomJS и предоставляет некоторые хорошие функции браузера более высокого уровня) для захвата страницы:

var casper = require ('casper'). Создайте ( ) ; var url = 'http: // localhost: 3000 / #! /'; каспер start (url, function () {var js = this. оценивать (function () {вернуть документ;}); this. echo (js. all [0]. externalHTML);}); каспер бежать ( ) ;

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

Вот снимки экрана приложения Angular TodoMVC (с бэкэндом Rails):

Снимок экрана № 1 - Оригинальный контент, представленный AngularJS Снимок экрана № 1 - Оригинальный контент, представленный AngularJS

Снимок экрана № 2. С точки зрения сканера, содержимое не было проиндексировано (смоделировано с отключенным в браузере JavaScript) Снимок экрана № 2

Снимок экрана № 3 - Снимок, сделанный с помощью CasperJS, подается по расширенному URL со всем содержимым Снимок экрана № 3 - Снимок, сделанный с помощью CasperJS, подается по расширенному URL со всем содержимым

Как вы можете видеть, снимок (снимок экрана № 3 выше) содержит все содержимое исходной страницы (снимок экрана № 1) без стилизации, готовый для индексации сканерами.

SPA SEO Услуги

Не заинтересованы в методе DIY? Вот несколько сервисов, которые предоставляют SEO для одностраничных приложений:

Если вы используете Divshot (если нет, взгляните), встроена поддержка SPA SEO, они сотрудничают с Prerender.io, чтобы предоставить вам эту замечательную функцию. Подробности смотрите здесь:

Ресурсы

В URL они заменят его на?
Com/?
Has_key?