JavaScript, PWA и… SEO

1. 1. Судьба Chrome 41
2. 2. Googlebot не браузер
3. 3. Googlebot ничего не нажимает
4. 4. Почувствуйте поток
5. Беспроигрышная ситуация
6. SSR
7. Универсальное приложение
8. SEO-дружественные URL
9. Метаданные + микроформаты
10. скорость

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

С PWA вы получаете родные взаимодействия, push-уведомления и установку на домашний экран. Но это только часть картины. Кроме того, распространение намного проще благодаря стандартным сетевым связям, совместному использованию и распространению без магазинов.

Узнайте больше в Руководство для начинающих по PWA ,

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

По своей природе 90% PWA - это чисто JavaScript. В большинстве случаев разработчики выбирают некоторые современные JS-фреймворки, такие как React, Vue или Angular, чтобы предоставить пользователю наилучшие возможности. Но модель распространения - это сеть, для которой органический поиск жизненно важен.

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

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

У Google есть много ограничений в исполнении JavaScript. Другие поисковые системы вообще не обрабатывают JS. Тем не менее, это не значит, что мы не можем создавать блестящие интерактивные веб-сайты с современными фреймворками, которые работают и для поисковых систем! - Мария Цеслак - Старший технический SEO, Elephate

Мы спросили экспертов из агентства Elephate SEO об их выводах и рекомендациях относительно методов PWA SEO.

После проведения серия экспериментов с современными JS-фреймворками против Google результаты, которые они представили, действительно интересны:

1. Судьба Chrome 41

Google анализирует и рендерит JS, но с серьезными ограничениями - он использует безголовый браузер на основе Chrome 41 (2015 ') ... Если вы используете современные спецификации Ecma Script (как большинство разработчиков в настоящее время), ваш JS, вероятно, должен использовать много шайб / отступления, чтобы обеспечить такой же код / ​​структуру ссылок для Googlebot. Хуже всего то, что трудно сказать, какие элементы будут успешно интерпретированы и проиндексированы Google, а какие нет.

К сожалению для разработчиков приложений PWA, в Chrome 41 такие интерфейсы, как IndexedDB и WebSQL, отключены. Интерфейсы чаще всего используются для предоставления пользователям автономной поддержки.

2. Googlebot не браузер

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

Самое главное, алгоритмы Google пытаются определить, нужен ли ресурс с точки зрения рендеринга. Если нет, то, вероятно, Googlebot не получит его.

Эксперименты Elephate показывают, что сканер Google не дольше 5 секунд ожидает загрузки / отображения любого ресурса. Более того, он может «оптимизировать» поведение вашего приложения, не учитывая (все еще довольно распространенные) вызовы setTimeout () и т. Д.

Здесь индексатор Google просто пропустил скрипт и отобразил остальную часть страницы. Источник: Слон блог ,

3. Googlebot ничего не нажимает

Вы должны убедиться, что в DOM есть меню или нет, прежде чем нажимать на какие-либо пункты меню. Если вы полагаетесь на событие onClick, это может помешать браузеру проиндексировать структуру вашего сайта.

4. Почувствуйте поток

Поток индексации для классических приложений HTML и JS сильно отличается; Для индексации приложений JS Googlebot требует гораздо больше ресурсов и времени. Google официально заявил, что « отображение сайтов с поддержкой JavaScript в поиске Google откладывается до тех пор, пока у робота Google нет ресурсов для обработки этого контента. »

Источник: Google I / O '18

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

Итак, давайте проверим, как мы можем справиться с задачами JavaScript SEO на основе нашего собственного примера.

Vue Storefront является автономным магазином Progressive Web App для вашей электронной коммерции, способным подключаться к любому бэкэнду электронной коммерции (например, Magento , Pimcore, Prestashop или Shopware) через API. Он сделан с использованием фреймворка Vue.js - и да, это SPA (одностраничное приложение), и да, он хорошо работает с Google и другими сканерами. Ты можешь найти больше информации о нашем Github ,

«Следуя некоторым хорошим практикам JS SEO, одностраничные приложения (включая Progressive Web Apps) можно сканировать, отображать и индексировать, что означает, что они могут быть оптимизированы для SEO. Например, глядя на один из самых популярных веб-сайтов в Интернете ... YouTube. Да, YouTube построен на JavaScript (зайдите на сайт, отключите JavaScript в браузере и посмотрите, что произойдет), и он очень хорошо зарекомендовал себя.

Vue Storefront построен на универсальном JavaScript. Это одно из наиболее оптимизированных для SEO решений, рекомендованных Google ». - Мария Цеслак - Старший технический SEO, Elephate

Беспроигрышная ситуация

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

Есть решение. Вы можете отделить контент, обслуживаемый сканером (на стороне сервера), от суперсовременной версии CSR (на стороне клиента) для ваших пользователей. Вы можете сделать это. Штамп. Никаких последствий;)

SSR

Рендеринг на стороне сервера (SSR) является одним из методов, которые мы использовали при создании Vue Storefront. Это похоже на создание Изоморфного / Универсального Приложения, в котором вы пишете одну базу кода JS для рендеринга на стороне клиента / сервера.

Самые большие преимущества:

Универсальное приложение

Когда вы смотрите на любой из URL-адресов Vue Storefront - как https://demo.vuestorefront.io/c/women-20 - и нажмите «View Source», вы увидите, что Vue Storefront предоставляет браузеру уникальную разметку для каждого обслуживаемого URL.

Итак, похоже на 2003 '- классический HTML + CSS. Генерируется JavaScript, на стороне сервера.

Это как классическое веб-приложение. После загрузки первой страницы - приложение ведет себя как обычный SPA с точки зрения клиента - извлекает данные для всех последующих страниц с использованием AJAX + Service Workers.

Для Googlebot это просто HTML, который позволяет индексировать его оптимальным способом. Для разработчика это один и тот же код - независимо от того, отображается ли он на стороне клиента или сервера.

SEO-дружественные URL

Очень важно оптимизировать структуру ссылок - не только для того, чтобы избежать типичных ссылок на основе хэштега SPA (#products вместо / products?), Но и для настройки URL-адресов.

Vue.js предоставляет разработчику довольно крутой механизм Vue Router ( https://router.vuejs.org/ ) где вы можете добавлять и изменять пользовательские сопоставления URL / компонентов.

Метаданные + микроформаты

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

Выбранная вами среда должна позволять разработчикам работать на уровне шаблонов, создавая настраиваемую структуру HTML. Vue Storefront основан на шаблонизаторе - основные структуры могут быть изменены, заменены, удалены и т. Д.

Vue.js крут со своей системой. В конце концов, шаблоны скомпилированы в простой код JavaScript (например, шаблоны React JSX, но могут предложить гораздо больше, хотя их легче освоить для новичков;))

скорость

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

База данных NoSQL, кеширование и предварительный рендеринг помогают поддерживать время Vue Storefront SSR менее 0,2 с (по словам разработчиков, без оптимизации). ОК, просто хотел показать это;)

Переход к созданию приложений JavaScript - естественный шаг в веб-разработке. Если вы заботитесь о предоставлении наилучшего пользовательского опыта (особенно для мобильных пользователей), PWA - это то, что вы ищете. Мы создали Vue Storefront с учетом всех ограничений, которые имеют поисковые системы, и наше решение соответствует всем лучшим практикам JS SEO . В результате приложение является удобным как для пользователей, так и для поисковых систем.

• PWA действует как собственное приложение и обеспечивает лучшее взаимодействие с пользователем. Это стоит развивать, если вы хотите увеличить продажи. Есть много примеров, чтобы узнать, как начать, с Google витрина заканчивая нашим Исследование 30 лучших прогрессивных веб-приложений ,
• Поисковые системы не могут плавно обрабатывать приложения на основе JavaScript. Тем не менее, можно создать SEO-дружественное приложение.
• Рендеринг на стороне сервера - это лучшее решение для предоставления приложения JavaScript сканерам дружественным для SEO способом.
• WRS (служба веб-рендеринга - служба, используемая Google для отображения веб-сайта перед индексацией) - это своего рода браузер без головы; в некоторой степени это похоже на очень старый винтаж 2015 года - Chrome 41.
• Гораздо проще поддерживать динамически генерируемую (SSR) разметку HTML для оптимизации SEO, чем изящно понизить ограничения JS, чтобы робот Googlebot правильно индексировал ваше приложение.
• Вы должны убедиться, что ваши сценарии работают быстро. Убедитесь, что ваш сервер не замедляется при увеличении нагрузки на хост.

Читайте больше на Блог Elephate , Вы вряд ли найдете лучшее руководство по индексации JS.

Эта статья была написана Петром Карваткой в ​​сотрудничестве с Марией Цеслак из Elephate.

Похожие

Комментарии