Рубрики

Полезные материалы

Стратегии SEO для одностраничных приложений JavaScript или сайтов AJAX

  1. Хотите быть в курсе последних тенденций поиска?
  2. Хотите быть в курсе последних тенденций поиска?

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

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

Справочная информация: клиентский JavaScript и фрагменты URL

Клиентские веб-фреймворки активно используют технологию, называемую AJAX - асинхронный JavaScript и XML. Он превращает статические веб-сайты в динамические веб-приложения, которые могут предоставлять богатый и разнообразный пользовательский опыт без обновления всей страницы и изменения URL-адреса. Различные состояния приложения обычно обозначаются путем добавления хэштега к URL-адресу, который можно узнать по префиксу (#) (например, http://www.hugeinc.com/#aboutus).

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

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

Эта проблема

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

И хотя Google постоянно совершенствует возможности своих роботов в JavaScript, Bing / Yahoo отстает. И даже если движки пытаются индексировать контент, они часто не уверены, что могут точно представить состояние, наиболее релевантное поисковому запросу, на основе URL-адресов в их индексе. Результат: плохая видимость поиска относительно конкурентов.

Одно из решений: резервные страницы

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

Выгоды

Резервные страницы дают поисковым системам контент, который им необходим для важных целевых страниц поиска. Эти страницы не предназначены для пользователей, если они не используют ограниченный или текстовый браузер. Идя дальше, подход Cadillac к этой проблеме часто называют «Прогрессивным улучшением» - полноценным сайтом, на котором пользователи получают столько функциональных возможностей, сколько может выдержать их система. Конечно, это также большая часть работы, так как код должен быть написан для каждого уровня функциональности клиента по всему сайту.

Обратная сторона

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

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

Реализация резервных страниц

Существует несколько подходов к реализации резервных страниц. Их можно достичь, просто поместив важный контент в тег <noscript>. Это добавляет раздувание кода, может быть неудобно и ограничено ключевыми страницами ввода. Если тег не загружается по мере продвижения пользователя в веб-приложение, содержимое будет потеряно для движков.

Другой подход заключается в обработке этого на стороне сервера. В 2011 году Google ввел стандарт - часто называемый «hashbang» (#!) - который переводит URL-адреса хэштега в строку запроса для индексации роботами. В отличие от фрагментированной части URL-адреса, строки запросов видимы для серверных систем и поэтому позволяют веб-разработчикам отображать соответствующий контент на стороне сервера исключительно для поисковых систем. Это дает преимущество создания индексируемых URL.

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

Другие решения проблемы URL

Как упомянуто выше, в зависимости от степени, в которой был рассмотрен SEO, данное состояние UX для сайтов AJAX или SPA может иметь видимые URL, которые отличаются или невидимы для поисковых систем. Это означает, что поисковые системы могут видеть один набор URL-адресов, а пользователи - другой.

Создание пользовательских UX-элементов и функциональных возможностей «общего доступа», включая общие URL-адреса, помогает уменьшить неспособность пользователей копировать и пропускать URL-адреса, точно отражающие состояние, которое видит пользователь:

Создание пользовательских UX-элементов и функциональных возможностей «общего доступа», включая общие URL-адреса, помогает уменьшить неспособность пользователей копировать и пропускать URL-адреса, точно отражающие состояние, которое видит пользователь:

Элементы UX могут помочь уменьшить отсутствие общих URL-адресов на тяжелых сайтах JavaScript

Конечно, не все будут использовать эти элементы UX, и они требуют разработки логики на стороне сервера, которая может форсировать состояние через элементы URL и представлять ее пользователю.

Использование pushState для устранения проблемы с URL

HTML 5 включает в себя возможность манипулировать путем URL, как видно в браузере, а также историю браузера через Javascript. Это полезно для сайтов SPA и AJAX, так как удобный для поисковых систем, общий и доступный для закладки URL-адрес может быть показан клиенту, в то время как фрагменты JavaScript и URL-адреса выполняются в фоновом режиме.

Реализация pushState

Добавление pushState является довольно простым, и на самом деле многие из популярных одностраничных фреймворков, такие как фреймворк с открытым исходным кодом Ember или Google угловатый Framework предоставляет API для легкого доступа к функциональности. Но даже для веб-разработчиков, предпочитающих пользовательскую разработку Javascript, недавно добавленный History API, являющийся частью спецификации HTML5, предоставляет простой интерфейс для отправки полных обновлений URL-адресов на панель браузера на стороне клиента без использования ограниченных доступных фрагментов URL-адресов или принудительного применения обновление страницы.

Downsides

лучший SEO Реализации pushState находятся на сайтах, которые уже доступны без JavaScript, с версией AJAX, построенной «сверху», как описано выше. Затем включается PushState, позволяющий копировать и вставлять ссылки и все другие преимущества наличия URL-адресов, отражающих пользовательский интерфейс, например, URL-адреса назначения целевой страницы. Таким образом, pushState, по сути, не является решением проблемы сайтов AJAX и SEO самостоятельно, но помогает.

Реализация pushState добавляет нагрузку на разработку и сопровождение. Переменные и URL-адреса, на которые ссылаются, должны будут обновляться по мере развития сайта.

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

Положить его вместе

Если бюджет и ресурсы позволяют, комплексный подход к созданию SEO-дружественного сайта AJAX или SAP будет включать:

  • Резервные страницы для ключевых органических целевых страниц как минимум или полностью прогрессивный сайт улучшения, который работает с Javascript и без него, что позволяет индексировать.
  • Реализация pushState для устранения проблемы с URL-адресами для пользователей или клиентов с поддержкой JavaScript, которая позволяет совместно использовать и добавлять закладки и генерирует единый URL-адрес для всех пользователей.

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

Примечание автора: отдельная благодарность Томас Проммер , вице-президент по технологиям в Huge, за помощь в написании этой статьи.

Изображение Огнян Младенов, Flickr

Хотите быть в курсе последних тенденций поиска?

Получить лучшие идеи и новости от наших экспертов по поиску.

Хотите быть в курсе последних тенденций поиска?

Получить лучшие идеи и новости от наших экспертов по поиску.

Похожие

Вернуться к основам - SEO 101
... вольно много людей, которые плохо знакомы с SEO прийти в поисковик часы или Конференции SES чтобы понять, что многие из нас практиковали в течение многих лет"> Довольно много людей, которые плохо знакомы с SEO прийти в поисковик часы или Конференции SES чтобы понять, что многие из нас практиковали в течение многих лет. Итак, прежде всего ... добро пожаловать новичкам! Не бойся
Что такое линкбилдинг?
Facebook убивает новости: издатели в панике, постарайтесь вспомнить, как делать SEO
SEO Аутсорсинг, Аутсорсинг SEO услуг в Индии, SEO Аутсорсинг
... хотите, только вы должны платить за это, и с меньшими инвестициями вы можете получить максимальную прибыль. Качество - есть гарантия для каждой работы, которая будет выполнена наилучшим образом. Нельзя идти на компромисс с качеством SEO услуги. Это всегда дешево и лучше. Оптимальное использование ресурсов. Ресурсы, которые используются во время этого процесса, чтобы
Нанять SEO Эксперт
... быть креативным, открытым и способным к лучшему в других местах. Вам следует ознакомиться с портфолио проектов, выполненных в Интернете. Когда вы решите нанять преданных экспертов по SEO, вы должны проверить стандарты качества, в которых работают и работают сотрудники компании. Наша специальная команда SEO-специалистов. Webeveron Technologies SEO-специалисты являются экспертами в своих областях знаний и нанимаются для работы только над вашим проектом.
[Инструменты] SEO SpyGlass
... вается поисковой консолью. Особенно, когда речь идет об анализе конкурентных ссылок, к которым у нас нет доступа в Search Console. Мы сразу придумываем такие решения, как Majestic или Ahrefs, но они не лишены одного большого недостатка. Эти инструменты популярны, поэтому очень часто блокируются в подсобных помещениях и не только. Предполагается, что многие веб-сайты блокируют свои сканеры из-за ресурсов, которые они едят. И тут приходит помощь SEO
Майами SEO Компания
Ищете SEO-компанию в Майами, прозрачную, честную, авторитетную и известную своими превосходными результатами? Если это так, WebFindYou ваш ответ. Будь это ваша первая попытка SEO или у вас уже был неудачный опыт работы с другими SEO-компаниями, будьте уверены, что вы наконец нашли подходящую Miami SEO Company для ваших нужд - спросите любого из наших клиентов, и они скажут вам то же самое.
SEO услуги - на странице SEO - на странице SEO | Ticode
Вы уже знаете, что ваш сайт не имеет хорошего рейтинга в поисковых системах, и вы, вероятно, знаете некоторые из причин, почему. Возможно, мы даже выполнили полный SEO Оценка сайта для вас, и теперь мы готовы реализовать некоторые или все изменения, рекомендованные в нашем отчете. Если оценка не проводилась, мы проведем подробное интервью с вами, чтобы узнать больше о вашем рынке, прежде чем мы начнем какую-либо оптимизацию вашего
Начало Facebook SEO
Последняя проверка 6 марта 2019 года в 18:54 Как мы все знаем, Facebook быстро догоняет свой рейтинг трафика
Оттава SEO Услуги | На странице SEO | Eaglewebz
... быть не особенно дружелюбно для сканеров. Иными словами, технический SEO-аудит рассматривается как фактор успеха. В случае отсутствия технических факторов SEO, даже другой выдающийся веб-сайт не будет отображаться в верхней части или даже в верхней части страниц результатов поисковой системы Google. В результате ваши посетители останутся ниже, а маркетинговые возможности останутся нереализованными. Даже если есть какие-то изменения, необходимые для веб-дизайна, члены нашей
Почему хорошо продуманная стратегия SEO необходима для праздников
... ваш бизнес в сфере B2B или потребительские товары, курортный сезон представляет собой уникальную SEO возможности извлечь выгоду, и важные подводные камни, чтобы избежать. Электронные магазины, магазины розничной торговли и даже предприятия розничной торговли, а также компании, работающие в сфере B2B, могут получить уникальные

Комментарии

Хотите быть в курсе последних тенденций поиска?
Хотите быть в курсе последних тенденций поиска? Получить лучшие идеи и новости от наших экспертов по поиску. Хотите быть в курсе последних тенденций поиска? Получить лучшие идеи и новости от наших экспертов по поиску.
Но как насчет небольших сайтов, таких как небольшой личный блог или сайт электронной коммерции, ориентированных на относительно небольшое количество продуктов или услуг?
Но как насчет небольших сайтов, таких как небольшой личный блог или сайт электронной коммерции, ориентированных на относительно небольшое количество продуктов или услуг? Должен ли этот тип сайта также интегрировать панировочные сухари? На этот вопрос нет правильного или неправильного ответа. Хотя очевидно, что хлебные крошки предпочитают SEO для больших сайтов со сложной древовидной структурой, их релевантность в этой области априори менее важна для сайтов небольшого
Хотите помочь в реализации тематической кластерной стратегии?
Хотите помочь в реализации тематической кластерной стратегии? Я расскажу вам, как вы можете применить эту платформу к своему контенту. Связаться , Стратегия кластеров тем позволяет вам охватить ряд основных тем с меньшим количеством контента, создав при этом эффективную информационную архитектуру на вашем веб-сайте. Он состоит из двух компонентов: Содержание столба Содержание кластера Мы начинаем с создания
Поэтому, чтобы облегчить обмен информацией между вашими посетителями, целесообразно добавить одну (или несколько) кнопок общего доступа к блогу: вверху или внизу статей или почему бы не сбоку?
Поэтому, чтобы облегчить обмен информацией между вашими посетителями, целесообразно добавить одну (или несколько) кнопок общего доступа к блогу: вверху или внизу статей или почему бы не сбоку? Вы увеличиваете свою видимость в социальных сетях (а вместе с этим и ваш SEO) Взаимодействие и разговор Мы регулярно слышим об управлении сообществом, функция, которая была на подъеме в течение нескольких лет. Его главная задача, как следует из названия,
Вы хотите нанять маркетинговое агентство или консультант, но не знаете, каким должен быть ваш бюджет?
Поэтому, чтобы облегчить обмен информацией между вашими посетителями, целесообразно добавить одну (или несколько) кнопок общего доступа к блогу: вверху или внизу статей или почему бы не сбоку? Вы увеличиваете свою видимость в социальных сетях (а вместе с этим и ваш SEO) Взаимодействие и разговор Мы регулярно слышим об управлении сообществом, функция, которая была на подъеме в течение нескольких лет. Его главная задача, как следует из названия,
Вы хотите знать, хорошо ли работает ваш веб-сайт в поисковых системах, или вы хотите знать, что вам нужно улучшить, чтобы найти его лучше?
Вы хотите знать, хорошо ли работает ваш веб-сайт в поисковых системах, или вы хотите знать, что вам нужно улучшить, чтобы найти его лучше? Запросите наше профессиональное SEO-сканирование бесплатно. Не генерируется автоматически! В отличие от многих других сканирований веб-сайтов, которые предлагаются в Интернете, наше SEO-сканирование автоматически не создается программой. Мы смотрим на ваш сайт очень персонально и подробно и анализируем
Был ли у вас опыт использования этого плагина или работы с SEO?
Был ли у вас опыт использования этого плагина или работы с SEO? Оставьте свой комментарий и, конечно же, поделитесь этой статьей с друзьями. Обнимаю и увидимся в следующий раз.
Если вы хотите немного повысить свой SEO, почему бы не попробовать добавить в него маркетинг в социальных сетях?
Если вы хотите немного повысить свой SEO, почему бы не попробовать добавить в него маркетинг в социальных сетях? Интеграция вашего маркетинга и изучение совместной работы различных стратегий жизненно важны для успешной кампании. За управление социальными сетями услуги, свяжитесь с Big Leap или посетите наш компания по маркетингу в социальных сетях стр. Маккейн родился
Зачем выбирать себе профессионала SEO, если вы можете нанять настоящего эксперта SEO?
Зачем выбирать себе профессионала SEO, если вы можете нанять настоящего эксперта SEO? Всегда проводите тщательную проверку, прежде чем нанимать SEO-эксперта! Ваш бизнес и средства к существованию могут быть под угрозой здесь. Вот несколько указателей. Если что-то из этого не подходит, уходи! Попросите встретиться с их экспертами SEO или командой SEO. Это должно быть первым делом в повестке дня. Обязательно проверьте любые претензии на сайте Аккредитации
Может ли ваша SEO компания помочь вам в этом, или вам нужна PR фирма?
Может ли ваша SEO компания помочь вам в этом, или вам нужна PR фирма? Если они спонсируют значительное количество мероприятий, то какие мероприятия они спонсируют и почему? Эти места ваша компания тоже должна искать? Найти редакционные возможности Почти два года назад я написал: 5 PR-стратегий, которые вы можете использовать для создания ссылок прямо сейчас
Вы можете прочитать больше о нашем SEO для путешествий здесь, или почему бы просто не поговорить с нами и узнать, можем ли мы помочь?
Может ли ваша SEO компания помочь вам в этом, или вам нужна PR фирма? Если они спонсируют значительное количество мероприятий, то какие мероприятия они спонсируют и почему? Эти места ваша компания тоже должна искать? Найти редакционные возможности Почти два года назад я написал: 5 PR-стратегий, которые вы можете использовать для создания ссылок прямо сейчас

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