Оптимизация одностраничных приложений: сделайте ваш JavaScript-сайт SEO-совместимым

1. Почему одностраничные приложения вредны для SEO?
2. Как решить эту проблему?
3. Какие еще шаги вы можете предпринять, чтобы оптимизировать обнаружение вашего SPA?
4. Выводы

Одностраничные приложения (SPA) сейчас в моде. Facebook и Gmail - это всего лишь несколько известных примеров. Все, кто знаком с поисковой оптимизацией, скажут вам, что SPA - это кошмар SEO. Но вы не должны отказываться от этой технологии как бесполезной. Вот почему.

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

Есть несколько способов объединить исключительную скорость и пользовательский опыт SPA с возможностью обнаружения обычных веб-приложений. Ряд наших проектов в MindK следуют этим путям. Сегодня мы поделимся ими с вами.

Оглавление:

1. Почему одностраничные приложения вредны для SEO?
2. Как решить эту проблему?
3. Какие еще шаги вы можете предпринять, чтобы оптимизировать обнаружение вашего SPA?
4. Выводы.

Почему одностраничные приложения вредны для SEO?

Традиционно веб-сайты использовали рендеринг на стороне сервера для своего HTML-контента. Это позволяет поисковым роботам (так называемым веб-сканерам или паукам) индексировать содержимое сайта. Этот процесс (называемый сканированием) - это то, как поисковые системы обнаруживают контент на вашем сайте и делают его доступным для общественности.

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

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

Теперь, когда какая-то часть содержимого на странице должна быть изменена, ваш браузер отправляет AJAX-вызов на сервер. В ответ сервер отправляет данные (чаще всего в формате JSON), которые ваш браузер требует обновить страницу.

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

А без контента нечего показывать в результатах поиска. Боты из соцсетей также испытывают трудности при сканировании SPA.

Вот как ваш новый блестящий сайт / веб-приложение становится катастрофой для SEO.

Как решить эту проблему?

1. Избегайте схемы сканирования AJAX от Google

В 2009 году Google представила обходной путь предназначена для того, чтобы сделать поисковую систему SPA удобной для пользователей.

Схема состояла из добавления hashbang (#!) К URL страницы; создание HTML-снимка страницы (может быть сделано через Предварительно обрабатывать ); кормить веб-пауков HTML-версией страницы через URL, где «#!» заменяется токеном «? _escaped_fragment_ =».

В результате сканеры будут индексировать содержимое страницы и предоставлять исходный URL-адрес в результатах поиска.

В 2015 году Google отказался от схемы сканирования AJAX. Компания перестанет поддерживать его во втором квартале 2018 года.

Теперь робот Googlebot сможет отображать URL-адреса с помощью #! в них сам по себе. Это означает, что вам больше не придется предоставлять предварительно отрендеренные страницы.

Недавний тест Бартоша Горалевича показал, что Google, как правило, способен выполнять JavaScript в клиентских приложениях, созданных с использованием различных JS-структур, кроме Angular.

В то же время другие поисковые системы (которые обрабатывают почти 37% поисков в США ) и боты в социальных сетях не так хороши в ползании

JavaScript как Google. Так что, если вы хотите быть высоко в Baidu, Яндекс Bing или Yahoo не полагаются на свои возможности сканирования AJAX.

Убедитесь, что ваш SPA индексируется с помощью методов, которые я опишу ниже.

Как поисковые системы сканируют сайты, построенные на различных платформах JS; источник: moz.com

2. Используйте рендеринг на стороне сервера

Несмотря на то, что Google утверждает, что может сканировать JavaScript, лучше быть в безопасности, чем потом сожалеть. Дело Хулу (почти 60% -ное снижение видимости) показывает, что отсутствие мер предосторожности может привести к катастрофическим последствиям. Вот почему мы в MindK используем рендеринг на стороне сервера, чтобы улучшить обнаружение SPA.

Вы можете взять приложение, построенное на клиентской JavaScript-инфраструктуре, такой как React, Angular или Vue.js, и отобразить его в статическом HTML и CSS на вашем сервере.

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

Это увеличит воспринимаемую скорость загрузки и улучшит UX!

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

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

Дальнейшее чтение: как настроить рендеринг на стороне сервера для реагировать , угловатый , а также Vue.js одностраничные приложения.

Источник: Medium.com

3. Используйте прогрессивное улучшение и обнаружение функций .

Источник: blog.teamtreehouse.com

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

• Сначала создайте простую HTML-страницу, к которой могут обращаться и индексировать веб-сканеры, и просматривать ее пользователи.
• Тогда используйте функция обнаружения постепенно улучшать опыт работы с CSS и JavaScript. Определите функции, поддерживаемые браузером пользователя, и включите / отключите их соответствующим образом. Проверьте, доступен ли API-интерфейс функции, и никогда не используйте пользовательский агент браузера для включения / отключения функций приложения. Не забудьте проверить свой SPA для многочисленных браузеров, прежде чем запускать его.
• Используйте серверный или гибридный рендеринг для извлечения контента пользователями по первому запросу. Убедитесь, что глубокие ссылки работают для вашего SPA. Никогда не перенаправляйте своих клиентов на свою домашнюю страницу, а не переводите их на глубоко связанный контент.
• Используйте адаптивный дизайн, который вмещает несколько устройств. Никогда не предлагайте разный контент пользователям и поисковым системам. Это правило применяется, даже если вы работаете динамическая подача изменить дизайн сайта для различных устройств.
• Не переводите ваш старый сайт в прогрессивный SPA за один раз. Вместо этого развивайте это в итерациях. Добавление одной функции за раз позволит вам увидеть, как каждая из них влияет на SEO.
• использование Консоль поиска , Он также обнаружит существование структурированных данных, многофункциональных карт, дополнительных ссылок и AMP.
• Добавить обозначения с Schema.org структурированные данные. Это позволяет вам суммировать первостепенные части вашего контента в машиночитаемом формате. Вы можете, например, указать тип данных страницы (например, указав, что это «Рецепт»). Или вы можете перечислить все ингредиенты, которые составляют рецепт. Просто убедитесь, что эти метаданные, на самом деле, правильны с Инструмент Google для тестирования структурированных данных , И никогда не маркируйте свой контент неверным типом данных.
• Протестируйте ваш SPA для нескольких браузеров, используя такие инструменты, как BrowserStack.com , Browserling.com или же BrowserShots.org ,
• Оптимизируйте свой SPA для скорости, прежде чем вы сделали его доступным для общественности. Хотя робот Googlebot может подождать более 5-20 секунд, прежде чем проиндексировать вашу страницу, немногие настоящие пользователи будут ждать так долго.

Какие еще шаги вы можете предпринять, чтобы оптимизировать обнаружение вашего SPA?

1. Составьте полный список страниц на вашем сайте

Специалисты по SEO рекомендуют создавать Sitemap.xml для любого веб-приложения. Даже после объявления о том, что робот Googlebot может сканировать приложения JavaScript, владельцы веб-сайтов продолжают сообщать о неиндексированных страницах.

Sitemap.xml - это файл, который содержит все URL-адреса для вашего приложения. Вы должны использовать свой файл Sitemap в качестве руководства, чтобы убедиться, что сканеры не закрывали глаза на какую-то важную часть вашего приложения.

Обратите внимание, что файлы Sitemap нуждаются в продвижении. Поэтому добавьте следующую строку в ваш файл robot.txt. Таким образом, робот Googlebot будет знать местоположение вашего файла Sitemap. После этого вы должны отправить свой файл Sitemap в Google Search Console, которая запустит индексацию вашего сайта.

Вам нужно будет добавить тег <meta name = ”фрагмент” content = ”!”> Вверху вашего сайта, чтобы робот Google знал, что на самом деле это SPA.

2. Используйте инструмент «Получить как Google»

В консоли поиска Google есть опция «Получить как Google». Получить из Google невероятно полезно для SPA, так как позволяет увидеть, какие элементы JS и CSS недоступны для индексации. Используя этот инструмент, вы можете обнаружить, что поисковая система отображает ваш SPA не полностью или игнорирует его важные функции.

Введите URL-адрес страницы и получите его так, как это сделали бы сканеры Google при индексации вашего сайта.

Запуск Google Search Console позволяет вам увидеть ваше приложение глазами сканера и узнать, какие дополнительные шаги вам нужно предпринять, чтобы улучшить свой рейтинг в поиске.

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

Опция «Fetch and Render» отправляет ответ HTTP, а также два скриншота страницы: один виден роботом Googlebot, а другой - глазами ваших пользователей. Он также показывает, какие ресурсы робот Googlebot не смог получить. Таким образом вы убедитесь, что ни один из необходимых ресурсов, таких как файлы JS, ответы сервера, API и т. Д., Не заблокирован файлом robots.txt.

Так как Google не поддерживает старую схему сканирования AJAX, на сайтах, которые ее используют, могут возникнуть непредвиденные проблемы. В качестве меры предосторожности Google теперь рекомендует использовать инструмент «Извлечение и отрисовка», чтобы протестировать SPA, в которых есть хеш-банги или экранированные теги фрагментов в их URL.

Так что сравните результаты для « #! ” Pages и“ ? _Escaped_fragment_ = ”URL, чтобы увидеть, есть ли какая-либо разница.

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

3. Используйте rel = канонические ссылки

Не только ссылки rel = canonical могут пригодиться, если у вас есть несколько страниц с одинаковым содержанием. Они также могут сообщить сканерам, какая часть URL является обязательной, а какая - нет.

Например, это позволит роботу Google определять, влияет ли параметр запроса на отображение страницы (параметры разбиения на страницы, такие как « ? Page = 11 ») или нет (параметры отслеживания, такие как « utm_source = facebook »).

Если у вас есть страница, к которой можно получить доступ по нескольким URL-адресам (как это часто бывает с сайтами электронной торговли) или несколько страниц с дублированным контентом, сделайте одну из них канонической.

Выберите страницу, которую вы считаете более важной (или ту, на которой больше всего посетителей / ссылок). Теперь добавьте ссылку rel = canonical, ведущую от неканонических страниц к канонической.

Таким образом, Google узнает, какая версия вашего контента является «официальной», и посчитает все ссылки на его дубликаты ссылками на эту каноническую страницу.

Чтобы использовать элемент rel = canonical , вам нужно использовать динамические URL-адреса. Кроме того, помните, что канонические URL-адреса и URL-адреса Sitemap должны совпадать.

И не забудьте проверить, ведут ли rel = canonical ссылки на реальный веб-сайт, и robots.txt позволяет Googlebot индексировать ваше одностраничное приложение.

4. Настройте Google Analytics

Google Analytics является важной частью SEO усилий. Он работает путем регистрации просмотров страниц каждый раз, когда пользователи приходят на вашу страницу. Но с SPA нет HTML-ответа, который бы генерировал просмотр страницы. Чтобы воспользоваться Google Analytics, вам нужно найти другой путь.

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

Еще одна замена Google Analytics Google Tag Manager ,

5. Используйте Open Graph и Twitter Cards

Акции социальных сетей могут сыграть решающую роль в ваших усилиях по созданию ссылок на SEO.

Внедрение Карты Твиттера позволит вашему SPA иметь богатый обмен на Twitter.

Чтобы включить правильный обмен через Facebook, вы должны рассмотреть возможность реализации Open Graph.

Когда кто-то делится ссылкой в ​​первый раз, паук FB сканирует страницу, собирает информацию о ней и генерирует визуальный объект, который впоследствии будет отображаться на страницах Facebook. facebook-х Открыть График Протокол позволяет оптимизировать и структурировать данные, которыми люди делятся через социальную сеть. Чтобы использовать Open Graph, вы должны добавить определенные теги <meta> в раздел <head> HTML-страницы, которую вы хотите опубликовать в социальной сети.

Самые полезные теги Open Graph <meta>:

• og: title (называет заголовок страницы);
• og: description (кратко описывает содержание вашего контента);
• og: type (указывает тип данных содержимого);
• og: изображение (указывает на URL картинки, используемой для иллюстрации страницы);
• og: url (указывает канонический URL страницы).

Вы можете использовать Facebook Инструмент отладчика проверить ваши теги OG.

Но этого недостаточно при работе с одностраничными приложениями без рендеринга на стороне сервера.

В отличие от Googlebot, сканеры Facebook пока не могут интерпретировать JavaScript!

Даже если вы добавили все правильные теги OG, пауки будут извлекать только обычный HTML. В результате вы получите сообщение, которое никто в здравом уме не поделится:

Источник: www.michaelbromley.co.uk

Один из способов обеспечить богатый социальный обмен для SPA - это создать условный редирект это будет служить метаданным для ботов Facebook. Таким образом, сканеры получат статический файл вместо того, чтобы иметь дело с JavaScript, а обычные пользователи будут перенаправлены на URL, который содержит фактическое содержимое.

Выводы

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

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

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

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

Похожие

Комментарии