Джефф Кросс - соучредитель nrwl.io, предоставляющий консультации по Angular корпоративным командам. Ранее он входил в основную группу Angular в Google, возглавляя команду Angular Mobile.
3 части
Это первая из трех частей о том, как сделать приложения Angular понятными и индексируемыми роботом Googlebot. В этой статье мы кратко рассмотрим историю эволюции способности робота Googlebot сканировать приложения JavaScript и рассмотрим некоторые передовые методы, применимые к приложениям JavaScript в целом. Во 2-й и 3-й частях будут рассмотрены особенности Angular и полезные инструменты.
SEO - важная тема для разработчиков, чтобы понять, касаются ли они приложений, которые полагаются на трафик поисковых систем, потому что проблемы SEO сложно и дорого исправить постфактум, что может стоить недели или месяцы потерянного трафика.
Googlebot
SEO - это обширная тема. Эта статья посвящена одному аспекту SEO: сканированию. Я сосредотачиваюсь только на одном сканере, Googlebot (поисковый робот Google), и я сосредотачиваюсь только на сканировании приложений JavaScript и Angular. Под сканированием я подразумеваю процесс перехода робота Googlebot к страницам, их загрузки и анализа. Я не буду освещать индексацию, ранжирование или другие забавные темы.
Трехчастная история Googlebot
Возраст серверных страниц
До 2009 года разработчики просто соглашались с тем, что если бы они использовали jQuery, Backbone или другие библиотеки JS для рендеринга своих приложений в браузере, поисковые системы не смогли бы понять их контент. Таким образом, страницы должны быть отрисованы на сервере в той или иной форме, а затем могут быть улучшены с помощью JavaScript в браузере. По мере того, как фреймворки JavaScript начали развиваться и использоваться для создания целых приложений, «одностраничных приложений», Google увидел необходимость предоставить разработчикам способ инструктировать поискового робота о содержании своих приложений.
Возраст вспомогательного понимания
Итак, в 2009 году Google предложил новый протокол, используя комбинацию метатега, чтобы указать, что ваше приложение является приложением JavaScript, и конфигурацию сервера для обслуживания простой версии содержимого страницы, когда страница будет запрашиваться с параметром запроса, называемым _escaped_fragment_.
На сегодняшний день сайт документации AngularJS реализует этот протокол. Если вы посетите https://docs.angularjs.org/api/ng/function/angular.bind, вы увидите обычную страницу.
Но если вы измените URL, чтобы включить _escaped_fragment_, https://docs.angularjs.org/ ? _Escaped_fragment_ = api / ng / function / angular.bind, вы будет видеть то же самое содержимое в гораздо более простой, нестилевой форме, без JavaScript, чтобы поисковый робот мог легко понять содержимое страницы.
В тот момент, в октябре 2009 года, Googlebot увеличивал свои возможности по рендерингу и синтаксическому анализу приложений JavaScript. Предоставляя параметр _escaped_fragment_, разработчики могут помочь поисковому роботу больше доверять содержанию динамических страниц.
Возраст грамотности
Перенесемся в октябрь 2015 года. Робот Google стал намного более продвинутым в своей способности перемещаться и анализировать приложения JavaScript. Команда поиска объявила в блоге Google Webmasters, что предыдущее предложение по использованию _escaped_fragment_ устарело. Сканер достаточно развился, чтобы уверенно и последовательно сканировать одностраничные приложения JavaScript.
Итак, с улучшением сканера, могут ли разработчики JavaScript просто разрабатывать приложения как обычно, не беспокоясь о возможности сканирования? В целом да, но не без оговорок, оговорок и звездочек. Чтобы прояснить текущие рекомендации по сканированию приложений JavaScript, Джон Мюллер из Google разместил в Google+ несколько кратких предложений. Джон также представил ту же тему на AngularConnect 2016, вдаваясь в некоторые подробности, чем его сообщение в Google+, но повторяя многие из тех же моментов. Предлагаю свое резюме сообщения и презентации.
Прогрессивное улучшение
Браузер, используемый поисковым роботом для обработки приложений JavaScript, не обладает всеми функциями Chrome и других современных браузеров. На момент выступления Джона в сентябре 2016 года некоторые API-интерфейсы, которые не поддерживаются, включают ServiceWorker, Fetch, Promise, requestAnimationFrame и localStorage. Большинство приложений, вероятно, уже используют полифиллы для большинства из них или, по крайней мере, имеют запасной вариант. Если какой-либо из этих API-интерфейсов используется для отображения содержимого страницы, важно, чтобы страница корректно выходила из строя и могла отображать содержимое даже при их отсутствии.
URL-адреса и ссылки
Канонические URL
URL-адреса очень важны для индекса Google. Все документы в индексе Google привязаны к URL-адресам. Вот почему так важно, чтобы страницы имели один канонический URL. Другими словами, если одна и та же страница доступна по разным URL-адресам, включая один и тот же URL-адрес с разными параметрами запроса, вам необходимо сообщить Google, какой канонический URL-адрес является правильным для этой страницы.
Нет хешей
У Google также есть сильное предубеждение против URL-адресов, которые используют хэш (/ # /) внутри путей. Если Google видит ссылки, содержащие хэш, он предполагает, что содержимое после хеша несущественно. Google редко индексирует URL-адреса с хешами.
Вариации
Если на странице есть значительные вариации одного и того же контента, например, контент, переведенный на несколько языков, должен быть уникальный URL-адрес для каждой версии страницы.
onclick 👎 ‹a href=""›› 👍
Робот Googlebot не обрабатывает обработчики кликов как ссылки, поэтому важно, чтобы ссылки на контент были представлены в атрибуте href элементов привязки.
Search Console
Консоль поиска, предоставляемая Google, является важным инструментом для управления и мониторинга взаимосвязи сайта с индексом Google. Для разработчиков JavaScript следует обратить внимание на инструмент Fetch as Google. Просмотреть как Googlebot позволяет разработчикам запрашивать у робота Googlebot загрузку страницы, а затем отображать некоторые характеристики страницы в том виде, в каком ее видел Google. Разработчики JavaScript захотят нажать кнопку Получить и отобразить, в результате чего робот Googlebot отобразит приложение JavaScript. Когда сканирование будет завершено, отобразится снимок экрана отображаемой страницы.
Это полезно для проверки правильности содержания страницы, но, к сожалению, в настоящее время невозможно увидеть метаданные страницы (заголовок, метаописание, канонический URL). Если вы хотите увидеть эту информацию, вам придется схитрить и добавить ее где-нибудь в тело страницы, чтобы она отображалась на скриншоте.
Правильные роботы
Robots.txt - это то, как серверы могут сообщать таким роботам, как Googlebot, какой контент они должны и не должны сканировать. Часто эти конфигурации используются для предотвращения загрузки определенных ресурсов, которые не нужны для рендеринга контента. Важно убедиться, что файл robots.txt на вашем сервере и серверах, от которых вы зависите, не блокирует важные ресурсы, такие как библиотеки JavaScript, необходимые для отображения вашей страницы.
Быть быстрым
Робот Googlebot может быть просто роботом, но это не значит, что у него безграничное терпение. В какой-то момент, если страница загружается слишком долго, робот Google откажется от нее и либо не проанализирует страницу, либо проанализирует ее в текущем состоянии. Это может привести к удалению страниц из индекса, если они постоянно загружаются слишком долго. Точный момент, когда робот Googlebot откажется, неясен, но, по общему мнению, это около 5 секунд. Поэтому важно оценить все запросы на блокировку и работу, которая может задержать рендеринг критически важного контента, и либо удалить менее важную работу, либо отложить ее до тех пор, пока контент не будет отрисован.
Как Googlebot сканирует
Одна важная вещь, которую нужно знать о Googlebot, - это то, что он не нажимает на ссылки в вашем приложении. Вместо этого, когда робот Googlebot анализирует страницу, он собирает все найденные гиперссылки и планирует сканирование ссылок позже. Затем в какой-то момент в будущем, может быть, сразу или через несколько дней робот Googlebot отправит новый запрос на загрузку страницы. Другими словами, сосредоточьтесь на том, как ваша страница работает и отрисовывается при начальной загрузке маршрута.
В следующей части этой серии я остановлюсь на конкретных соображениях, чтобы сделать приложения Angular более удобными для сканирования. Если у вас есть вопросы или подробности, которые вы хотели бы осветить, напишите мне в Твиттере @jeffbcross.
Джефф Кросс - соучредитель Nrwl - Enterprise Angular Consulting.
