Angular + SEO = Универсальный инструментарий

1. Как Crawler читает наш сайт?
2. Проблема в действии ...
3. Как мы решаем это?
4. Заключение

Говоря об Angular, одной из самых больших проблем, с которыми мы сталкивались, является SEO. На самом деле, проблема не только в Angular, но в большинстве фреймворков проблема заключается в разработке приложения S ingle P age A (SPA). Прежде чем мы углубимся, нам нужно посмотреть, в чем заключается эта проблема.

Как Crawler читает наш сайт?

Сканеры, такие как Google, индексируют наш сайт, используя исходный код. Но при разработке с Angular мы используем « разметки » (двойные фигурные скобки) для рендеринга нашей страницы, что-то вроде этого:

<h1> {{title}} - {{author}} </ h1>

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

Поэтому, когда Google заходит на наш веб-сайт, он будет видеть только пометки, а не содержимое или даже некоторые теги без пометок:

<h1> - </ h1>

Но это бессмысленно для Google, то, что ему нужно увидеть, это:

<h1> Мой удивительный сайт - Тулио Кастро </ h1>

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

Проблема в действии ...

Давайте посмотрим на проблему в действии, а затем, как ее решить. Есть много способов решить эту проблему для каждой версии angular. Мы посмотрим, как решить эту проблему с помощью Angular 6 (он может работать с предыдущей версией, но я не тестировал).

Мы не будем проходить шаги по созданию Angular Project, мы только увидим результат (Вы можете получить окончательный код Вот и вы можете увидеть эту проблему в Интернете Вот ).

Начиная с обычного Angular Project, мы создали простой проект с одной ссылкой для отображения списка сообщений, а когда вы нажимаете на глубокую ссылку «Страница сообщений», он асинхронно загружает 100 сообщений ( Нажмите здесь, чтобы увидеть онлайн и проверьте исходный код):

Большой! Это работает! В этом примере мы используем « Route Resolver ”, Чтобы показать страницу только после загрузки списка сообщений. Таким образом, вы можете подумать: «Хорошо, если мы показываем страницу только после того, как данные были запрошены, значит, Google будет читать все, верно? Правильно? ПРАВО? " - Извините, но не.

Давайте посмотрим на исходный код этой страницы. Обе страницы (индекс и посты) будут иметь одинаковый исходный код, обратите внимание, что код останавливается на <app-root> </ app-root> . Именно в этом проблема, не важно, что и как вы загружаете контент, он всегда останавливается на первом загрузчике контента:

Вместо того, чтобы читать <app-root> </ app-root>, Google должен читать весь контент веб-сайта со всем открытым текстом.

Как мы решаем это?

Плохо, правда? Мы отказываемся от Angular из-за этого? Я так не думаю. Встречайте сильных Угловой универсальный инструментарий !

Теперь давайте посмотрим, как этот инструментарий решит нашу проблему. Сначала нам нужно установить этот инструментарий с помощью команды! Complex (NOT):

$ ng add @ ng-toolkit / universal

И запустите проект с:

$ npm run build: prod $ npm run server

На этом этапе мы должны увидеть прекрасный SEO-контент ( нажмите здесь, чтобы увидеть онлайн и проверьте исходный код):

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

Заключение

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

Окончательный исходный код этого примера можно найти Вот или вы можете проверить это работает онлайн Вот ,

Рекомендации