SEO: индексирование приложения JavaScript

1. Как работает Angular Universal (теория)
2. Как настроить Angular Universal (практика)
3. Это действительно работает?
4. Sitemap.xml сканирование
5. Сканирование с поддержкой JS
6. Недостатки
7. развертывание
8. Пользовательский опыт
9. Что делать, если вы не используете Angular?
10. ReactJS
11. Vue.js
12. Предварительно обрабатывать-шпа-плагин
13. Prerender.io
14. Твоя очередь

Одной из наиболее важных задач SEO в настоящее время является Индексирование приложений JavaScript поисковыми системами.

С тех пор, как Google объявил об устаревании индексации по схеме « Ajax-crawling » (= на основе фрагментов, специфичных для URL), было проведено много экспериментов, чтобы определить реальные возможности индексации наиболее важной поисковой системы.

Вот например очень интересный Сравнение JavaScript-фреймворков :

Google утверждает, что регулярно интерпретирует JavaScript, но есть некоторые ограничения :

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

Большинство приложений не соответствуют этим правилам, поэтому они частично или не проиндексированы. Некоторые используют обходные решения, такие как prerender.io (см. Ниже).

Лучшее решение - обеспечить рендеринг на стороне сервера.

TL; DR: ВЫ ДОЛЖНЫ ИСПОЛЬЗОВАТЬ СТОРОНУ СЕРВЕРА .

Здесь мы представляем эффективное решение для приложений Angular 4: Угловой универсальный ,

Как работает Angular Universal (теория)

Angular Universal раньше была надстройкой Angular 2, и теперь она интегрирована в ядро ​​Angular 4. Это позволяет генерировать на стороне сервера то, что приложение должно было сделать на стороне клиента. После доставки в браузер эта предварительно отрендеренная версия повторно обрабатывается приложением JS, и все, что будет дальше, будет выполняться на стороне клиента.

Требуется развернуть NodeJS на вашем сервере (но планируется реализация PHP и Python).

Примечание: Angular 4 не очень отличается от Angular 2, он просто назван так из-за семантического версионирования. Если вы используете Angular 2, вам следует перейти на Angular 4.

Как настроить Angular Universal (практика)

Как и следовало ожидать, о практике можно многое рассказать, поэтому мы написали об этом отдельную статью: Как настроить Angular Universal ,

Это действительно работает?

Стандартное сканирование

Чтобы проверить возможности Angular Universal , мы сканировали наш сайт с помощью Screaming Frog SEO Spider . Поскольку мы хотим проверить, как сайт ведет себя без JavaScript , мы сначала запустили инструмент с параметром «Только текст»:

Это примерно эквивалентно базовой команде curl :

curl https://your-url.com

на вашем сайте: он просто загружает полученный HTML-код и не запускает JS или веб-рендеринг.

Время отклика очень хорошее (HTML доставляется менее чем за 500 мс). Сначала отметим, что инструмент правильно собирает все ссылки на страницах и сканирует весь сайт. Он собирает теги TITLE , H1 или META Description, и все содержимое HTML соответствует тому, что было бы в запущенном клиентском приложении. Следовательно, стандартное соотношение текста и слов на странице может быть вычислено так же, как если бы это был обычный веб-сайт.

У поисковых систем не возникнет проблем при индексации нашего сайта.

Sitemap.xml сканирование

В обычном приложении JS одним из обходных путей является предоставление файла sitemap.xml, чтобы поисковые системы индексировали все страницы.

Он работает также с Angular Universal , но это необязательно, так как все ссылки обнаруживаются на созданных страницах.

Сканирование с поддержкой JS

Наш второй тест включит JavaScript:

Как и ожидалось, сканирование теперь намного медленнее (поскольку инструмент пытается выполнить весь код JS). Мы часто получаем некоторое время ожидания, и ссылки на страницы не сканируются должным образом.

Кажется, что тег TITLE обрабатывается, но некоторые части страниц игнорируются. Все еще будут некоторые ошибки относительно индексации нашего сайта.

Недостатки

Документация

Это все еще молодая технология, она плохо документирована. Отсутствие документации может повлиять на проект.

развертывание

Angular Universal потребует сервера NodeJS на производстве. Это может быть обработано, конечно, но это все еще дополнительное ограничение.

Пользовательский опыт

Вы можете включить Universal только для роботов или для всех посетителей.

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

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

Настройка предварительной загрузки не легка и будет темой будущей статьи.

Что делать, если вы не используете Angular?

Другие основные платформы имеют эквивалентные решения, а когда их нет, вы все равно можете использовать prerender.io ).

ReactJS

• Наиболее известное серверное решение рендеринга для React - Next.js , Его очень легко настроить, но все же рекомендуется установить его в начале, а не завершить проект. Next.js предлагает компонент Link для управления маршрутами. Это также заменит конфигурацию Webpack для генерации пакета.
• В существующем приложении, использующем определенную конфигурацию sass и webpack, включая пользовательские загрузчики и т. Д., Может быть проще использовать Express и адаптировать конфигурацию. В этом случае вы можете использовать реагировать renderToString , И вам придется адаптировать реагирующий маршрутизатор (если используется).

В любом случае вам следует быть осторожным с Redux и убедиться, что он может предоставлять данные на стороне сервера.

Vue.js

Vue.js предлагает несколько решений рендеринга на стороне сервера:

• Nuxt.js , что является эквивалентом Next.js для VueJS. nuxt / стартер Шаблон позволяет загрузить проект, способный генерировать все страницы в статической версии. Эти файлы могут затем обслуживаться Nginx напрямую.

• Vue SSR более сложный Это довольно близко к Angular Universal. Вам придется адаптироваться к контексту выполнения, чтобы создать точную службу SSR. Только перед созданием и созданными хуками жизненного цикла доступны на стороне сервера.
  Он обеспечивает горячую перезагрузку (поэтому вам не нужно каждый раз перезагружать сервер Node), что очень удобно.

Предварительно обрабатывать-шпа-плагин

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

Prerender.io

Prerender.io - это общее решение для создания статической версии любого приложения JavaScript.

Это решение SaaS, но компания также предоставляет свой инструмент в качестве проект с открытым исходным кодом , так что вы можете установить его на свой собственный сервер.

По сути, это многопоточный сервис, обеспечивающий PhantomJS экземпляры, отвечающие за рендеринг страниц.

Рекомендуем запустить его за прокси Nginx (есть "официальная" конфигурация nginx и мы сделали немного приспособления ).

Твоя очередь

Вы это настроили? Вы хотите оставить отзыв? Вы сталкиваетесь с проблемами? СВЯЗАТЬСЯ С НАМИ если вам нужна помощь или заказать SEO АУДИТ !

Похожие

Комментарии