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

На очередной конференции компании 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-адрес является действительной ошибкой.

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

Еще новости

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

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





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

    Вверх