Рубрики

Полезные материалы

Стратегии SEO для одностраничных приложений JavaScript или сайтов AJAX

  1. Хотите быть в курсе последних тенденций поиска?
  2. Хотите быть в курсе последних тенденций поиска?

Клиентский JavaScript отлично подходит для создания инновационных и удобных веб-сайтов. Наряду с AJAX, веб-технология хорошо зарекомендовала себя для запуска загрузки определенного содержимого страницы по требованию, так называемой Одностраничное приложение (SPA) фреймворки, которые в значительной степени полагаются на JavaScript, быстро завоевывают популярность в сообществе веб-разработчиков, поскольку они позволяют быстро разрабатывать интерактивные и быстро загружаемые веб-приложения на рынке.

Тем не менее, в значительной степени полагаясь на JavaScript рендеринг контента вашей страницы и обеспечение функциональности навигации влечет за собой известные риски с точки зрения технического SEO, индексации и проблем с ссылками. Вот несколько проверенных стратегий для создания сайтов AJAX и одностраничных приложений, которые не являются поисковыми катастрофами.

Справочная информация: клиентский JavaScript и фрагменты URL

Клиентские веб-фреймворки активно используют технологию, называемую AJAX - асинхронный JavaScript и XML. Он превращает статические веб-сайты в динамические веб-приложения, которые могут предоставлять богатый и разнообразный пользовательский опыт без обновления всей страницы и изменения URL-адреса. Различные состояния приложения обычно обозначаются путем добавления хэштега к URL-адресу, который можно узнать по префиксу (#) (например, http://www.hugeinc.com/#aboutus).

Преимущества пользовательского опыта очевидны - быстрые и отзывчивые страницы, которые загружают только контент, необходимый для удобства пользователей. На самом деле, многие интерфейсы следующего поколения нелегко сделать без использования JavaScript, поскольку это устраняет необходимость для пользователя активно нажимать на ссылку и для браузера обновлять всю страницу.

Используя эти технологии, пользователи может просматривать продукты и контент быстро, интуитивно понятным способом через чистый интерфейс. Однако URL остается более или менее неизменным. Гиперссылки, которые включают фрагменты URL, используются для загрузки данных запрашиваемого продукта во время взаимодействия с пользователем, избегая обновления страницы.

Эта проблема

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

И хотя Google постоянно совершенствует возможности своих роботов в JavaScript, Bing / Yahoo отстает. И даже если движки пытаются индексировать контент, они часто не уверены, что могут точно представить состояние, наиболее релевантное поисковому запросу, на основе URL-адресов в их индексе. Результат: плохая видимость поиска относительно конкурентов.

Одно из решений: резервные страницы

Резервные страницы - это HTML-страницы, которые отображаются, если запрашивающий ресурс не анализирует JavaScript. Обычно это статические страницы, которые пытаются воспроизвести функциональность и контент веб-приложения JavaScript через страницы, отображаемые на сервере. Эти страницы содержат тот же контент, что и приложение Javascript, а также используют стандартные индексируемые ссылки для навигации.

Выгоды

Резервные страницы дают поисковым системам контент, который им необходим для важных целевых страниц поиска. Эти страницы не предназначены для пользователей, если они не используют ограниченный или текстовый браузер. Идя дальше, подход Cadillac к этой проблеме часто называют «Прогрессивным улучшением» - полноценным сайтом, на котором пользователи получают столько функциональных возможностей, сколько может выдержать их система. Конечно, это также большая часть работы, так как код должен быть написан для каждого уровня функциональности клиента по всему сайту.

Обратная сторона

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

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

Реализация резервных страниц

Существует несколько подходов к реализации резервных страниц. Их можно достичь, просто поместив важный контент в тег <noscript>. Это добавляет раздувание кода, может быть неудобно и ограничено ключевыми страницами ввода. Если тег не загружается по мере продвижения пользователя в веб-приложение, содержимое будет потеряно для движков.

Другой подход заключается в обработке этого на стороне сервера. В 2011 году Google ввел стандарт - часто называемый «hashbang» (#!) - который переводит URL-адреса хэштега в строку запроса для индексации роботами. В отличие от фрагментированной части URL-адреса, строки запросов видимы для серверных систем и поэтому позволяют веб-разработчикам отображать соответствующий контент на стороне сервера исключительно для поисковых систем. Это дает преимущество создания индексируемых URL.

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

Другие решения проблемы URL

Как упомянуто выше, в зависимости от степени, в которой был рассмотрен SEO, данное состояние UX для сайтов AJAX или SPA может иметь видимые URL, которые отличаются или невидимы для поисковых систем. Это означает, что поисковые системы могут видеть один набор URL-адресов, а пользователи - другой.

Создание пользовательских UX-элементов и функциональных возможностей «общего доступа», включая общие URL-адреса, помогает уменьшить неспособность пользователей копировать и пропускать URL-адреса, точно отражающие состояние, которое видит пользователь:

Создание пользовательских UX-элементов и функциональных возможностей «общего доступа», включая общие URL-адреса, помогает уменьшить неспособность пользователей копировать и пропускать URL-адреса, точно отражающие состояние, которое видит пользователь:

Элементы UX могут помочь уменьшить отсутствие общих URL-адресов на тяжелых сайтах JavaScript

Конечно, не все будут использовать эти элементы UX, и они требуют разработки логики на стороне сервера, которая может форсировать состояние через элементы URL и представлять ее пользователю.

Использование pushState для устранения проблемы с URL

HTML 5 включает в себя возможность манипулировать путем URL, как видно в браузере, а также историю браузера через Javascript. Это полезно для сайтов SPA и AJAX, так как удобный для поисковых систем, общий и доступный для закладки URL-адрес может быть показан клиенту, в то время как фрагменты JavaScript и URL-адреса выполняются в фоновом режиме.

Реализация pushState

Добавление pushState является довольно простым, и на самом деле многие из популярных одностраничных фреймворков, такие как фреймворк с открытым исходным кодом Ember или Google угловатый Framework предоставляет API для легкого доступа к функциональности. Но даже для веб-разработчиков, предпочитающих пользовательскую разработку Javascript, недавно добавленный History API, являющийся частью спецификации HTML5, предоставляет простой интерфейс для отправки полных обновлений URL-адресов на панель браузера на стороне клиента без использования ограниченных доступных фрагментов URL-адресов или принудительного применения обновление страницы.

Downsides

лучший SEO Реализации pushState находятся на сайтах, которые уже доступны без JavaScript, с версией AJAX, построенной «сверху», как описано выше. Затем включается PushState, позволяющий копировать и вставлять ссылки и все другие преимущества наличия URL-адресов, отражающих пользовательский интерфейс, например, URL-адреса назначения целевой страницы. Таким образом, pushState, по сути, не является решением проблемы сайтов AJAX и SEO самостоятельно, но помогает.

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

PushState также требует современного браузера, но опять же, как и многие современные сайты AJAX и SPA, так что вы, скорее всего, уже идете по пути отбрасывания устаревших браузеров и их пользователей на обочину.

Положить его вместе

Если бюджет и ресурсы позволяют, комплексный подход к созданию SEO-дружественного сайта AJAX или SAP будет включать:

  • Резервные страницы для ключевых органических целевых страниц как минимум или полностью прогрессивный сайт улучшения, который работает с Javascript и без него, что позволяет индексировать.
  • Реализация pushState для устранения проблемы с URL-адресами для пользователей или клиентов с поддержкой JavaScript, которая позволяет совместно использовать и добавлять закладки и генерирует единый URL-адрес для всех пользователей.

AJAX и одностраничное приложение здесь, чтобы остаться и принести с собой множество преимуществ, которые SEO не должны игнорировать. Превосходный пользовательский опыт связывается, обсуждается и генерирует социальные сигналы - все это ключ к SEO. Бренды и агентства должны понимать, что включение технических элементов для обеспечения индексации сайтов Javascript и ссылок на них должно рассматриваться как не подлежащее обсуждению движение вперед и часть ресурсов, с самого начала предназначенных для веб-дизайна и создания проектов.

Примечание автора: отдельная благодарность Томас Проммер , вице-президент по технологиям в Huge, за помощь в написании этой статьи.

Изображение Огнян Младенов, Flickr

Хотите быть в курсе последних тенденций поиска?

Получить лучшие идеи и новости от наших экспертов по поиску.

Хотите быть в курсе последних тенденций поиска?

Получить лучшие идеи и новости от наших экспертов по поиску.

Хотите быть в курсе последних тенденций поиска?
Хотите быть в курсе последних тенденций поиска?
Хотите быть в курсе последних тенденций поиска?