Использование Angular Universal для SPA и SEO Friendly. Одностраничное приложение SPA

СПА в Angular: Недостатки
Улучшения Google с точки зрения SPA
Смысл SEO Angular Universal
Что скрыто за «рендерингом на стороне сервера»
Случай, когда пользователь сразу начинает работать со страницей Angular SPA
Легкий старт с Angular Universal
Работа по-разному на клиенте и на сервере
Пользовательские директивы Angular в сторонних библиотеках и последствия их использования
Заключение

Вы можете найти много разных форумов и чатов, где Угловой 6 обсуждается. Там вы можете найти ответы на такие вопросы, как создание клиентских приложений или создание SEO-интерфейса. Удивительно, но самая выдающаяся новинка в последнее время произошла на стороне сервера.

И здесь появляется Angular Universal. Это революционная технология, созданная для разработки совершенно нового поколения Интернета и Угловые мобильные приложения , Эта статья посвящена освещению его возможностей!

Angular - это фреймворк, который звучит знакомо всем, кто близок к сфере IT. То же самое можно сказать и об одностраничных приложениях. На самом деле, Угловые одностраничные приложения Есть много потенциальных выгод, и вот некоторые из них:

Более плавный и быстрый пользовательский интерфейс, так как большинство ресурсов HTML + CSS + Scripts загружаются одновременно. В дальнейшем будут загружаться только те данные, которые необходимы для рендеринга страницы, зависит от действий пользователя;
SPA работает здесь как технология на стороне клиента, HTML-страница статична, а все динамические изменения происходят в браузере. В более ранних версиях PHP, JSP, HTML смешивался с серверной логикой, и он создавался на сервере. Сервер должен был обрабатывать больше нагрузки.

Тем не менее, мы можем легко обобщить тот факт, что одностраничные приложения или SPA предоставляют довольно удобную производительность пользовательского интерфейса и пользовательский опыт!

Принимая во внимание все изложенные выше факты, вы можете задаться вопросом, почему Соглашения SPA не используются всеми, если они обеспечивают такое высокое качество обслуживания пользователей. Проверьте ниже для ограничений использования.

СПА в Angular: Недостатки

Во-первых, поисковая система не может точно знать, готова ли веб-страница к обработке или она все еще находится в процессе рендеринга. Например, поисковая система не может получить весь HTML, потому что загрузка SPA может быть еще в процессе или рендеринг еще не завершен. Только после того, как MVC будет введен в действие, страница станет доступной для поисковой системы для отображения ее данных.

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

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

Поддержка отсутствия истории HTML5 в браузерах привела к поиску альтернативы, такой как привязки закладок HTML (/ main # section2) для навигации между URL-адресами. Несмотря на то, что трудно проиндексировать страницы отдельно для поисковой системы, все еще существует множество подходов, как это сделать. Тем не менее, простой HTML всегда лучший план по сравнению с этими подходами.

Кроме того, вопрос производительности все еще остается жизненно важным для SPA, например, начальная загрузка медленная. Здесь многие согласны с тем, что HTML-решение превосходит SPA на несколько пунктов, например, по скорости (особенно это касается мобильных телефонов), поскольку запуск SPA занимает больше времени из-за обработки больших объемов JS.

Улучшения Google с точки зрения SPA

Хорошей новостью для нас является то, что Google улучшил подход к индексации одностраничных приложений. Таким образом, обе причины, упомянутые выше, не могут быть фактически правильными больше. Более того, недавний официальный отказ от использования IE9 приводит к улучшению доступности истории HTML5 на большинстве платформ.

В своем порядке это делает внедрение якорей URL необязательным, поскольку могут применяться простые URL, такие как / main / section2.

Конечно, это чудесная новость. Тем не менее, мы также должны учитывать другие поисковые системы, которые обрабатывают огромное количество трафика, такие как Baidu, популярный в Китае, Yahoo или Bing, столь любимый американцами.

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

Смысл SEO Angular Universal

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

Что скрыто за «рендерингом на стороне сервера»

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

Случай, когда пользователь сразу начинает работать со страницей Angular SPA

Существует некоторое время между рендерингом исходного HTML и использованием Angular для запуска в качестве SPA. Angular Universal теперь предлагает решение для того, чтобы охватить момент, когда пользователь начинает запускать любое событие до того, как Angular вступит во владение. Такое событие будет записано и повторено. Событие, представленное сервером, записывается, и повторение происходит в SPA на стороне клиента.

Легкий старт с Angular Universal

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

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

Работа по-разному на клиенте и на сервере

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

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

Например, когда необходимо использовать внешние библиотеки, которые вызывают элементы DOM, процесс на стороне сервера не может получить доступ к внутренним объектам браузера, что приведет к ошибкам. Рассмотрим случай, когда используется сторонняя библиотека Svg.js. Несомненно, некоторые ожидаемые ошибки появятся при построении проекта в режиме SSR (рендеринг на стороне сервера).

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

import {Inject, Injectable, PLATFORM_ID} из '@ angular / core'; import {isPlatformBrowser} из '@ angular / common'; @Injectable () экспортный класс SvgService {private _svg: any; конструктор (@Inject (PLATFORM_ID) private platformId: Object) {if (isPlatformBrowser (this.platformId)) {this._svg = require ('svg.js'); }} get (element) {if (isPlatformBrowser (this.platformId)) {return this._svg.get (element); }}}

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

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

Пример сервиса:

import {Injectable} из '@ angular / core'; import {Title, Meta} из '@ angular / platform-browser'; импортировать * как seoConfig из '../../../assets/config/seo-config.json'; @Injectable () экспортный класс SeoService {constructor (private titleService: Title, private meta: Meta) {} setMeta (page: string) {this.setTitle (seoConfig [page] .title); this.setNameAttribute ('description', seoConfig [page] .description); this.setNameAttribute ('Keywords', seoConfig [page] .keywords); this.setNameAttribute ('twitter: title', seoConfig [page] .title); this.setNameAttribute ('twitter: description', seoConfig [page] .description); this.setNameAttribute ('twitter: image', seoConfig [page] .image); this.setPropertyAttribute ('og: title', seoConfig [page] .title); this.setPropertyAttribute ('og: description', seoConfig [page] .description); this.setPropertyAttribute ('og: url', seoConfig [page] .url); this.setPropertyAttribute ('og: image', seoConfig [page] .image); } private setTitle (title: string) {вернуть this.titleService.setTitle (title); } private setNameAttribute (attribute: string, value: string) {if (this.checkAttributeExist (attribute, 'name')) {this.meta.updateTag ({name: attribute, content: value}); } else {this.meta.addTag ({имя: атрибут, содержимое: значение}); }} private setPropertyAttribute (атрибут: строка, значение: строка) {if (this.checkAttributeExist (attribute, 'property')) {this.meta.updateTag ({property: attribute, content: value}); } else {this.meta.addTag ({свойство: атрибут, содержимое: значение}); }} private checkAttributeExist (attribute: string, type: string) {return this.meta.getTag (`$ {type} =" $ {attribute} "`); }}

Компонент будет выглядеть так:

импортировать {SeoService} из '../core/services/seo.service'; @Component ({селектор: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss']}) класс экспорта HomeComponent {конструктор (частный seoService: SeoService) {this.seoService.setMeta ('home'); }

Вот пример использования файла seo-config.json:

{"home": {"title": "2muchcoffee | Компания по разработке веб-и мобильных приложений", "description": "2muchcoffee - ведущая компания по разработке веб-приложений и мобильных приложений с полным стеком, специализирующаяся на JS-инфраструктурах для внешнего и внутреннего интерфейса. Создание кроссплатформенных платформ веб-приложения, гибридные и нативные мобильные приложения для существующих предприятий и MVP для стартапов. "," ключевые слова ":" 2muchcoffee, Angular, frontend, backend "," url ":" https://2muchcoffee.com "," image ":" /assets/img/content/opengraph/main.png "}}

Пользовательские директивы Angular в сторонних библиотеках и последствия их использования

Обычно разработчики используют сторонние сервисы, основанные на функциональности Angular, такие как пользовательские директивы, компоненты и т. Д. Здесь можно указать макет Angular Flex в качестве примера для верстки.

Это может вызвать неожиданную проблему, которая повлияет на работу пользователя. После рендеринга на стороне сервера документ, который получает клиент, уже содержит теги стилей с их стилями внутри. Однако @ angular / flex-layout начинает работать только после полной загрузки библиотек Angular.

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

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

Чтобы решить эту проблему с UX, мы решили отказаться от использования директив @ angular / flex-layout на главной странице и указать свойства flex-разметки в файле CSS.

Заключение

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

Вот почему мы можем сказать, что теперь стало проще создавать приложения различного типа с Angular Universal и universal-startter, чтобы ваши приложения были проиндексированы.

В случае, если у вас остались какие-либо вопросы или предложения, не стесняйтесь связаться с нами и мы поможем вам в любом вопросе!

3. Что вы говорите людям, когда они хотят занять первое место в Google?
3. Что вы говорите людям, когда они хотят занять первое место в Google? Удачи! Серьезно, если вы хотите занять первое место в Google, вы должны быть тем брендом, который является лучшим решением для запросов по этим ключевым словам. Это так просто. Создайте бренд, достойный этой позиции, и вы получите его - никаких темных искусств не требуется. Если вы еще не там, используйте PPC, чтобы войти в это выше сгиба, в верхней части пространства результатов. Во всяком случае,

Что заставило вас почувствовать, что новый бренд был необходим после того, как SEO Digger уже был настолько известен в сообществе SEO?
Что заставило вас почувствовать, что новый бренд был необходим после того, как SEO Digger уже был настолько известен в сообществе SEO? SeoDigger еще не был закрыт. Доступ к API для всех зарегистрированных пользователей по-прежнему активен :) Мы планируем закрыть его после завершения интеграции с Market Samurai. Мы дали проекту новое название, чтобы подчеркнуть его новизну. Кроме того, ценность продукта для нас важнее, чем его название. Насколько сложно

И какой смысл заниматься SEO, когда Google просто продолжает менять правила?
И какой смысл заниматься SEO, когда Google просто продолжает менять правила? Правило № 1: Нет правил По большинству аккаунтов, наибольшее разочарование за последнее время было Google переходит на безопасный поиск для всех пользователей - что привело к потере данных о ключевых словах для тех из нас, кто рассчитывает на них для выработки стратегии входящего маркетинга для клиентов. Поскольку мой

Под этим мы подразумеваем, что когда пользователи вводят текст в строку поиска (или в устной форме в цифровое устройство), что они собираются делать, когда получают соответствующие результаты?
Под этим мы подразумеваем, что когда пользователи вводят текст в строку поиска (или в устной форме в цифровое устройство), что они собираются делать, когда получают соответствующие результаты? Что является основным смыслом их поисков? Каждый маркетинговый актив должен соответствовать гипер-специфической аудитории. Некоторые посетители сайта - ваша целевая коммерческая аудитория, другие - просто люди, ищущие информацию, а другие все еще хотят перейти на другие части вашего сайта. То есть,

У специалиста по SEO нет данных, чтобы определить, как Google будет реагировать на компании, находящиеся на первом месте - так как они могут гарантировать, что вы сможете занять их позицию?
У специалиста по SEO нет данных, чтобы определить, как Google будет реагировать на компании, находящиеся на первом месте - так как они могут гарантировать, что вы сможете занять их позицию? Что должен делать специалист по SEO Очень жаль, что меньшая часть сомнительных практикующих, которые прячутся в Интернете, портят имя SEO-профессии. Нет никаких сомнений в том, что SEO очень живо и активно, и все еще является крайне необходимым и эффективным сервисом

5. С точки зрения SEO, лучше ли размещать свои видео на YouTube или самостоятельно размещать их, и почему?
5. С точки зрения SEO, лучше ли размещать свои видео на YouTube или самостоятельно размещать их, и почему? Мы уже обсуждали встроенные видео. Теперь давайте выясним разницу между размещением видео на YouTube и размещением их на вашем собственном веб-сайте и сервере, когда речь заходит о видео SEO. Наш специальный гость отметил, что YouTube предоставляет вам различные инструменты и увеличивает ваш потенциал для бесплатного трафика. Майкл Рэмси напомнил нам, что

»Я думаю, что мы все знаем, что SEO требует времени, но что именно означает« время »?
»Я думаю, что мы все знаем, что SEO требует времени, но что именно означает« время »? Теперь я проведу вас через то, что вы можете ожидать, ожидая результатов SEO в (хорошей) цифровой маркетинговой компании. Что ожидать в вашем первом месяце SEO В первый месяц SEO все ваши самые смелые мечты сбудутся Вы будете плавать в деньгах! А Ferrari у тебя в гараже! Путешествие! ЛОЖЬ Сколько компаний цифрового маркетинга связались

Вы знаете, что SEO важен для успеха вашего сайта WordPress, но когда вы в последний раз заглядывали под капот, чтобы оценить свою эффективность SEO?
Вы знаете, что SEO важен для успеха вашего сайта WordPress, но когда вы в последний раз заглядывали под капот, чтобы оценить свою эффективность SEO? В этом посте мы расскажем вам об инструментах, шагах и вопросах для проведения вашего собственного SEO-аудита WordPress. Оценив наиболее важные факторы, влияющие на производительность поисковой оптимизации, вы убедитесь, что ваш сайт работает на оптимальном уровне. Ниже приведены вопросы, которые мы считаем наиболее важными для

Какие факторы должен собрать ваш SEO отчет, связанный со скоростью загрузки?
Какие факторы должен собрать ваш SEO отчет, связанный со скоростью загрузки? Некоторые из основных могут быть: Адаптация сервера или хостинга, на котором вы разместили сайт Используйте кеш Укажите атрибуты высоты и ширины изображений Использование CSS-спрайтов Сжатие изображений SEO анализ юзабилити сайта В этой области вы должны проанализировать, как осуществляется навигация по сайту

Почему он не может работать и для SEO, когда он идеально подходит для людей (= запрашивать услугу)?
Почему он не может работать и для SEO, когда он идеально подходит для людей (= запрашивать услугу)? Прекрасное доказательство того, что одну страницу сайта можно «оптимизировать» под сотни слов, можно найти в статье Марек Прокоп , Показывает, что http://kreta.rovnou.cz/pocasi.html люди пришли к поисковым терминам; кстати, это еще одно доказательство функционирования

Что мне нужно сказать вам, что быть современным профессионалом - непростая задача, особенно когда новости рынка выходят несколько раз в день, не так ли?
Что мне нужно сказать вам, что быть современным профессионалом - непростая задача, особенно когда новости рынка выходят несколько раз в день, не так ли? Я не знаю, начинаете ли вы сейчас или уже немного знакомы с этим районом, также не имеет значения, что вы на самом деле собираетесь сказать, насколько вы любите свой район и за что вы готовы от него отказаться, ? Вы заметите, что работать с SEO-маркетингом - это постоянная проблема. Не потому, что это профессия, которая подвергает вашу

Что такое Google PageRank?
Но как цифровое маркетинговое агентство или какой-либо бизнес с онлайн-моделью в этом отношении адаптируется к обновлениям алгоритма?
3. Что вы говорите людям, когда они хотят занять первое место в Google?
3. Что вы говорите людям, когда они хотят занять первое место в Google?
Что заставило вас почувствовать, что новый бренд был необходим после того, как SEO Digger уже был настолько известен в сообществе SEO?
И какой смысл заниматься SEO, когда Google просто продолжает менять правила?
Под этим мы подразумеваем, что когда пользователи вводят текст в строку поиска (или в устной форме в цифровое устройство), что они собираются делать, когда получают соответствующие результаты?
Что является основным смыслом их поисков?
У специалиста по SEO нет данных, чтобы определить, как Google будет реагировать на компании, находящиеся на первом месте - так как они могут гарантировать, что вы сможете занять их позицию?
5. С точки зрения SEO, лучше ли размещать свои видео на YouTube или самостоятельно размещать их, и почему?