Как улучшить SEO в приложениях AngularJS

1. Используйте стандартные гиперссылки
2. Использовать режим HTML5
3. Подтвердить и отправить с помощью консоли поиска Google
4. Резюме

Поисковая оптимизация жизненно важна для предоставления вашего решения людям, которые в нем нуждаются, и мы выяснили, каким сложным образом AngularJS ставит свой собственный набор задач SEO. Вот как мы улучшили наше SEO в AngularJS.

Онлайновая документация Wijmo представляет собой одностраничное приложение AngularJS, состоящее из страницы с оглавлением (ToC). При щелчке ссылок ToC AngularJS загружает и отображает разделы справки в виде частичных представлений. Частичные представления - это статические файлы HTML, сгенерированные из нашего исходного кода. Результатом является простой и быстрый веб-сайт для просмотра документации Wijmo. Наша документация Wijmo, одностраничное приложение AngularJS

Мы опубликовали это приложение и пошли дальше. Позже мы поняли, что Google индексирует это, но не так, как мы этого хотели. Мы не рассматривали SEO для нашей документации, что было ошибкой. Как только мы поняли, что это проблема, мы начали исследовать корневые проблемы. При размещении контента в приложении AngularJS у нас возникли две основные проблемы:

• Заголовок и описание не индексируются для каждой «страницы» в нашей документации
• Google не сканировал все ссылки в нашей документации

Хорошей новостью является то, что Google выполняет рендеринг приложения AngularJS и индексирует контент после того, как JavaScript завершил рендеринг! Люди находили наши темы через Google, но результаты, которые они видели в Google, были плохими. Чтобы увидеть, как Google отображает страницу, вы можете использовать команду info : . Вот как Google проиндексировал нашу страницу документации по классу FlexGrid: Результаты поиска показали одинаковый заголовок для всех страниц.

• Заголовок «Справка Wijmo 5», заголовок главной страницы нашей документации. Мы не обновляли его во время навигации, что означало, что Google видел, что каждая тема документации была названа как Справка Wijmo 5.
• Описание состояло из первого контента, найденного Google на странице. Это относится к документации класса FlexGrid, но это не то, что мы хотели отображать.

Вот как мы хотим, чтобы наша документация класса FlexGrid отображалась в Google: Отображение удобного для читателя релевантного заголовка и описания Теперь у нас есть заголовок, относящийся к теме класса FlexGrid, и более читаемое описание. Вот как мы это сделали.

Решить вопрос о том, как Google отображает темы нашей документации в результатах, очень просто. Нам нужно обновлять тег <title> и тег <meta name = "description" content = "" /> каждый раз, когда тема загружается маршрутизатором AngularJS. Это лучшая практика, независимо от того, хотите ли вы SEO. Всегда полезно обновлять заголовок в зависимости от контекста в вашем приложении. Для доступности также важно, чтобы заголовок обновлялся в зависимости от контекста приложения. Чтобы обновить эти теги, нам нужно создать обработчик событий.

1. Мы прикрепили обработчик к событию routeChangeSuccess в нашем приложении Angular. Мы используем обработчик события app.run, чтобы присоединить его даже при первом запуске приложения.
2. Затем мы прикрепили дополнительный обработчик к событию $ routeChangeSuccess в $ rootScope . (Это событие будет вызываться каждый раз, когда в нашем приложении происходит навигация.)
3. Наконец, мы использовали setInterval для проверки каждые 200 миллисекунд до завершения навигации.

// обработать успешную загрузку темы app.run (function ($ rootScope, $ window) {$ rootScope. $ on ('$ routeChangeSuccess', function () {var interval = setInterval (function () {if (document.readyState ==) 'complete') {// код, который выполняется при загрузке частичного представления}}, 200);});});

Теперь, когда у нас есть обработчик событий, мы можем обновить теги. Возможно, вы захотите сделать это на основе данных в вашей области $. Но у нас есть статический HTML, который содержит необходимую нам информацию. Поэтому мы сделаем несколько запросов DOM, чтобы получить его.

1. Сначала мы находим первый тег внутри нашего основного элемента содержимого.
2. Затем мы устанавливаем заголовок документа для текстового содержимого тега заголовка.

Я также добавил «Справку Wijmo 5» к нему для большего контекста.

// найти тег основного заголовка для раздела справки var heading = document.querySelector ('# content h2'); if (heading! == null) {// установить заголовок страницы в заголовок темы document.title = heading.textContent.trim () + '- Wijmo 5 Help'; }}

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

1. Сначала мы находим первый абзац внутри основного элемента содержимого.
2. Затем мы используем селекторы : not и : empty , чтобы убедиться, что абзац не пустой.
3. Наконец, мы устанавливаем содержимое тега мета-описания на текстовое содержание найденного абзаца.

// найти мета-тег описания var meta = document.querySelector ('meta [name = description]'); // найти первый раздел в разделе справки, который не является пустым var content = document.querySelector ('# content p: not (: empty)'); if (meta! == null && content! == null) {// установить мета-описание для содержимого первого абзаца в теме meta.setAttribute ('content', content.textContent.trim ()); }

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

Используйте стандартные гиперссылки

Другая проблема, с которой мы столкнулись, заключалась в том, что некоторые наши ссылки не отслеживались сканером Google. После некоторых исследований мы обнаружили, что некоторые ссылки использовали атрибут ng-click вместо стандартного атрибута href в гиперссылках. Это было легко исправить, поскольку мы перенаправляли на новый URL-адрес в событии ng-click. Нам просто нужно было изменить эти гиперссылки, чтобы в атрибуте href был указан навигационный путь. После того как мы внесли это изменение, Google смог перейти по всем гиперссылкам в нашей документации.

Использовать режим HTML5

Чтобы в нашем приложении AngularJS было больше SEO-ориентированных URL, мы включили режим HTML в нашем роутере. Он состоит из добавления элемента и вызова $ locationProvider.html5Mode (true) . Нам также пришлось внести некоторые изменения в конфигурацию нашего сервера, чтобы сопоставить запросы с подкаталогами с нашей главной страницей. Вы можете следовать другим инструкциям о том, как внедрить SEO-дружественные URL ,

Теперь, когда мы очистили наше приложение, мы позаботимся о том, чтобы Google проиндексировал все «страницы» в нашем приложении AngularJS. Для этого мы создадим карту сайта для наших разделов справки. Карта сайта сообщает Google обо всех URL-адресах, которые вы хотите проиндексировать, и о том, как они структурированы на вашем сайте. Этот шаг не обязателен, но рекомендуется. У нас уже есть Оглавление для нашей справочной документации, поэтому я просто использовал его для создания карты сайта.

Подтвердить и отправить с помощью консоли поиска Google

Я использую функцию «Получить как Google» в Google Search Console чтобы проверить, правильно ли Google отображает мое приложение Angular. Это не даст вам тонны информации, но полезно проверить, что ваше приложение AngularJS индексируется. Когда все выглядит хорошо, вы можете отправить заявку в Google Index. Вот как это сделать:

1. Введите корневой URL-адрес для вашего приложения AngularJS в текстовое поле «Получить как Google».
2. Нажмите Fetch & Render. Скажите Google, чтобы сканировать ваш URL
3. После завершения рендеринга нажмите кнопку «Отправить в индекс».
4. Выберите «Просмотреть этот URL и его прямые ссылки» и нажмите «Перейти».

Ваша заявка будет отправлена ​​в индекс Google. Обратите внимание, что для индексации сайта и отображения результатов в Google требуется некоторое время.

Резюме

Это занимает некоторое время и немного утомительно, но определенно стоит сделать ваши приложения AngularJS более SEO-дружественными. Мы смогли значительно улучшить результаты поиска в поиске Google, используя эти шаги. Я надеюсь, что это полезно и для вас. Другой вариант, который мы здесь не рассмотрели, это рендеринг с сервера. Есть несколько интересных инструментов, которые переводят приложения AngularJS в статические html-страницы на сервере. Я не тестировал этот подход, но он, безусловно, имеет свои достоинства.

Попробуйте Wijmo's AngularJS элементы управления

Загрузите последнюю версию Wijmo

Узнайте больше о AngularJS >>

Похожие

Комментарии