1. Мой эксперимент
2. Push State и История объекта
3. Заключение
4. Нужна помощь в создании лучшего пользовательского опыта? Свяжитесь с Rand Group Digital для проведения...

Необходимость - мать всех изобретений - Платон

Я - разработчик, прежде чем стать специалистом по маркетингу. Меня больше волнует производительность, разделение кода и возможность повторного использования, чем то, будет ли Google сканировать мои приложения. Я понимаю API и языки сценариев лучше, чем могу читать данные трафика Google Analytics. Но после того, как я присоединился к Rand Group, я понял, как важно иметь сайты, оптимизированные под поисковые системы. Концепции ранжирования SEO и штрафы за дублирование контента стали вещами, которые я считаю столь же важными, как и перерисовка / перерисовка страниц. Некоторые решения являются болезненными, и мне нужно отступить, если моя программистская сторона хочет, чтобы цели проекта победили. Одно из таких решений - могу ли я использовать AJAX на странице, и если это повредит или поможет странице, которую я создаю.

Приходит AJAX или Асинхронный JavaScript и XML веб-технология, которая включает в себя несколько методов, которые обещали лучший способ обновления содержимого сайта. Что такое AJAX? Чтобы ответить на это нам нужно понять Как работает браузер ,

В основном, когда вы открываете браузер на странице веб-сайта через URL или унифицированный указатель ресурса HTTP-запрос отправляется через эфир на веб-сервер, на котором размещена эта страница / веб-сайт. Затем веб-сервер, проще говоря, обслуживает этот ресурс (изображение, HTML и т. Д.) С соответствующим типом MIME. Этот ответ поступает в браузер и загружает текущее представление (окно браузера) с этим документом, изображением и т. Д. До появления AJAX это означало, что вы потеряли предыдущую страницу, которую просматривали, и окно обновилось вновь запрошенным ресурсом. Этого было достаточно 40 лет назад, во времена ARPANET, когда в Интернете была просто куча документов, связанных с другими документами, но сегодня пользователям сети требуется более динамичные и интерактивные веб-сайты. Это означает, что каждый сайт становится все более тяжелым и неуклюжим для загрузки. Это работа разработчиков, чтобы сделать эти страницы более производительными и похожими на настольные приложения. Это означало, что давно принятое использование браузера нуждается в изменении. AJAX стал «изобретением», вызванным этой потребностью. Microsoft добавила новый объект под названием XMLHttpRequest доступно через JavaScript. С XMLHttpRequest веб-страница может иметь JavaScript, который асинхронно (причудливый термин, означающий работу в фоновом режиме) запрашивает актив с веб-сервера и получает этот ответ в виде данных, которыми можно манипулировать с помощью JavaScript. Самым распространенным применением было вставление динамической разметки в DOM. Для иллюстрации представьте, что у вас есть страница с боковой панелью с тикером для последней информации об акциях. В AJAX вам нужно всего лишь щелкнуть ссылку или кнопку, которая вызывает запрос к API биржи и загрузить документ, который он возвращает. Все без обновления страницы. Это экономит время и поддерживает взаимодействие с пользователем и снижает нагрузку на веб-сервер.

На данный момент, вы можете увидеть немного яснее преимущества AJAX. Меньшая нагрузка на сервер, удобство для пользователя, веб-страницы напоминают настольные приложения, гибкость для любого ресурса (HTML, текстовые файлы, изображения и т. Д.). Хотя это и весьма полезно, но не без недостатков. AJAX портит историю браузера, что означает, что, в отличие от нормально загруженных сайтов, нажатие кнопки «назад» или «вперед» не отображает различные версии страницы. Это приводит к путанице и разочарованию со стороны пользователя, не говоря уже о разнице в реализации с различными браузерами. AJAX больше ориентирован на приложения, чем на документы. Приложения заботятся о состоянии представления для выполнения задачи. Документы являются «контейнерами» информации. Требуются дополнительные усилия для создания этой разницы в коде, чтобы получить единый интерфейс для выдачи запросов AJAX. Это привело к популярности множества фреймворков и библиотек Javascript, таких как jQuery и AngularJS.

Для веб-профессионала самым большим недостатком AJAX является то, что он не является оптимальным решением для индексации и сканирования вашей страницы поисковыми системами. Автоматизированные модули поисковых систем, более ласково известные как боты, представляют собой интеллектуальные приложения, которые обыскивают Интернет, переходя одну ссылку за другой, чтобы каталогизировать Интернет в документах слов и URI. Боты должны быть оптимизированы для выполнения этой задачи, поэтому в течение самого длительного времени все поисковые боты отображали только начальную разметку документа веб-сайта. Информация после события DOMContentLoaded, такая как запрос AJAX, была в целом проигнорирована. Так что если у вас был сайт, зависящий от AJAX, то вам не повезло. Как я упоминал ранее, AJAX лучше подходит для приложений, в которых существует состояние текущего представления, чтобы указать на задачу, которая должна быть выполнена. Совершенно несовместим с документно-ориентированными ботами.

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

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

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

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

Первый вопрос, на который я хотел ответить, был ли контент, созданный с помощью Javascript, доступен для роботов Google. Во-вторых, какие данные AJAX безопасны для сканирования.

Мой эксперимент

Я создал страницу с областью, в которую я загружаю контент AJAX. Во-первых, раздел создается с использованием фрагмента (.shtml) с нормальной разметкой HTML. Я добавил уникальную строку в файл, думая, что это облегчит тестирование из поиска Google.

После добавления этого раздела я зашел в Инструменты Google для веб-мастеров и отправил страницу для индексации. Через несколько минут я перешел к поиску Google:

Все идет нормально. Таким образом, ответ на вопрос, может ли мой первый тест быть пригодным для сканирования, - это громкое «да».

Второй раздел - это график ссылок, созданных из источника данных JSON, и магия манипулирования DOM в jQuery. Как и в первом разделе, я создал уникальную строку, составленную из объединенных категорий.

На этот раз я хотел, чтобы Google естественным образом проиндексировал страницу. Я подождал час после повторной отправки карты сайта:

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

Мы доказали, что и фрагмент HTML, и сгенерированная разметка доступны для сканирования из Google.

Чтобы узнать, не получит ли страница наказания от Googlebot, я повторно отправил свой индекс и подождал еще несколько дней:

Я не заметил никаких предпочтений по типу разметки. Абзацы и якорные заголовки были проиндексированы и доступны для поиска в Google.

В то же время я отправил свою страницу для индексации. Я вошел в Bing и представил ту же страницу. На момент написания этой страницы я еще не мог использовать контент AJAX для таргетинга на страницу с помощью Bing.

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

Push State и История объекта

HTML5 введены методы history.pushState () и history.replaceState () , Эти методы помогают объекту истории браузера, который браузер использует для ссылки на разные страницы. Оба метода принимают URL в качестве параметра. Всякий раз, когда, например, метод pushState вызывается, текущее местоположение сохраняется в качестве источника ссылки и запускается событие. Скрипты страницы улавливают это событие и его работу по выполнению соответствующих действий. При этом вы можете привязать страницу к различным «снимкам». Теперь вы можете использовать кнопку истории, чтобы перемещаться по сеансу страницы без экранирования или обновления текущей страницы. Состояния страницы затем могут быть переданы в виде URL-адреса для индексации по ссылке на странице или по записям в карте сайта. Эта разработка привела к появлению нового типа приложений под названием SPA или одностраничное приложение.

Тема моего следующего эксперимента будет «Одностраничные приложения». Так что следите за этим.

Заключение

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

Нужна помощь в создании лучшего пользовательского опыта? Свяжитесь с Rand Group Digital для проведения маркетингового аудита просмотреть ваш текущий веб-сайт и помочь определить области для улучшения.

- Программное обеспечение доставлено как обещано. Без сюрпризов.

Похожие

Комментарии