AngularJS одностраничные приложения SEO лучшие практики

1. Что такое одностраничные приложения (SPA)?
2. Проблема с AngularJS и SEO?
3. Список страниц
4. Установить Prerender
5. Просмотреть как Google
6. Отслеживание в Google Analytics и настройка диспетчера тегов
7. Индекс поисковой системы
8. Переписать сайт
9. Финальная нота

С каждым годом мы часто слышим, как поисковые критики и энтузиасты предсказывают смерть SEO. Однако каждый раз они оказываются неправы. Многие также предсказывают, что голосовой поиск - это будущее. С появлением умных динамиков мы уже наблюдаем рост в годовом исчислении в отношении голосового поиска. Согласно статистике ComScore, к 2020 году 50% поисковых запросов будут голосовыми.

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

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

В настоящее время существует множество библиотек и фреймворков JavaScript, таких как AngularJS, ReactJS, EmberJS, jQuery и т. Д. Но сегодня давайте подробно поговорим об AngularJS и о том, как оптимизировать его для SEO. Инфраструктура Angular JS постоянно захватывает Интернет. Благодаря своей динамической функциональности и способности улучшать пользовательский опыт, он все чаще используется огромным количеством веб-сайтов.

Основным преимуществом AngularJS является его способность генерировать одностраничные приложения (SPA).

Что такое одностраничные приложения (SPA)?

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

Традиционный Page LifeCycle

Одностраничное приложение

Проблема с AngularJS и SEO?

Есть одна вещь, которая препятствует эффективному использованию этой платформы, это несовместимость между AngularJS и SEO. Трудно отслеживать активность страниц на основе AngularJS, потому что они остаются скрытыми как от посетителей, так и от веб-сканеров. Большинство сканеров склонны полагаться на данные CSS / HTML для интерпретации содержимого сайта. Если это HTML-содержимое скрыто под разными веб-скриптами, сканерам нечего индексировать и публиковать в результатах поиска.

За прошедшие годы Google стал намного эффективнее в сканировании и индексировании javascript, и даже устарел в своих предыдущих рекомендациях, таких как использование Hashbang (#!), (Escaped_fragments URL) для обеспечения возможности сканирования AJAX. Тем не менее, Googlebot все еще пытается сканировать сайты, построенные на основе SPA. Одна из наиболее распространенных проблем, с которыми сталкиваются разработчики и SEO-консультанты, заключается в том, что в поисковой выдаче ничего кроме домашней страницы не появляется. Другие поисковые системы, такие как Bing, отстают с этой способностью. Тем не менее, существует ряд инструментов и инструментов, с помощью которых это несоответствие может быть устранено.

Вот несколько лучших практик, которые позволят вам выполнить SEO для AngularJS:

Список страниц

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

Установить Prerender

Prerender - лучший способ создать неразрывную связь между Angular JS и SEO. Сначала он отображает ваш веб-сайт в виртуальном браузере, а затем передает содержимое HTML непосредственно веб-сканерам. Это позволяет пользователю быстро и динамично использовать SPA. Более того, даже сканеры могут легко найти индексируемый контент и органично отобразить его в результатах поиска! Для небольших сайтов, например до 250 страниц, услуга Prerender доступна бесплатно. Тем не менее, более крупные сайты должны платить номинальную плату в месяц за его использование.

Это может быть сложно, но вам, возможно, придется обсудить это с разработчиком и сказать им, чтобы настроить ваш веб-сервер для обслуживания HTML-страницы для ботов Google. Вам нужно создавать статические снимки HTML, особенно для поисковых систем. Есть несколько других способов сделать это в AngularJS.

Просмотреть как Google

Сконфигурируйте консоль поиска Google, чтобы использовать функцию, которая позволит вам видеть ваш сайт так же, как бот-робот Google видел его во время сканирования. Эта функция называется «Получить как Google». Как правило, он предоставляет два варианта. Если вы просто «получите», он вернет HTTP-ответ, который содержит полный исходный код страницы. Но если вы «получите и отобразите» вместе с обычным HTTP-ответом, вы также получите скриншот страницы в том виде, в котором ее увидит посетитель. Если ваш сайт еще не проиндексирован, вы можете просто использовать вкладку «Запрос индексации», чтобы Google внес его в список результатов поиска.

Как SEO-консультант, нужно объяснить разработчикам, что страницы, отображаемые пользователю и роботами Google, должны совпадать. Часто при рендеринге вы видите, что бот видит пустую страницу, а пользователь видит отдельную версию сайта. Необходимо убедиться, что и пользователь, и бот могут видеть одну и ту же версию страницы.

Browseo - воспользуйтесь онлайн-инструментом Browseo и смоделируйте, как робот Google будет отображать вашу страницу.

Отслеживание в Google Analytics и настройка диспетчера тегов

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

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

SPA динамически загружают контент HTML, эти виртуальные просмотры страниц записываются на основе взаимодействия пользователей с веб-сайтом, который отслеживает то же поведение пользователя, что и традиционная аналитика. Существуют и другие способы, использующие триггеры событий «Изменение состояния» в Google Tag Manager. Интересное руководство по внедрению было объяснено в Lunametrics (сейчас Bounteous) о лучших практиках для внедрение менеджера тегов Google и аналитики Google для сайтов AngularJS

Индекс поисковой системы

Используйте поисковую систему (например, Google), чтобы проверить наличие последней версии вашей веб-страницы. Когда результаты поиска отображаются, выберите «кеш», который обычно помещается в конце URL-адреса. Это покажет вам, что обнаружил робот Google, когда он последний раз сканировал вашу страницу. Индекс поисковой системы можно использовать в качестве инструмента для просмотра после завершения первоначальной привязки. Установите Google Analytics, чтобы упростить этот процесс.

Переписать сайт

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

Финальная нота

Выполнение SEO на веб-сайтах Angular JS Framework - сложная задача, которая может быть успешно выполнена с небольшим количеством навыков и инноваций. Следующее путешествие должно было бы понять рабочие концепции AngularJS, чтобы указать конкретные вклады SEO разработчикам. Каждый день был кривой обучения при выполнении SEO для веб-сайта AngularJS, и все еще есть много неизведанных территорий, которые нужно пройти при работе с автономным веб-приложением.

https://moz.com/blog/optimizing-angularjs-single-page-applications-googlebot-crawlers

https://medium.com/forcit/seo-for-single-page-applications-8543619e1d0c

https://www.verticalmeasures.com/blog/search-optimization/overcoming-angular-seo-issues-associated-with-angularjs-framework/

Похожие

Комментарии