1. Клиентский JavaScript и SEO
2. Google обрабатывает JavaScript
3. Убедитесь, что сканеры могут получить доступ к файлам JavaScript и CSS
4. Google не единственная поисковая система
5. Навигация по страницам может быть проблемой в некоторых случаях
6. Используйте канонические ссылки, чтобы избежать проблем с дублированием контента
7. Избегайте кода ES6 в производстве
8. JavaScript и рендеринг на стороне сервера
9. Динамический рендеринг
10. Тестирование JavaScript-приложения SEO
11. В итоге

Традиционные веб-приложения отображают HTML на сервере. WordPress, Magento, Ruby on Rails и большинство распространенных веб-приложений и фреймворков работают таким образом.

Рендеринг на стороне сервера идеален для SEO: полные страницы доставляются как браузерам, так и сканерам, и с точки зрения клиента навигация выглядит почти так же, как на статическом сайте.

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

Источник: Фабиан Грохс Unsplash

Прогрессивные веб-приложения являются кульминацией этой тенденции. PWA использует веб-технологии, такие как Сервисные работники , Манифесты веб-приложений и Cache API обеспечить веб-опыт, аналогичный родным приложениям. Прогрессивные веб-приложения предлагают улучшенную воспринимаемую производительность, плавные переходы страниц, автономные функции и установку домашнего экрана на мобильные устройства.

Эти преимущества привели широкое распространение прогрессивных веб-приложений. Pinterest перестроил свое веб-приложение как PWA и видел увеличение вовлеченности на 60% и 40% увеличение доходов от рекламы, созданной пользователями. Мобильный сайт Uber представляет собой PWA 50 КБ, который загружается в менее трех секунд в сети 2G. Использование интеллектуальных решений для прогрессивных веб-приложений дает реальные бизнес-преимущества.

Базовый процесс загрузки PWA выглядит следующим образом:

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

В реальном приложении этот процесс более сложный: я не упомянул здесь Service Workers, потому что сканеры Google их не поддерживают, но обычно это не будет проблемой SEO для хорошо спроектированного веб-приложения.

Клиентский JavaScript и SEO

Первое, что нужно понять, это то, что PWA не приносит никаких преимуществ SEO только потому что это PWA. Если ваш бизнес доволен тем, что предлагает его текущий сайт, то нет никаких оснований для внедрения Progressive Web App. Единственная причина для внедрения PWA состоит в том, чтобы воспользоваться преимуществами разработки, бизнеса и взаимодействия с пользователем, которые он может предоставить.

Источник: Артем Сапегин на Unsplash

Google обрабатывает JavaScript

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

Сканеры Google имеют некоторые ограничения что касается более нового JavaScript, и всегда целесообразно проверить, поддерживаются ли определенные функции JavaScript, используемые в вашем приложении, - о чем мы поговорим позже в этой статье. Если вы обнаружите, что Google не поддерживает ES6 или другие современные функции JavaScript, используемые в вашем приложении, рассмотрите возможность использования такого инструмента, как Babel, для переноса файлов JavaScript в более широко поддерживаемые версии или использования рендеринга на стороне сервера, чтобы представить сканеру предварительно отрендеренный страницы.

Сканеры Google более сложны в работе со сложными страницами JavaScript, чем когда-то, но владельцы сайтов должны помнить о некоторых проблемах при отображении контента на клиенте.

Убедитесь, что сканеры могут получить доступ к файлам JavaScript и CSS

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

Google не единственная поисковая система

Google, вероятно, будет правильно сканировать ваше веб-приложение JavaScript. То же самое не правда DuckDuckGo, Baidu, Yandex и других поисковых систем. Если эти поисковые системы важны для вашего бизнеса, обязательно прочитайте следующий раздел этой статьи, где я буду обсуждать рендеринг JavaScript-приложений на стороне сервера.

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

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

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

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

Избегайте кода ES6 в производстве

Сканеры Google основаны на браузере Chrome 41, выпущенном до ES6. Прозрачный код, основанный на функциях ES6, таких как функции стрелок, или вообще его избегайте.

Источник: freestocks.org на Unsplash

JavaScript и рендеринг на стороне сервера

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

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

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

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

Рендеринг страниц React или Vue на сервере более сложен, чем простое обслуживание оболочки приложения и некоторых файлов JavaScript, но с такими современными инструментами, как Next.js Создание приложений React, которые обеспечивают превосходную производительность и SEO при начальной загрузке, наряду со всеми преимуществами PWA, относительно просто. Next.js - это инфраструктура JavaScript, которая по умолчанию обеспечивает рендеринг на стороне сервера для начальной загрузки, автоматическое разбиение кода и маршрутизацию на стороне клиента.

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

Источник: Фил Десфордж на Unsplash

Динамический рендеринг

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

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

Тестирование JavaScript-приложения SEO

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

Просмотреть как Google инструмент - лучший способ проверить, как Google видит ваше веб-приложение. Обязательно используйте функцию «Извлечение и отображение», иначе код JavaScript не будет обрабатываться.

В итоге

Не так давно, клиентские веб-приложения были кошмаром SEO. Сегодня компании могут безопасно использовать Progressive Web Apps и другие веб-приложения JavaScript, не оказывая негативного влияния на SEO.

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

Похожие

Комментарии