30-секундное резюме:
- Любой, кто работает над корпоративным SEO в 2020 году, в какой-то момент столкнулся с этим сценарием веб-архитектуры с клиентом. Такие фреймы, как React, Vue и Angular, облегчают веб-разработку.
- Существует множество тематических исследований, но один бизнес, который Croud обнаружил, перешел на гибридную среду Shopify / JS с внутренними ссылками и контентом, заимствованным через JS. В течение следующих 6 месяцев они теряли трафик стоимостью примерно 8000 долларов в день … около 1,5 миллионов долларов.
- Опытные читатели среди нас скоро начнут чувствовать, что они на знакомой территории.
- Вице-президент по стратегическому партнерству Энтони Лавалл (Anthony Lavall) обсуждает фреймворки JavaScript, которые затрагивают самые важные элементы SEO
В течение последних трех лет, возглавляя команду SEO в Croud в Нью-Йорке, 60% наших клиентов прошли через некоторую форму миграции. Еще ~ 30% перешли в или из SPA (одностраничного приложения), часто используя AJAX (асинхронный Javascript и XML) фреймворк в различной степени.
Любой, кто работает над корпоративным SEO в 2020 году, в какой-то момент столкнулся с этим сценарием веб-архитектуры с клиентом. Такие фреймы, как React, Vue и Angular, облегчают веб-разработку. Это особенно актуально при создании динамических веб-приложений, которые предлагают относительно быструю интерактивность запросов (после загрузки исходных библиотек, которые их кормят, хорошим примером является Gmail), используя возможности современного браузера для визуализации кода со стороны. Клиент (JavaScript) Затем используйте веб-работников для доставки функциональности сетевых запросов, которая не требует традиционного URL-вызова на основе сервера.
С увеличением функциональности и возможностей реализации возникает стоимость: вопрос производительности SEO. Я сомневаюсь, что любое чтение SEO чуждо этому вопросу. Тем не менее, вы все еще можете быть в неведении относительно ответа.
Почему проблема?
Доход в виде потерянного органического трафика через потерянные органические классификации. Это так просто. Веб-разработчики, которые рекомендовали JavaScript-фреймворки (JS), как правило, не несут прямой ответственности за долгосрочную эффективность бизнеса. Одной из основных причин, почему SEO существует в 2020 году, должно быть смягчение стратегических ошибок, которые могут возникнуть из-за этого. Органический трафик часто воспринимается как данность и не считается важным (или контролируемым), и именно здесь возникают огромные проблемы. Существует множество тематических исследований, но один наш бизнес перешел на гибридную среду Shopify / JS с внутренними ссылками и контентом, заимствованным через JS. В течение следующих 6 месяцев они теряли трафик стоимостью примерно 8000 долларов в день … около 1,5 миллионов долларов.
В чем проблема?
Есть много проблем. SEO уже пытаются обработать множество сигналов от самого интенсивного торгового алгоритма, когда-либо созданного (Google … на всякий случай). Переход от традиционного веб-сайта, предоставляемого сервером (например, Википедия), к современной среде потенциально чреват проблемами SEO. Некоторые из которых:
-
Сканирование, рендеринг и индексирование роботов поисковых систем. Сканеры поисковых систем, такие как Googlebot, адаптировали свой процесс сканирования для включения рендеринга JavaScript (по состоянию на 2010 год) для полного понимания кода на веб-страницах AJAX. , Мы знаем, что Google улучшает понимание сложного JavaScript. Других поисковых роботов может не быть. Но это не просто вопрос понимания. Отслеживание всего Интернета – непростая задача, и даже ресурсы Google ограничены. Они должны решить, стоит ли сканировать и отображать сайт, основываясь на предположениях, которые имеют место задолго до того, как JS может быть найден и представлен (такие метрики, как предполагаемое количество страниц, история домена, данные WhoI, авторитет домена, так далее.) .
Процесс сканирования и рендеринга Google – вторая фаза обработки / индексации (объявлено в Google I / O 2018)
-
Скорость: одно из самых больших препятствий для приложений AJAX. Google сканирует веб-страницы без кэширования, поэтому эти громоздкие первые загрузки одностраничных приложений могут быть проблематичными. Скорость можно определить несколькими способами, но в данном случае мы говорим о времени, которое требуется для критического выполнения и обработки всех ресурсов на странице с большим количеством JavaScript по сравнению с HTML-страницей с меньшим количеством ресурсов.
-
Ресурсы и рендеринг. В традиционном серверном коде DOM (объектная модель документа) визуализируется по существу после формирования CSSOM (объектной модели CSS) или, проще говоря, DOM это не требует намного больше манипуляций после поиска исходного кода. Есть некоторые предостережения в отношении этого, но можно с уверенностью сказать, что код на стороне клиента (и несколько библиотек / ресурсов, из которых может быть получен код) увеличивает сложность окончательного DOM, что означает увеличение ресурсов ЦП, требуемых для обеих сторон. Поиск сканеров по клиентским устройствам. , Это одна из наиболее важных причин, по которой сложная структура JS не будет предпочтительной. Тем не менее, это часто упускается из виду.
Теперь все вышеперечисленное перед этим предложением предполагает, что эти страницы AJAX были созданы без учета SEO. Это немного несправедливо по отношению к агентству современного веб-дизайна или собственному разработчику. Как правило, для смягчения негативного влияния на SEO есть некоторые соображения (мы рассмотрим это более подробно). Опытные читатели среди нас теперь начнут чувствовать, что они находят знакомую территорию. Территория, которая вызвала множество дискуссий по электронной почте между заказчиками, разработчиками, проектировщиками и командами SEO, связанных с тем, идет ли такая миграция к органическому ранжированию танков (к сожалению, это часто происходит).
Проблема заключается в том, что решения для создания приложений AJAX, которые больше работают как серверный HTML для целей SEO, запутаны в спорах; в основном связано с его эффективностью. Как мы проверяем эффективность чего-либо для SEO? Мы должны внедрить и проанализировать изменения SERP. А результаты миграции на JavaScript-фреймворки неоднократно связаны с падением трафика. Взгляните на еженедельные репортажи о «сайтах JS в поисковой группе», которые ведет Джон Мюллер, чтобы найти какое-либо подтверждение.
Давайте посмотрим на некоторые из наиболее распространенных тактик смягчения для SEO в отношении AJAX.
Различные решения для смягчения SEO AJAX
1. Универсальный / Изоморфный JS
Изоморфный JavaScript, AKA Universal JavaScript, описывает приложения JS, которые выполняются как на клиенте, так и на сервере, поскольку клиент или сервер могут запускать
