Одностраничное приложение

На очередной конференции компании Google (которая из-за карантинных мер проводилась в записи) веб – мастера поделились секретом, как сделать одностраничное приложение доступным для обнаружения через поиск Google.

Как работают одностраничное приложения?

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

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

Их часто называют просмотрами, а не страницами.

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

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

И различные просмотры динамически загружаются в эту оболочку, что сокращает объем данных, необходимых для отправки по сети.

Как улучшить одностраничное приложение (+пример)?

Итак, на что нам нужно обратить внимание при создании одно страничных приложений?

Лучше всего рассмотреть закономерность на примере. Это может быть любое приложение, которое нужно протестировать и улучшить там, где существует потенциал.

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

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

Проблема №1 – скрытая геолокация

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

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

Проблема №2 – сбои в отображении страницы на мобильном телефоне

Или вот, еще одна возможная проблема – при запуске теста для мобильных устройств основной контент не отображается. Как в этом разобраться? Чаще всего проблема прячется в коде (ошибочное использование неподдерживаемой функции). Это важный момент. Ведь иногда разработчики одно страничных приложений забывают, что код не может пойти по ошибочному сценарию.

Проблема №3 – один URL-адрес на разных страницах

В некоторых онлайн – магазинах не меняется URL-адрес при переходе между различными просмотрами.

При этом поскольку робот Googlebot использует URL-адреса для поиска этих различных «страниц» или просмотров в нашем случае, это будет означать, что робот Googlebot будет видеть только домашнюю страницу и ничего больше.

Чтобы исправить это, можно использовать API истории и правильную разметку ссылок с атрибутами href, чтобы отображать другие просмотры как URL-адреса в ссылках.

Проблема №4 – неправильные заголовки

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

Это бесполезно, когда люди ищут в магазине один конкретный продукт или определенную категорию.

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

Проблема №5 – неправильная обработка недопустимых URL-адресов

Очень важно отметить, как одно страничные приложения обрабатывают сценарии ошибок, например, недопустимые URL-адреса. Иногда магазин отображает сообщение об ошибке, но сервер сообщает HTTP 200.

Это небольшая проблема, особенно в одно страничных приложениях. Все потому, что сервер на самом деле больше не обрабатывает ошибки. Обычно сервер обслуживает веб-приложение во всех случаях, а затем JavaScript и браузер решают, нужно ли отображать ошибку.

Но коды состояния HTTP действительно помогают роботу Googlebot и браузерам решить, как поступить с ответом. Так что мы должны это исправить.

Вот, к примеру, есть JavaScript, который имеет дело с ошибкой. Он считывает URL-адрес и извлекает данные, а если это не удается, отображает сообщение об ошибке. Но мы не можем просто указать JavaScript, чтобы он сообщал о другом коде состояния, потому что этот код состояния не может быть изменен после того, как сервер отправил его.

Что мы можем сделать, так это настроить наш сервер так, чтобы он отвечал кодом ошибки для определенного URL-адреса, например, /not-found дает 404 или /maintenance дает 500 и т.д.

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

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

Еще новости

Александр Лынка
Александр Лынка
19:11 06 Jun 21
Спасибо команде специалистов за высокое качество работы, профессионализм и отличное отношение к клиентам!
Oleg Omelchenko
Oleg Omelchenko
19:11 06 Jun 21
Лучшее соотношение цены и качества выполненной работы.
Алексей Шевченко
Алексей Шевченко
12:49 18 May 21
Ребята настоящие профессионалы своего дела!
See All Reviews

Комплексное продвижение сайта: что это?

  • поисковый аудит сайта и тестирование по чек-листу с 50+ пунктами;
  • подготовка проекта к полноценной индексации в поисковых сетях;
  • работа с контент-планом: от составления до публикации;
  • настройка сбора аналитики для мониторинга и улучшения;
  • внутренняя и внешняя оптимизация проекта;
  • результат — прирост целевого трафика.

Плюсы комплексного продвижения

  • совместно проведем анализ результатов, определим KPI;
  • работает честно: вам не придется платить за SEO на этапе внедрения;
  • проводим знакомство с командой и налаживаем совместную работу;
  • в результате наши услуги всегда окупаются;
  • эффективность работы измеряем в принесенной прибыли;
  • проводим вас по пути от трафика до конверсии и продаж.

Этапы продвижения

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

Поисковый аудит сайта

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

Анализ юзабилити

SEO-специалист обязан изучить все варианты конверсии для пользователя сайта. Если некоторые пути окажутся сложными, трафик не конвертируется в продажи. Это означает, что все попытки оптимизации будут неэффективными, так как для Google важны поведенческие факторы.

Формирование семантического ядра

Это — один из «столпов» продвижения. Без правильного семантического ядра не достичь нужного объема трафика и не победить более сильных конкурентов в борьбе за ТОП. Особенно это важно, если проект продвигается «с нуля». По этой причине мы подбираем несколько сотен релевантных запросов и все детально объясняем клиенту.

Внутренняя оптимизация сайта

Мы работаем в команде с разработчиком вашего сайта или берем все внедрения на себя. Дополнительно проводим оптимизацию семантики, чтобы добиться корректной индексации в поисковой системе. Это крайне важно, если ведется продвижение проекта под Google.

Внешняя оптимизация сайта

Проводим анализ конкурентов инструментами Ahrefs, формируем анкор-лист и перечень доноров, используя собственные наработки. Повышаем Domain Rank, не забывая об оптимальной динамике ссылочного профиля.

    ТМ Расткрутка сайтов - продвижение





    Мы проанализируем Ваш сайт и укажем слабые места

    Вверх