Проблемы длинных страниц прокрутки и одностраничных приложений (SPA)

  1. 1. Убедитесь, что разработчики знали, что они делают.
  2. 2. Проинформируйте команду SEO и клиента о том, как читать аналитику.
  3. 3. Обновите элементы каждого сегмента в соответствии с лучшими практиками SEO.
  4. 4. ВСЕГДА думайте, чтобы достичь лучшего UX.

Самая большая проблема в дизайне с длинными прокручиваемыми страницами или одностраничными приложениями (SPA) заключается в том, чтобы не отказываться от функциональности дизайна. По моему опыту, когда кто-то исторически выбирал SPA, они также решили раздвинуть границы возможностей дизайна вместо поддержки общепринятых лучших практик, которые позволяют SEO упростить темы страниц для пауков. То есть до тех пор, пока в 2012 году Google не приняла решение начать разрешать кэширование определенного типа привязки и, таким образом, сегментировать SPA на управляемые сегменты с точки зрения SEO.

То есть до тех пор, пока в 2012 году Google не приняла решение начать разрешать кэширование определенного типа привязки и, таким образом, сегментировать SPA на управляемые сегменты с точки зрения SEO

Следующая самая большая проблема заключалась в поиске разработчиков, которые понимают, как правильно разработать функциональность, чтобы сегменты могли кэшироваться. Как вы, вероятно, читали в предыдущих постах Мэтта Уизли (SEO SEO для одностраничных веб-сайтов, пример с длинной прокруткой), это не так просто, как может показаться. Разработка очень трудоемкая, чтобы понять, как .js перетаскивает информацию на прокручиваемую страницу и позволяет дизайну появляться, пока вы сохраняете функциональность. После того, как вы выполнили этот шаг, вы можете поверить, что это настолько далеко, насколько вам нужно, но еще один шаг необходим, чтобы убедиться, что SPA могут отслеживать ваши сотрудники по SEO. Это делается просто путем обучения вашей SEO-команды тому, как переводить разработку, глядя на вашу аналитическую платформу. Ниже приведены 4 ключевых элемента, которые необходимо знать для оптимизации вашего SPA для поисковых систем.

1. Убедитесь, что разработчики знали, что они делают.

Разработчики должны реализовать JavaScript, который вызывает каждый сегмент в SPA через сегменты страницы, созданные hashbang (#!), А также установить JavaScript для создания строки запроса с использованием подстановки экранированных фрагментов. (Объясняется здесь разработчиками Google) это позволит сегменты кэшировать в поисковых системах. Для правильной реализации этого практически необходимо дважды создать страницу, чтобы сегменты существовали в сканируемой реализации .js, а также собрать эти элементы в страницу с длинной прокруткой. Не ожидайте, что это просто модифицированные анкеры. Вы обнаружите, что многие разработчики не настолько информированы, как они должны быть в правильной реализации этой концепции, когда они пытаются эту схему.

2. Проинформируйте команду SEO и клиента о том, как читать аналитику.

Большинство практиков SEO будут использовать аналитические платформы для поиска эффективности страниц на основе URL-адреса, который отображается в браузере. Используя Hashbangs для сегментирования SPA, команда SEO должна вместо этого изучить аналитику для URL-адреса постзамены. Другими словами, когда используется Hashbang (#!), Браузер по-прежнему будет отображать URL с установленным хеш-бенгом (пример: Http: //www.example.com# новости)! но фактически кеширует URL как тот, который использует замещенные параметры запроса (пример: http://www.example.com?_escaped_fragment_news ). Именно по этой причине команда SEO должна искать в платформе аналитики строку запроса об экранированном фрагменте, чтобы получить показатели страницы для этого сегмента (представьте параметры utm, но для эффективности сегментов страницы, а не кампаний).

3. Обновите элементы каждого сегмента в соответствии с лучшими практиками SEO.

Если каждому сегменту разрешено кэшироваться, то команде SEO необходимо настроить каждый элемент, который обычно назначается странице для каждого создаваемого сегмента. Разъяснение темы сегмента так же важно, как и работа, которую вы обычно выполняете для уточнения страницы, поэтому назначьте заголовок, описание и все другие атрибуты, основанные на коде, которые не требуют, чтобы пауки делали суждения о том, какой трафик следует отправлять. на страницу. Другими словами, обрабатывайте каждый сегмент той же работой на странице, что и на любом другом сайте, но убедитесь, что вы понимаете, что все это делается в среде .js, и эти ограничения уменьшаются, но еще не устранены.

4. ВСЕГДА думайте, чтобы достичь лучшего UX.

Помните, что причина, по которой мы занимаемся SEO, заключается в том, чтобы обеспечить лучший пользовательский опыт (UX) в поисковой цели путем завершения многостраничных посещений сайта, участия и конверсий. Не позволяйте этому потеряться в том, как вы справляетесь с сегментацией страниц. Наличие сайта, который использует несколько длинных страниц прокрутки, принесет вам пользу только в том случае, если вы понимаете, что люди все равно захотят что-то найти на вашем сайте. Они не хотят попадать в начало страницы, на которой не сразу есть то, что они искали в резолюции, на которую они попадают.

  • Обязательно реализуйте элементы дизайна, которые поощряют прокрутку в любом направлении с момента их появления на странице. Рассмотрите элементы навигации, которые следуют за ними, как бы далеко они не решили прокрутить.
  • Если целью сайта является создание потенциальных клиентов, убедитесь, что точка конверсии существует в любой точке, где ваш посетитель может принять решение о конверсии. Используйте кнопки CTA и разместите их на переднем крае, чтобы увеличить конверсию.
  • Внутренняя ссылка использует те же понятия, что и сегментация целевой страницы. Отправьте пользователя непосредственно на то, что он ищет, а не на общую страницу (поэтому обратите внимание на использование экранированного фрагмента в качестве ссылки).

Если у вас есть какие-либо вопросы относительно наиболее эффективного метода использования этой тенденции дизайна без потери функциональности, обратитесь к тому, кто может показать вам то, что он знает, вместо того, чтобы просто сказать вам модные слова. Я видел неудачные попытки SEO для SPA во всех формах: от неправильной реализации hashbangs в виде модифицированных якорей, вставленных с помощью скрипта, до конца любого отображаемого URL-адреса, до полного игнорирования функциональности путем повторного ограничения содержимого на странице с длинной прокруткой. обычно будет на стандартной веб-странице. Вы избавите себя от головной боли и, скорее всего, в конечном итоге получите полезный сайт для вашего бизнеса и ваших посетителей в формате, который вы хотите, в отличие от нефункционального, но прекрасного произведения цифрового искусства.

Com?