Что нужно знать о сайтах AngularJS

  1. Что такое AngularJS?
  2. Проблема с AngularJS
  3. Что нужно знать оптимизаторам об Angular
  4. Предварительная визуализация
  5. История API pushState ()
  6. Робот Googlebot сканирует JavaScript - до тех пор, пока вы его не заблокируете
  7. Кэшированная страница Google будет выглядеть ужасно.
  8. Как просмотреть кеш
  9. Используйте функцию поиска и визуализации в консоли поиска Google
  10. Скорость имеет значение
  11. Проверьте отчет о заблокированных ресурсах GSC
  12. Кричащая лягушка не попала
  13. Инструмент тестирования структурированных данных Google все еще работает
  14. В заключение

Я запустил редизайн AngularJS на крупном сайте электронной коммерции в конце 2015 года - всего через две недели после того, как Google объявил о смерти сканера Ajax. Когда мы запустили, не было документации о том, как робот Google будет понимать этот сайт. Мы знали, что нам не нужны экранированные URL-адреса фрагментов, но нам нужно было предварительно кэшировать #! версии URL? У нашей команды не было пропускной способности, и наша система не могла справиться с технологическим долгом, который может создать предварительное кэширование.

По сути, Google только что сказал нам, что они «могут» понимать наши страницы, но у нас не было никакой гарантии, что они это сделают или насколько последовательно они это сделают.

Проект получил название Space Party. Мы знали, что создали быстрый, удобный для пользователя сайт с отличной производительностью. Мы мало что знали. Там даже не много документации 9 месяцев спустя.

Там даже не много документации 9 месяцев спустя

Вот что я узнал. Если вы не слишком техничны, не волнуйтесь. Мы выделили большие выносы жирным шрифтом.

Что такое AngularJS?

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

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

Проблема с AngularJS

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

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

Изображение предоставлено BuiltWith.

На свидание, 0,1% сайтов используют Angular ,

Вывод : Да, мы можем запустить обезьяну в космос. Теперь, кто хочет быть первой обезьяной?

Что нужно знать оптимизаторам об Angular

Побег Фрагменты

До октября 2015 года у Google не было возможности сканировать и отображать динамически создаваемый контент. Им требовались сайты, использующие AngularJS для создания снимков HTML-контента. Разработчикам буквально приходилось создавать две версии каждой страницы и ссылаться на них в тегах.

Ранние пользователи должны были выполнять странные задачи, такие как _escaped_fragments_ urls и директивы AJAX. Трудолюбивые разработчики создали умные ресурсы для предварительной визуализации динамического контента. К счастью, времена изменились. Google обычно способен отображать и понимать ваши веб-страницы, как современные браузеры. Google объявил, что они осуждают AJAX гусеничный в конце 2015 года.

Вывод : если вы создаете новый сайт или реструктурируете уже существующий сайт, просто избегайте введения _escaped_fragment_ urls.

Предварительная визуализация

В идеальном мире я бы предпочел страховочную сетку перед рендерингом, такую ​​как Prerender.io , Как и у многих команд, у нас не было пропускной способности или ресурсов для обработки технического долга.

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

Q: «Я использую инфраструктуру JavaScript, и мой веб-сервер обслуживает предварительно отрендеренную страницу. Это все еще хорошо?

О: В целом, веб-сайты не должны предварительно отображать страницы только для Google. , , Если вы выполняете предварительную визуализацию страниц, убедитесь, что контент, предоставляемый роботу Google, соответствует опыту пользователя, как его внешнему виду, так и взаимодействию. Предоставление роботу Google другого контента, который может показаться обычному пользователю, считается маскировкой и противоречит нашим правилам для веб-мастеров ». Блог Google

Вывод : предварительный рендеринг обеспечивает чувство безопасности, но может вызвать больше проблем, чем оно того стоит.

История API pushState ()

Команда разработчиков согласилась, что #! не были идеальными. (Всем нравится чистый URL.) Как SEO, они добавили ненужную сложность сайту. Мы использовали История API PushState () обновить видимый URL в браузере. Наша карта сайта включала все канонические URL, и мы отправили ее в Google.

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

Вывод : история API pushState (): рекомендуется Google, сайт одобрен.

Робот Googlebot сканирует JavaScript - до тех пор, пока вы его не заблокируете

Ну, большую часть времени.

«Запрещение сканирования файлов Javascript или CSS в файле robots.txt вашего сайта напрямую вредит тому, насколько хорошо наши алгоритмы отображают и индексируют ваш контент, и может привести к неоптимальному ранжированию». Блог Google

Вывод : хороший SEO построен с щепоткой недоверия. Всегда проверяйте производство.

Кэшированная страница Google будет выглядеть ужасно.

Вы можете увидеть загадку кода или ничего не увидеть. Ни один из ваших Javascript или CSS не заблокирован. Не паникуйте. Это нормально. Хороший парень Джон Мюллер, уточнил в Центральная справка для веб-мастеров Форум.

Хороший парень Джон Мюллер, уточнил в   Центральная справка для веб-мастеров   Форум

нажмите, чтобы увеличить

нажмите, чтобы увеличить

нажмите, чтобы увеличить

Как просмотреть кеш

Содержимое кэша на самом деле не пустое. Он блокируется визуально при полном просмотре. Есть два способа обойти это.

  1. Вы можете отключить CSS в вашем браузере
  2. Добавьте & strip = 1 в конец URL-адреса веб-кэша, чтобы просмотреть текстовую версию: http://webcache.googleusercontent.com/search?q=cache:www.example.com&strip=1

Это вряд ли изменится. Хотя Google понимает путаницу, Angular быстро развивается. Посвящение разработки разработке кешу, который показывал визуализированный контент, не стоит. У Google и SEO есть более важные вещи.

Вывод : Вы можете (и должны) проверять страницы в кэше, но не полагайтесь на них при проверке дизайна или содержимого.

Используйте функцию поиска и визуализации в консоли поиска Google

Посмотрите страницу за страницей с обоими пользовательскими агентами (настольными и мобильными смартфонами), чтобы увидеть, что видит Google и что, по их мнению, видят пользователи.

Узнайте, как использовать Fetch and Render с помощью Google. пошаговое руководство ,

Скорость имеет значение

Если ресурс занимает больше 4 секунд, Google не будет отображать его.

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

Держите это хорошим парнем с доступными ресурсами менее чем за 2 секунды

Еда на вынос : временно недоступен означает слишком медленный.

Проверьте отчет о заблокированных ресурсах GSC

Заблокированные ресурсы могут быть серьезной проблемой.

«Обновление Fetch and Render показывает, как важны эти заблокированные ресурсы. Когда вы запрашиваете, чтобы URL был извлечен и отображен, теперь он показывает скриншоты, отображаемые как в виде Googlebot, так и в качестве обычного пользователя. Это облегчает распознавание проблем, которые существенно влияют на то, почему робот Googlebot по-разному видит ваши страницы ». Блог Google

Блог Google

Вывод : любите свои ресурсы так, как будто от них зависит ваш рендеринг.

Кричащая лягушка не попала

ОБНОВИТЬ: Кричащая лягушка 6.0 кодовое название Render-Rooney, включает в себя визуализацию сканирования.

Скорее всего, вы используете веб-сканер, такой как Screaming Frog, чтобы убедиться, что живой сайт выглядит так, как вы ожидаете. Если вы нашли сканер, который действительно хорошо работает, пожалуйста, оставьте ссылку в комментариях.

Совет: используйте пользовательский поиск Screaming Frog для поиска значений заполнителей. Это могут быть заполнители, такие как {{price}} для обозначения страницы продукта или {{video title}} для поиска страниц с видео.

Вывод : когда-нибудь здесь появятся новые классные инструменты, но сейчас вы должны стать умными. Используйте Screaming Frog v6.0 для сканирования вашего сайта. Вам нужно будет настроить параметры рендеринга в разделе «Настройка паука»> «Рендеринг».

Вам нужно будет настроить параметры рендеринга в разделе «Настройка паука»> «Рендеринг»

Инструмент тестирования структурированных данных Google все еще работает

Инструмент тестирования структурированных данных Google все еще работает

Pro-tip: не смешивайте языки разметки. JSON-LD король ,

В заключение

Если вы хотите создать отличный сайт, вам нужно сделать так, чтобы пользователи были к тому моменту, когда вы его выпустите. Мы начали с сильно сломанного сайта, основанного на годах исправленного кода. Редизайн сайта Space Party получил свое название от нашего юмористического поиска по сайту.

Благодаря Кэри Хаун а также Бри Николс для иллюстрации нашего глупости поиска по сайту

Руководящие принципы Google не написаны в камне. Angular может создать лучший и быстрый веб-интерфейс для пользователей. Это то, что Google стремится продвигать. Они сломали свои барьеры для контента AJAX. Угловые и поисковые будут продолжать развиваться.

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

Большое спасибо команде Space Party за их тяжелую работу и Дэмиен Браун за помощь в понимании больших вопросов, которые задают оптимизаторы, когда они танцуют с Angular.

Похожие

Что такое SEO описание?
... что такой текст будет соответствующим образом написан в терминах SEO с использованием ключевых слов. Но ключевые слова предназначены для исследования и выяснения того, какая конкретная информация находится в целевой группе. Следовательно, рекомендуется использовать ключевые слова в тексте, чтобы текст был легче найти. Текст должен быть в первую очередь полезным, читабельным и естественным. Термины «SEO-описание» или «SEO-текст» вызывают старый подход к написанию текстов исключительно
Топ-25 вопросов и ответов SEO-интервью для Freshers в 2018 году
... вляется катализатором большинства маркетинговых мероприятий в Интернете"> SEO оптимизация или SEO является катализатором большинства маркетинговых мероприятий в Интернете. Вот почему SEO доминирует над цифровыми медиа. rch Engine Этот распространенный SEO-эффект в различных сферах деятельности, включая контент-маркетинг, наращивание трафика и кампании в социальных сетях, позволил сделать экспертизу SEO на пути к прибыльной карьере. SEO - это большая возможность для
Демистификация алгоритмов ужасной панды, пингвина и колибри от Google
... нета принесло с собой огромные возможности зарабатывать деньги, и все хотели заработать. Это явление, которое никто не мог предвидеть, поскольку теперь компании могут ориентироваться на миллионы клиентов со всего мира и увеличивать продажи. В то время как крупные бренды поначалу были скептически настроены, для небольших стартапов не потребовалось много усилий, чтобы использовать имеющиеся возможности. Поисковые системы, такие как MSN, Google и Bing, были рынком обмена, где потребители
Как заработать деньги как SEO копирайтер
Добро пожаловать! В сегодняшнем видео посте мы рассмотрим вопрос недели: «Как я могу заработать деньги как SEO-копирайтер?» У тебя есть три ключевых навыка, чтобы стать успешным копирайтером SEO
Как исправить ошибки SEO, которые вы, как предприниматель, делаете?
SEO (поисковая оптимизация) - один из наиболее широко используемых инструментов цифрового маркетинга, который позволяет вам находить и связываться с потребителями, которые являются точными покупателями ваших продуктов. Это услуга, которая при правильном выполнении может обеспечить стабильную и долгосрочную выгодную инвестицию в ваш бизнес. Правильное SEO, которое может превратить ваш сайт в управляемую воронку продаж, позволит вам пропустить дорогостоящий процесс привлечения клиентов. Но,
Как написать отличные заголовки и мета-описания
... что пользователи перейдут по вашей ссылке. Последнее, что нужно принять во внимание, это добавить географическое местоположение в конце тега. Это также поможет вашему SEO и обеспечит дополнительную ясность для поисковика. Вот пример того, как должен выглядеть тэг title: Первичное ключевое слово - Вторичное ключевое слово | Место нахождения
Что такое NAP и как оно помогает местному SEO?
... в интернете во многом зависит от того, как он оценивается поисковыми системами"> Успех любого бизнес-сайта в интернете во многом зависит от того, как он оценивается поисковыми системами. Поэтому вы должны учитывать некоторые факторы, чтобы улучшить рейтинг вашего сайта. NAP является прекрасным примером. Слово NAP означает имя, адрес и номер телефона . Это очень важно для любого бизнеса, который хочет быть хорошо оценен в результатах локального
11 Интернет-магазин SEO мифы проверены: что правильно, что не так?
... нет-магазина хорошие советы по онлайн-маркетингу встречаются редко, дело в том, что они слишком сложны. Тем более упорна некоторая SEO-мудрость, которая обещает большую видимость в поисковых системах и, следовательно, больше продаж. Мы спрашиваем кого-то, кто действительно знает: Бьерн Тантау Специалист по интернет-маркетингу и маркетолог
Что такое домашняя страница и целевая страница?
Что Google Home означает для будущего SEO и контент-маркетинга?
Ранее, на этой неделе, Google представил его последнее нововведение: Google Home, небольшое настольное устройство со встроенным цифровым помощником (метко названный Google Assistant). Google Home предлагает интеллектуальный голосовой поиск без помощи рук, а также помогает запускать интеллектуальные устройства, воспроизводить музыку, проверять погоду и многое другое. Предназначенный для конкуренции с Amazon Echo
Скорость страницы и Google PageSpeed ​​Insights
... чтобы она занимала более высокое место и конвертировалась лучше? Скорость страницы заключается в том, чтобы посетители вашего сайта быстро увидели ваш контент. Прошли времена коммутируемого доступа в Интернет и целую вечность загрузки контента. Сегодня скорость вашего сайта очень важна - если она будет медленнее, чем должна быть, это повлияет на ваш SEO. Google PageSpeed ​​Insights - важная часть гарантии того, что ваш сайт загружается быстро и работает лучше.

Комментарии

Если вы не можете найти свой сайт в результатах поиска, то как вы ожидаете, что его найдут потенциальные клиенты?
Если вы не можете найти свой сайт в результатах поиска, то как вы ожидаете, что его найдут потенциальные клиенты? Исследования показывают что 91,5% поисковиков не попадают на страницу одного из результатов поиска. Более 30% из них нажимают на самый первый результат! Не появляясь в результатах поиска Google, вы буквально передаете бизнес другим веб-сайтам, включая
Мне нужно, чтобы вы поняли роль SEO и Google Adwords в стратегии цифрового маркетинга, потому что только тогда вы сможете контекстуализировать все виды деятельности, которые они требуют, хорошо?
Мне нужно, чтобы вы поняли роль SEO и Google Adwords в стратегии цифрового маркетинга, потому что только тогда вы сможете контекстуализировать все виды деятельности, которые они требуют, хорошо? SEO Давайте начнем с SEO или поисковой оптимизации на английском языке, которая в основном представляет собой набор методов, направленных на то, чтобы сделать весь контент вашего сайта более интересным для поисковых систем. И когда я говорю об этих движках, я имею в виду
Чтобы понять, что такое обратная ссылка и как работает построение обратной ссылки, важно уточнить вопрос «Что такое ссылка?
Чтобы понять, что такое обратная ссылка и как работает построение обратной ссылки, важно уточнить вопрос «Что такое ссылка?». Ссылка или гиперссылка - это просто перекрестная ссылка в тексте, которая позволяет функционально перейти на другую страницу или другой документ. Эти перекрестные ссылки также могут быть использованы на вашем собственном сайте. Под обратной ссылкой понимается ссылка с одного веб-сайта на URL другого веб-сайта. Это может быть установлено по разным причинам
Если бы вы заплатили мне (или любому другому SEO) 100 фунтов стерлингов за таргетинг по вашим ключевым словам, и вы не видите улучшения, разве вы не думаете, что потратили впустую свои деньги?
Если бы вы заплатили мне (или любому другому SEO) 100 фунтов стерлингов за таргетинг по вашим ключевым словам, и вы не видите улучшения, разве вы не думаете, что потратили впустую свои деньги? Я не могу взять на себя работу с таким низким бюджетом, так как моя репутация будет в опасности. Читайте мои отзывы на людей в час , а также
Теперь, когда вы знаете, что нужно знать журналисту и издателю, как насчет того, как научиться применять методы SEO на вашем контент-портале?
Теперь, когда вы знаете, что нужно знать журналисту и издателю, как насчет того, как научиться применять методы SEO на вашем контент-портале? Узнайте, как привлечь читателей с помощью лучших SEO Узнайте, как привлечь читателей с помощью лучших SEO Не полагайтесь на клик-приманку или социальные сети, чтобы привлечь читателей к вашему контенту. Узнайте, как найти, используя ключевые слова SEO, инструменты и методы, с которыми вы справляетесь с большой темой.
Нужно ли мне немного конкретнее или мне нужно немного шире, чтобы вы не только создавали календарь, ориентированный на SEO?
Нужно ли мне немного конкретнее или мне нужно немного шире, чтобы вы не только создавали календарь, ориентированный на SEO? Вы также говорите, что я могу сделать лучше для моего следующего календаря - хорошо, так что я знаю, что это было много вещей. У нас есть много шагов, чтобы превратить этот крошечный снежный ком в большой снежный ком, где вы вдруг стали экспертом в своей области, и я знаю, что создание контента может быть не вашей сильной стороной, и это нормально, потому что такие
Если вы ищете в Google интернет-магазин в своем секторе, что вы найдете?
Если вы ищете в Google интернет-магазин в своем секторе, что вы найдете? Появляется ли ваш Prestashop где-то между первыми результатами поиска, или вам сначала нужно нажать еще несколько страниц, чтобы открыть собственный интернет-магазин? Если вы будете искать по названию вашего Prestashop, вы, вероятно, появитесь сразу, но сколько потенциальных клиентов сделают это? Возможно, не так много, если они не слышали о вашей компании однажды. Гораздо чаще Google выполняет поиск словосочетаний, связанных
Итак, теперь, когда мы знаем, что сказал Google и что показывают данные, что вы можете сделать?
Итак, теперь, когда мы знаем, что сказал Google и что показывают данные, что вы можете сделать? Это самый большой вопрос для тех, кто пострадал. Как мы уже говорили выше, Google сказал, что вы ничего не можете сделать. Там нет исправить. Это не так полезно, не так ли? Но Google предлагает, чтобы вы продолжали работать над улучшением своего сайта, улучшением содержания, улучшением общего пользовательского опыта и, в конечном счете, следующее обновление может привести к улучшению рейтинга
Более 80% клиентов никогда не переходят на страницу 2 поиска, поэтому как вы можете убедиться, что клиенты довольны и продолжают совершать покупки на Amazon?
Более 80% клиентов никогда не переходят на страницу 2 поиска, поэтому как вы можете убедиться, что клиенты довольны и продолжают совершать покупки на Amazon? Предоставляя соответствующие продукты, которые имеют высокую возможность конвертации в покупки. Более простая интерпретация: показать клиентам продукты, которые они хотят купить. Это зависит от того, какие ключевые слова ищут клиенты, коэффициенты конверсии, сопутствующие товары, недавняя история продаж, цены, акции и многое другое.
Так что же делает Коби иначе, чем тысячи маркетологов, которые наблюдают, как их бизнес терпит неудачу из-за того, что не знает, как вести легкий пассивный трафик?
Так что же делает Коби иначе, чем тысячи маркетологов, которые наблюдают, как их бизнес терпит неудачу из-за того, что не знает, как вести легкий пассивный трафик? Есть две вещи: Коби фокусируется на мощном пассивном методе создания пассивного трафика для любого партнерского предложения, которое он хочет. Он использует это особым образом, что позволяет ему видеть поступление Комиссии последовательно. С каждой машиной пассивного трафика, которую он настраивает, он использует
У вас может быть чудесно красивый веб-сайт, но что хорошего в этом будет, если вы не найдете в Google ключевые слова, которые важны для вашей компании?
У вас может быть чудесно красивый веб-сайт, но что хорошего в этом будет, если вы не найдете в Google ключевые слова, которые важны для вашей компании? Тогда вы сможете связаться только с клиентами, которые знают название вашей компании или адрес вашего домена. Но если вы хотите привлечь потенциальных новых клиентов на свой веб-сайт и не занимаетесь лидирующими позициями в Google, вы, вероятно, упускаете этот бизнес. Следовательно, в наши дни уже недостаточно иметь веб-сайт, это также должно быть

Что такое AngularJS?
Версии URL?
Что такое AngularJS?
Это самая большая слабость и вызывает вопросы - как Google поймет мою страницу, если они просто видят шаблон и контент живет в другом месте?
Теперь, кто хочет быть первой обезьяной?
Это все еще хорошо?
Com/search?
В сегодняшнем видео посте мы рассмотрим вопрос недели: «Как я могу заработать деньги как SEO-копирайтер?
Что Google Home означает для будущего SEO и контент-маркетинга?
Обы она занимала более высокое место и конвертировалась лучше?

Авторизация

Реклама

Реклама

Архив сайта


Облако тегов