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. Тебе сейчас

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

Примечательно, что, поскольку Google объявил об отказе от индексации « схемы сканирования Ajax », то есть с использованием определенных фрагментов URL, проводится много экспериментов, чтобы попытаться определить реальные возможности индексации движка. доминирующее исследование.

В частности, мы читаем очень интересные сравнение Javascript-фреймворков :

И поэтому, если Google регулярно объявляет, что интерпретирует Javascipt, на самом деле понимают, что принцип страдает от определенные ограничения :

• Только содержимое, присутствующее на странице во время события загрузки, индексируется;
• Javascript должен работать быстро (кажется, что он должен стремиться менее 5 секунд ).

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

Единственное техническое решение, которое, кажется, работает достаточно эффективно - это рендеринг на стороне сервера.

TL; PL (слишком долго, не читается): вы ДОЛЖНЫ использовать рендеринг на стороне сервера (или рендеринг на стороне сервера ).

Мы представляем здесь техническое решение, которое работает и позволит вам индексировать ваши приложения Javascript, разработанные с помощью Angular 4: использование Угловой универсальный ,

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

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

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

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

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

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

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

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

Этот метод похож на использование простой команды

curl https://your-url.com

на вашем сайте: он пытается восстановить HTML самым простым способом, не пытаясь выполнить JavaScript или веб-рендеринга.

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

Поисковые системы не будут иметь проблем с индексацией этого сайта.

Сканирование файла sitemap.xml

В классическом приложении Javascript одним из обходных путей, определяемых невосстановлением всего HTML (особенно зависимым от действий клиента), является правильное заполнение файла sitemap.xml, чтобы «направлять» движок на страницы, которые мы хотим индексировать.

Здесь он работает естественно, но не является необходимым, поскольку сам сайт очень хорошо реагирует на Universal и разметка HTML полностью читаема.

Сканирование с рендерингом JS

Чтобы протестировать «клиентскую» часть, мы попробовали второй обход , на этот раз с использованием « JavaScript » рендеринга:

Конечно, сканирование намного медленнее, поскольку инструмент пытается выполнить JavaScript на стороне клиента. Здесь мы видим, что инструмент регулярно отключается и не может правильно просматривать все ссылки на странице. Поэтому мы должны предоставить страницы карты сайта , чтобы помочь ему просмотреть все URL-адреса сайта.

Здесь мы обнаруживаем, что инструмент правильно извлекает тег TITLE, но не способен интерпретировать весь HTML, и если мы не использовали Universal , вполне вероятно, что классический робот сканирует индексация не может правильно проиндексировать весь сайт.

Недостатки решения

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

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

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

С точки зрения развертывания, Angular Universal требует присутствия сервера NodeJS в производственной среде (тогда как классическое приложение может содержать контент с обычным статическим веб-сервером).

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

Можно сделать «универсальным» для всех посещений или только для роботов. В случае, если Angular Universal используется для всех посетителей, вы сможете наблюдать неприятные эффекты, такие как вспышки в случае отмены операции на стороне сервера, а затем повторного выполнения на стороне клиента.

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

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

Другие основные структуры часто имеют эквиваленты, и если нет, у вас все еще есть универсальный вариант использования prerender.io другое (концептуально) решение от Angular Universal, но оно дает те же преимущества: доступный рендеринг HTML без запуска Javascript на стороне клиента и, следовательно, как повышение производительности на стороне пользователя, так и сайт доступны для индексации для поисковых систем.

ReactJS

• Самый известный для реакции Next.js , Это очень просто настроить. Лучше всего использовать его с самого начала проекта. Next.js предоставляет компонент Link для управления маршрутами. Это также заменит конфигурацию Webpack для генерации пакета.
• В случае уже существующего приложения, особенно если используется определенная конфигурация веб-пакета, sass или другой экзотический загрузчик ... лучше настроить Express и адаптировать нашу конфигурацию. В этом случае мы используем renderToString Реакция-дом. Также будет необходимо адаптировать реагирующий маршрутизатор если мы используем это.

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

Vue.js

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

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

• SSR вид более сложная альтернатива для реализации, которая концептуально больше напоминает решение, которое мы представили вам в статье для Angular. Необходимо соблюдать осторожность, чтобы учитывать контекст выполнения (сервер или клиент), чтобы позволить генерации SSR иметь все данные. Действительно, только некоторые перехватчики (до создания и создания ) жизненного цикла компонентов доступны на стороне сервера.
  Опыт разработчика был учтен с горячей перезагрузкой, чтобы избежать необходимости систематически перезагружать его сервер узла.
  Маленькая глазурь на торте, французское сообщество VueJS-RU переводит официальная документация ,

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

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

Prerender.io

Prerender.io - это ОБЩЕЕ решение, чтобы иметь статическую версию приложения Javascript.

Это сервис SAAS, на котором вам нужно будет создать учетную запись, но компания также распространяет свой инструмент в форме проект с открытым исходным кодом , что позволяет установить его на свой сервер. Таким образом, вы получите многопоточный сервис http, содержащий PhantomJS расчет рендеринга страниц.

Мы рекомендуем вам настроить его на запуск сервера NodeJS, который прослушивает, например, порт 3000, и поместить NodeJS перед этим сервером Nginx, который будет прокси (есть «официальная» конфигурация для nginx у нас есть подходит ).

Тебе сейчас

Вы положили его на место? Вы хотите оставить отзыв? Вы сталкиваетесь с проблемами? Связаться с Нами Если вам нужна помощь или подтвердить ее, попросив нас SEO технический аудит !