Официальный сайт движения «Москва без Лужкова!»
Главная Новости Москвы Наши новости Популярное
  • Новости
  • Новости
  • ВХОД В ЛИЧНЫЙ КАБИНЕТ
    логин
    пароль
       
    Новости

    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-контент ( нажмите здесь, чтобы увидеть онлайн и проверьте исходный код):

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

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

    Заключение

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

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

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

    Как Crawler читает наш сайт?
    Как мы решаем это?
    Как Crawler читает наш сайт?
    Таким образом, вы можете подумать: «Хорошо, если мы показываем страницу только после того, как данные были запрошены, значит, Google будет читать все, верно?
    Правильно?
    ПРАВО?
    Как мы решаем это?
    Плохо, правда?
    Мы отказываемся от Angular из-за этого?

     

    Найди свой район!

    Восточный

    Западный

    Зеленоградский

    Северный

    Северо-Восточный

    Северо-Западный

    Центральный

    Юго-Восточный

    Юго-Западный

    Южный

    Поиск:      


     
    Rambler's Top100
    © 2007 Движение «Москва без Лужкова!»