AngularJS SEO: Получите ваш сайт проиндексирован и в верхней части результатов поиска.

  1. Подайте предварительно обработанный HTML сканерам, а не Javascript.
  2. Клиентская сторона: следуйте протоколу сканирования Google Javascript
  3. Если вы используете URL с #
  4. Если вы используете HTML5 push state
  5. Сторона сервера: возвращение статического HTML вместо Javascript
  6. Собираем все вместе

Итак, вы создали красивый, быстрый и удобный веб-сайт, используя AngularJS, и теперь вы хотите, чтобы больше пользователей начали просматривать его

Итак, вы создали красивый, быстрый и удобный веб-сайт, используя AngularJS, и теперь вы хотите, чтобы больше пользователей начали просматривать его. Вот как ваш сайт попадет в топ результатов поиска.

Подайте предварительно обработанный HTML сканерам, а не Javascript.

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

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

Основные шаги:

  1. Google замечает, что ваша страница отображается с использованием Javascript.
  2. Google запрашивает ваши страницы с измененным URL.
  3. Вы возвращаете предварительно обработанный HTML сканеру.

Это где prerender.io приходит. Мы предоставляем промежуточное программное обеспечение, которое обнаруживает запросы на сканирование. Мы визуализируем ваши страницы, выполняя полный Javascript за кулисами в браузере, а затем возвращаем статический HTML сканерам.

Клиентская сторона: следуйте протоколу сканирования Google Javascript

Для справки, полный протокол Вот ,

Протокол сканирования Google Javascript предназначен для веб-сайтов, которые отображают с использованием Javascript или нуждаются в ожидании завершения вызовов AJAX. Если вы следуете протоколу Google, Google отправит запрос на ваш сервер с измененным URL, чтобы вы могли вернуть статическую HTML-версию страницы. Вот как:

Если вы используете URL с #

Ничего после хэша в URL не отправляется на ваш сервер. Поскольку платформы Javascript изначально использовали хэш в качестве механизма маршрутизации, это основная причина, по которой Google создал этот протокол.

Измените ваши URL на #! вместо того, чтобы просто использовать #.

angular.module ('myApp'). config (['$ locationProvider', function ($ locationProvider) {$ locationProvider.hashPrefix ('!');}]);

Гугл ищет #! URL-адреса, а затем принимает все после #! и добавляет его в качестве параметра запроса с именем _escaped_fragment_. Таким образом, Google эффективно решает проблему всего, что связано с тем, что хеш не отправляется на ваш сервер.

Google находит такие URL:

http://www.example.com/#!/user/123

Google отправляет запрос на ваш сервер следующим образом:

http://www.example.com/?_escaped_fragment_=/user/123

Если вы используете prerender.io наше промежуточное ПО увидит параметр запроса _escaped_fragment_ и автоматически предоставит статический HTML сканеру за вас.

Если вы используете HTML5 push state

Вы должны сообщить Google, что ваша страница состояния push-кода HTML5 использует Javascript, чтобы Google мог запросить статическую HTML-страницу. Для этого просто добавьте этот тег в <head> всех ваших страниц:

<meta name = "фрагмент" content = "!">

Google увидит этот метатег и отправит еще один запрос на ваш сервер, чтобы запросить статическую HTML-страницу.

Google находит такие URL:

http://www.example.com/user/123

Google отправляет запрос на ваш сервер следующим образом:

http://www.example.com/user/123?_escaped_fragment_=

Если вы используете prerender.io наше промежуточное ПО увидит параметр запроса _escaped_fragment_ и автоматически предоставит статический HTML сканеру за вас.

Сторона сервера: возвращение статического HTML вместо Javascript

Теперь, когда Google запрашивает URL с помощью _escaped_fragment_, вам просто нужно вернуть статический HTML.

Все, что вам нужно сделать, это взять URL-адрес, запрошенный Google, и вернуть его в исходный URL-адрес. Затем верните статический HTML для этого URL.

Google отправляет запрос на ваш сервер следующим образом:

http://www.example.com/?_escaped_fragment_=/user/123

Вы превращаете URL обратно в это:

http://www.example.com/#!/user/123

Ты можешь использовать prerender.io сервер с открытым исходным кодом или сервер phantomjs для рендеринга и кэширования вашего статического HTML. Вы также можете свернуть свой собственный сервер phantomjs или даже использовать задачу grunt для генерации статического HTML при фиксации. Есть много разных способов ... достаточно для другого сообщения в блоге. А пока просто используйте prerender.io ;)

prerender.io позаботится обо всем этом для вас. Ваш веб-сайт передает запрос Google на наш сервер, где мы преобразуем исходный URL-адрес, проверяем кэш для вашей страницы, отображаем страницу в браузере, а затем возвращаем страницу сканеру.

Собираем все вместе

Итак, резюмируем:

  1. Скажите Google, что ваши страницы отображаются с помощью Javascript с помощью #! или тег <meta name = "фрагмент" content = "!">.

  2. Google запрашивает ваши URL с параметром запроса _escaped_fragment_.

  3. Вы перестраиваете исходный URL из _escaped_fragment_ на вашем сервере.

  4. Вы предоставляете сканеру статический HTML для этого URL.

Теперь вы уже на пути к множеству новых пользователей, благодаря поисковым системам!

Если вы используете prerender.io Вам нужно только побеспокоиться о том, чтобы сообщить Google, что ваши страницы отображаются с помощью Javascript. Мы позаботимся обо всем остальном для вас!

Com/?
Com/user/123?
Com/?