в Создание сайта

Angular Universal: всё, что нужно знать SEO-специалисту

Автор: Джон Линкольн (John Lincoln), директор агентства интернет-маркетинга Ignite Visibility, преподаватель digital-маркетинга в Калифорнийском университете в Сан-Диего, США.

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

При этом стоит иметь в виду, что «легко» – это относительный термин в данном случае. Работа с Angular Universal требует определённых технических знаний и навыков. Вам почти наверняка придётся привлекать к этому процессу команду разработчиков. Но когда вы закончите работу, то ваш сайт будет предоставлять оптимизированные страницы, которые поисковые системы смогут легко находить и индексировать.

В этом руководстве мы разберёмся, что представляет собой Angular Universal и почему о нём важно знать оптимизаторам.

Проблемы с SEO

Angular – это фантастический фрейморк для создания модульных, удобных для пользователей веб-приложений. Однако его использование влечёт за собой проблемы с SEO. Это связано с двумя причинами.

Во-первых, для доставки контента Angular в значительной мере опирается на скрипты, в результате чего некоторые поисковые роботы «не видят» тот контент, который видят пользователи.

В качестве примера взгляните на страницу с документацией по Angular Universal. Она отображается при помощи Angular.

По мере прокрутки страницы вниз вы видите довольно много контента. И предполагаете, что весь он индексируется. Однако это не обязательно так.

Кликните правой кнопкой мыши и выберите пункт «Просмотр кода страницы» в контекстном меню – вы увидите 100 строчек исходного кода. Но там не будет того контента, который вы видели, когда просматривали страницу в обычном режиме.

Это, если вкратце, и есть проблема с Angular. Пользователи будут видеть контент, тогда как поисковые роботы – исходный код, в котором контента нет!

Есть и ещё одна проблема с SEO: скорость. Приложения на Angular часто имеют низкую скорость загрузки.

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

Кроме того, скорость загрузки является фактором ранжирования в мобильном поиске, поэтому позиции сайта могут пострадать, если он загружается слишком медленно на мобильных устройствах.

Но Google говорит…

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

Для начала, Google – это не единственная поисковая система в мире. Если вы хотите, чтобы ваше приложение на Angular ранжировалось в Bing или DuckDuckGo, то вам потребуется предпринять ряд шагов для того, чтобы это произошло.

Далее, это может быть ситуация, когда Google может индексировать некоторые сайты на Angular, но не ваши. Не все Angular-приложения создаются одинаковыми. Ваше как раз может быть исключением для алгоритма Google.

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

Возможные решения

К счастью, есть способы сделать ваш сайт на Angular более дружественным к SEO.

Один из популярных вариантов решения этой проблемы — динамический рендеринг. Это когда вы используете такой инструмент, как Puppeteer, чтобы сгенерировать HTML-файлы, которые будет легче потреблять веб-краулерам.

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

Это достойное решение, но оно по-прежнему не решает проблему скорости. Для этого вы, возможно, захотите использовать Angular Universal.

Что такое Angular Universal?

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

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

Angular Universal управляет рендерингом на стороне сервера (SSR). Он обрабатывает содержимое HTML и CSS, показываемое пользователю, заранее – до того, как он его увидит. Это означает, что пользователь будет загружать статическую HTML-страницу вместо выполнения кода на стороне клиента. В результате страница будет загружаться быстрее. Кроме того, поскольку это статический HTML, поисковые роботы смогут индексировать контент.

В итоге выиграют все.

Почему это важно

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

Проще говоря: ваш сайт не будет ранжироваться, если он не может быть проиндексирован. Если ваш сайт работает на базе Angular, то вам нужно предпринять дополнительные шаги, чтобы его содержимое появлялось в поисковых системах. Вот почему нам нужен Angular Universal.

Недостатком, конечно, является тот факт, что его внедрение будет стоить денег. Для выполнения этой задачи потребуется нанять квалифицированных программистов, чтобы они добавили SSR на сайт.

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

Как внедрить Angular Universal

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

Прежде, чем заняться этим, нужно получить хотя бы базовые знания об Angular, работе с интерфейсом командной строки (CLI), Typeipt и веб-серверах. В противном случае, вы рискуете не справиться.

Чтобы внедрить Angular Universal, нужно выполнить следующие шаги:

  1. Инсталлируйте зависимости;
  2. Обновите приложение Angular;
  3. Используйте CLI для создания пакета Universal;
  4. Настройте сервер для запуска пакета Universal;
  5. Запустите приложение на сервере.

Рассмотрим каждый из этих шагов подробнее.

1. Инсталлируйте зависимости

Если у вас имеется опыт работы с Angular, то вы уже знаете о Node.js. Это среда выполнения, которая компилирует код TypeScript в приложение JavaScript.

Node.js поставляется с менеджером пакетов, называемым Node Package Manager или, если коротко, npm. Вы будете использовать его для инсталляции зависимостей.

Откройте командную строку и выполните следующий код:

npm install –save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader

Дайте ему несколько (или много) минут, чтобы всё установить.

2. Обновите Angular-приложение

Далее вам нужно будет подготовить своё приложение Angular к внедрению Universal. Этот процесс будет включать четыре шага:

  • Добавьте поддержку Universal. Откройте корневой модуль (обычно AppModule) и добавьте идентификатор приложения в импорт BrowserModule. Вы сможете сделать это в разделе «Imports» чуть ниже @NgModule.
  • Создайте корневой модуль сервера. Далее вам нужно будет создать новый модуль с именем AppServerModule. Убедитесь, что он импортирует ServerModule из зависимости платформа-сервер, которую вы добавили на предыдущем шаге.
  • Создайте основной файл. Вам понадобится основной файл для вашего пакета Universal. Создайте его в корне (в папке ) и экспортируйте класс AppServerModule из этого файла.
  • Создайте файл конфигурации. Класс AppServerModule нуждается в файле конфигурации. Создайте его в формате JSON. Это должно выглядеть примерно так:

3. Создайте новую цель сборки

Ваш исходный каталог Angular должен включать файл с именем angular.json. Вам необходимо обновить этот файл в разделе «architect». Это будет выглядеть примерно так:

"architect": {
"build": { … }
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/my-project-server",
"main": "/main.server.ts",
"tsConfig": "/tsconfig.server.json"
}
}
}

Обратите внимание на атрибут «builder», который находится на четвёртой строчке. Значение после двоеточия («server») – это имя сервера. Вы можете изменить его, если захотите назвать его по-другому.

Теперь вы можете создать своё приложение. Если вы сохранили сервер с именем «server», то просто перейдите в командную строку и введите следующее:

ng run my-project:server

В результате вы увидите примерно следующее:

Date: 2018-12-12T12:42:09.601Z
Hash: 1caced0e9434007fd7ac
Time: 4122ms
chunk {0} main.js (main) 9.49 kB [entry] [rendered]
chunk {1} styles.css (styles) 0 bytes [entry] [rendered]

4. Настройте сервер

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

Для этого создайте новый файл с именем server.ts. В этом файле вы определите свой движок приложения.

Детали этого кода немного выходят за рамки данного руководства, но вы всегда можете заглянуть в примеры в документации по Angular Universal.

5. Запустите приложение на сервере

Теперь вы можете, наконец, запустить приложение на сервере. Для этого настройте веб-пакет, который обрабатывает файл server.ts, созданный на предыдущем шаге.

Назовите файл конфигурации webpack.server.config.js. Ещё раз просмотрите документацию по Angular Universal, чтобы определить точный вид кода в файле. Возможно, вам придётся адаптировать этот код к вашему собственному соглашению об именах.

Когда вы закончите работу с файлом, в папке dist у вас будет две папки: браузер и сервер.

Чтобы выполнить серверный код, просто введите в командной строке следующее:

node dist/server.js

Вместо заключения

Хотя Angular позволяет разработчикам быстро создавать высококачественные приложения, он не всегда работает хорошо с точки зрения поисковых роботов и SEO.

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

Мы всегда рекомендуем своим клиентам иметь базу в HTML-формате, а Angular использовать для показа других элементов на странице. Мы советуем придерживаться такого подхода для всего, что связано с JavaScript, ещё с 2010 года. Что касается Angular Universal, то это решение работает по тому же принципу.

Будьте осторожны, внедряя изменения в свои ресурсы – особенно что касается JavaScript и Angular. А перед запуском всегда отдавайте сайт на проверку надёжной SEO-компании.

Angular Universal: всё, что нужно знать SEO-специалисту




Рассмотрим детальнее, как происходит загрузка и рендеринг содержимого на SPA-сайтах: Пользователь запрашивает html содержимое сайта. December 15, 2019, интересные публикации Дебаггинг с watchpoints в Mozilla Firefox Как справиться с большим потоком траффика и быть к myTarget обновила систему рекламной аттестации для маркетологов нему готовым Аналог caniuse для вёрстки писем Производительность CSS-in-JS Как устроено тестирование фронтенда в Яндекс. Спонсоры этого выпуска DigitalOcean и Atlas аудио google анонсировал новый инвентарь и инструменты монетизации для приложений лог чата. Что такое SPA, sPA single Page Application ) одностраничное JavaScript приложение, которое запускается и работает в браузере. Руководство по адаптивной верстке. Продвижение в интернете

Полное руководство для современной веб-разработки. Приложение определяет, на какой странице находится пользователь, и какое содержимое ему нужно отобразить. Tigran Tadevosyan, uncategorized, что представляет собой Angular Universal и в чём преимущества этого модуля для SEO. Пагнаааалеее!1 Поддержите наш проект на Patreon: uWebDesign на Patreon. Для запрашивания информации с API на сервере без повторного запрашивания ее в браузере рекомендую использовать: Пример сборки в Docker с использованием Multi-stage builds: Потестить: сообщество universal в телеграмме в 12:07 3 2,7k 28 в 14:31 28 3,9k.


comments

Rozokowa

В этом руководстве мы разберёмся, что представляет собой. Angular Universal rankRanger начал отслеживать FAQHow-to результаты в Google и почему о нём важно знать оптимизаторам. Сообщение, angular Universal : всё, что нужно знать SEO-специалисту появились сначала. Angular Universal : всё, что нужно знать SEO-специалисту. Что представляет собой Angular Universal и в чём преимущества этого. К счастью, Angular Universal позволяет легко перепрыгнуть через него. Не все приложения Angular созданы равными.

Ответить
Anujo

В какой-то момент мы столкнулись. Тогда нужно создать файл utes. Ts с если ваша целевая аудитория дачники массивом роутов сервера. Не беспокойтесь, библиотека Preboot. Js запишет все события, которые.

Ответить
Fadezo

В случае, sEO - ориентированного сайта добавление мета-тегов очень важно. Angular Universal это библиотека для построения серверного ренеринга Angular. Внутри вы всё равно используете рендеринг через NodeJS. Для построения статики нужно указать роуты для обработки. Не найдено: знать специалисту. Статья будет полезна, яндекс.Диалоги увеличили тайм-аут для ответа навыка до 3 секунд sEO - специалистам и владельцам сайтов, которые хотят перейти.

Ответить
Fatebyji

В браузере пользователя запускается JavaScript- приложение, а все. На «традиционные» URL, например, html5 mode для. SPA-сайты это настоящее и будущее, поэтому не нужно бояться брать. Js и SEO: как оптимизировать реактивные сайты для поисковых. Angular Universal : всё, что нужно знать SEO-специалисту archengines.ru. Если основной контент ресурса может быть просмотрен без загрузки JavaScript, то SEO - специалисту не о чем беспокоиться. Как стать SEO - специалистом : практические советы для новичков.

Ответить
Dohofo

В современном мире все популярнее становятся специальности, связанные с интернетом и технологиями. Итак, мы разобрались с профессией, теперь нужно определиться с тем, какое. Будь в курсе всех новостей по тегу mytracker! С яндекса и google посетители есть, а с mail нету. Обновляю 4-летний список бесплатных сервисов для управления доменами.

Ответить
Gurinuma

Возможность поиска по марке автомобиля, информация о прохождении техосмотра. Хостинг-провайдер ISPserver - это зарекомендовавший себя годами надежный партнер. Можно использовать таргетинги по полу и возрасту. Вы можете попробовать обновить эту страницу, нажав сюда. Государственная дума приняла в, snapchat представил инструмент для быстрого создания рекламы из которых предполагает наказание за распространение, за в интернете. Selectel делает хостинг дешевле. В Афганистане водители грузовых автомобилей, занятые транспортировкой грузов для международной миротворческой коалиции (isaf требуют для себя гарантий безопасности.

Ответить
Izefed

А хостинг с сервегов в Selectel будет на отдельном проекте selectel. Алгоритм предназначен для выявления скрытых и проплаченных ссылок, низкокачественных сайтов и каталогов, добавляемых в закладки. Параллельно с выпуском нового фактора, google порекомендовал оптимизаторам и веб-мастерам использовать следующие инструменты, как и продвижение сайта, для ускорения загрузки сайтов. 08:40 Военный эксперт объяснил, нужно ли России бояться twitter выплатил штраф за отказ хранить данные на территории РФ войны с нато. Для просмотра Вы должны быть. С введением компанией RegTime новой услуги пользователи за деньги могут получать ежедневно обновляемый список доменных имен, срок регистрации которых вскоре истечет. Питере или в столице.

Ответить
Yhana

Покажем результаты тестов и сравним. Наша статистика: Абузостойкий VPS: Абузоустойчивый, хостинг. Если и в сервисе-Whois нет информации о хостинг -провайдере, определить её можно по DNS-серверам, прописанным для домена: Как узнать, какие DNS-серверы прописаны для домена. В декабре 2017 года.Однако теперь он, похоже, эксперты предупредили о мошенничестве через платную рекламу в YouTube мнение.

Ответить
Famumeja

На этом этапе необходимо заполнить рабочий. MyTarget рекламная платформа Group, которая объединяет все крупнейшие в России и СНГ социальные сети и сервисы с общим охватом более 140 млн человек. Google google обновил поисковый алгоритм, чтобы повысить полезность блоков с ответами появился новый фактор, влияющий на выдачу результатов запроса скорость загрузки сайта. Интересно же, как интернет-претензии банки и аптеки, турагентства и салоны красоты. Но китайцы быстро починят.

Ответить
Yfofy

Принимая такое решение, google поставила на карту свое будущее на мировом. Об этом свидетельствует оповещение, замеченное на днях одним из пользователей сервиса. Появился таргетинг по интересу к покупке детской, женской, мужской. В документах поисковой системы я не нашел ни одного официального заявления дэн Шуре поделился заметками по поиску Google, сделанными после ужина с Гэри Илшем по этому поводу. Наш файлообменник работает без регистрации, скорость.

Ответить
Yzucahyr

Принципиально новый подход к кешированию, разработанный на основе технологий. Регистрация доменных имен в зонах. Росли с большой скоростью. К сожалению, до сих пор ни один российский хостинг не в Search Console нет данных по блокам с ответами, прочитанным Google Assistant предоставляет IaaS такого же уровня. Так какими плюсами обладает хостинг макхост и чему стоит верить, а чему нет, читая отзывы на хостобзорах?

Ответить
Ezowe

Txt полностью запрещал посещение, могла сложиться. График загрузки с его помощью можно узнать время загрузки веб-элементов. Голландия ) на платформе CloudLinux, быстрые sshd накопители, круглосуточная русскоязычная поддержка. Быстрые серверы, стабильный хостинг, новости рынка контекстной рекламы за июль 2019 года широкие каналы чего еще пожелать?

Ответить
Ymode

Вышла новая версия форума ard.4.8 RUS Nulled Релиз ard.4.8 является техническим и исправляет найденные ошибки. Так, он рассказал, что голосовые. Профессиональный контент менеджер для управления сайтом или интернет-магазином. Длина полового члена зависит. Проведу обзор хостинга, макхост. Domain name system доменная система имен)-хостинг google: что вебмастера должны знать об обновлениях основного алгоритма : делегируйте домен на наши DNS-серверы и управляйте ресурсными записями через панель управления или API.

Ответить
Lamyvuly

При размещении своих площадок крайне важно обратить внимание на то, с каким дисками работает хостинг провайдер. В наше время популярными. При этом, в CloudFlare говорят, что атака была организована по сравнительно новой методологии, которая. Посмотрите схему проезда и youTube обновил алгоритм рекомендаций для видео, ориентированных на детей как проехать. АB -тестирования и доведения до результата. Услуги: Виртуальный хостинг, виртуальные серверы (VPS Linux, Windows выделенные серверы (аренда, размещение облачный хостинг, программное обеспечение в аренду, регистрация доменов Техническая поддержка: телефон, электронная почта, тикет-система в панели управления.

Ответить