Экономика стран

К сожалению, большинство людей, которые будут ими затронуты почти весь мир, не будут иметь никакого влияния на результат. Вести Экономика Дайджест иностранной прессы за 14 августа.
Вести Экономика Греции снова придется списывать долги Греция не сможет самостоятельно расплатиться по долгам, и понадобится новая реструктуризация долгов, чтобы спасти страну от банкротства.

SEO и доступность с HTML5 PushState: Часть 1. Введение в PushState

  1. SEO дружественные и доступные версии
  2. Хэш фрагменты
  3. HashBang URL для SEO дружелюбия
  4. PushState HTML5 на помощь
  5. Работа с PushState URL
  6. Прогрессивное улучшение и PushState
  7. Реализация PushState и прогрессивное улучшение с Backbone.js

С ростом популярности фреймворков JavaScript и высокофункциональных приложений javascript с сохранением состояния через такие фреймворки, как Backbone.js, SproutCore, KnockOut.js и т. Д., Все больше и больше разработчиков начинают задавать вопросы об оптимизации поисковых систем (SEO) и доступности. На StackOverflow регулярно появляется все больше и больше вопросов, и все больше и больше книг и статей пишется на эти темы. Недавно я углубился в тему и хотел поделиться своими мыслями и подходом, который я недавно использовал, в небольшой серии сообщений. В этом первом посте рассматривается проблемное пространство SEO и доступности, а во втором - пример реализации с использованием Backbone.js и веб-сервера Sinatra.

SEO дружественные и доступные версии

И SEO, и доступность имеют схожую базовую философию: семантически богатая разметка, которая «доступна» (то есть может быть доступна, просмотрена, прочитана, обработана или использована иным образом) для разных браузеров. Программа чтения с экрана, сканер поисковой системы или пользователь с включенным javascript должен уметь без проблем использовать / индексировать / понимать основные функции вашего сайта.

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

Хэш фрагменты

Многие из современных тяжелых JavaScript-фреймворков поддерживают использование хеш-фрагментов URL - тех «# что», которые добавляются в конец URL в окне вашего браузера.

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

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

HashBang URL для SEO дружелюбия

Затем, несколько лет назад, Google выпустил несколько документов, которые описывают способ для JavaScript-приложений, использующих фрагменты хеш-URL, сканироваться и индексироваться поисковыми системами, что делает их оптимизированными для SEO , Это стало известно как URL-адреса HashBang, потому что он использует # (хэш) и! (взрыв) во фрагменте хэша URL.

Например, Twitter использует hashbangs для своих пользовательских страниц:

Например, Twitter использует hashbangs для своих пользовательских страниц:

Это помогло, но представило новую проблему в виде трехглавого монстра.

  1. Это не официальный стандарт. Это просто рекомендация от Google для разработчиков и других поисковых систем для работы с
  2. Требуется, чтобы на внутреннем сервере был написан потенциально странный и болезненный код. Сервер должен знать, как ответить на запрос с помощью специально отформатированного параметра URL «_escaped_fragment_»
  3. Он почти ничего не делает для обеспечения доступности и обращается только к SEO напрямую, поскольку, скорее всего, только поисковая система реализует необходимый запрос «_escape_fragment_»

PushState HTML5 на помощь

PushState - это новый стандарт HTML5, который помогает нам решать все эти проблемы. То, что раньше было URL-адресом, таким как http://example.com/#images/1, чтобы сообщить приложению JavaScript о необходимости загрузки изображения # 1 на экран, теперь можно представить в виде стандартного URL-адреса: http://example.com / images / 1 - фрагмент хеша не требуется.

Нет волшебной, загадочной технологии, которая внезапно делает все доступным и оптимизированным для SEO. На самом деле, мы все еще должны сделать всю работу, чтобы наши сайты были доступны и оптимизированы для SEO. На самом деле PushState - это не что иное, как стандартный API для JavaScript, который позволяет нам манипулировать историей браузера, «вставляя» полные URL-адреса в URL-адрес браузера, не совершая обратной передачи на сервер, и реагировать на изменения в URL-адресе. с Javascript - все без использования фрагментов хеша URL. PushState дает нам более легкую точку входа в SEO-дружелюбие и доступность.

(Для полного знакомства с новым API управления историей в HTML5, ласково известного как «PushState», ознакомьтесь с Погрузитесь в HTML5 руководство по истории )

Работа с PushState URL

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

Если ранее URL был настроен для загрузки как http://example.com/#images/1, чтобы загрузить изображение № 1 из списка и отобразить его, то версия PushState будет просто http://example.com / изображений / 1. С нашим приложением JavaScript, использующим PushState, URL-адрес браузера можно обновить, чтобы он указывал на это местоположение, не совершая поездку в оба конца на сервер. Это позволяет нам иметь намного более интерактивную веб-страницу, в то же время более дружественный URL для пользователя и для поисковых систем.

Мы не можем останавливаться на том, чтобы просто удалить # и включить PushState. Поскольку URL-адрес, на который теперь указывает наш браузер, является стандартным URL-адресом, а не URL-адресом фрагмента хеша, это означает, что наш сервер должен иметь возможность отвечать на запрос непосредственно по этому URL-адресу. Например, предыдущий хеш-фрагмент «/ # images / 1» будет интерпретирован браузером как запрос к «http://example.com», а затем хеш-фрагмент будет обработан браузером, как только содержимое был загружен документ по умолчанию для example.com. При изменении стандартного URL-адреса, когда браузер отправляет запрос на example.com/images/1, сервер должен иметь возможность ответить на этот запрос и предоставить обработанный HTML-код и контент для всей страницы, чтобы отобразить запрошенное изображение. ,

Для этого нам нужно, чтобы наш сервер отображал то же содержимое, которое браузер отображал бы с помощью JavaScript, и отправлял эту версию в запрашивающий браузер. Вот где настоящая магия PushState дает нам SEO дружелюбие и доступность. Поскольку мы отправляем полную отредактированную версию страницы запрашивающему браузеру (средство чтения с экрана, поисковую систему и т. Д.), Нам больше не нужно полагаться на JavaScript для отображения содержимого страницы для нас. Это означает, что нам больше не нужно беспокоиться о том, что поисковая система не сможет проиндексировать контент или программа чтения с экрана, имеющая дело с JavaScript.

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

Прогрессивное улучшение и PushState

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

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

PushState не меняет необходимости прогрессивного улучшения. Скорее, это выводит необходимость постепенного улучшения из списка с низким приоритетом и графика «если у нас есть время», на передний план процесса разработки, где это и должно быть. И, как и другие проблемы с доступностью и SEO, выполнение этого требует предварительного планирования, иначе это станет значительным бременем. Он должен быть встроен в страницу и архитектуру приложения с самого начала - модернизация является болезненной и вызовет больше дублирования, чем необходимо. Однако работа с PushState с самого начала позволяет нам принимать более обоснованные решения о наших внутренних реализациях, системах шаблонов, которые мы используем как для сервера, так и для клиента, и о том, как мы приближаемся к прогрессивному улучшению нашего JavaScript-кода.

Реализация PushState и прогрессивное улучшение с Backbone.js

В следующей части этой небольшой серии Я расскажу о деталях реализации использования PushState с приложением Backbone.js. Я покажу, как включить PushState с помощью маршрутизаторов Backbone и как присоединить уже отрендеренный фрагмент HTML к представлению Backbone с установленной моделью Backbone. Я также вернусь к нескольким из моих предыдущих постов в блоге и соберу их все вместе, чтобы помочь в создании шаблонов HTML, которые могут быть отображены с помощью серверной инфраструктуры фонового интерфейса, а также интерфейсной структуры JavaScript.

Навигация сайта
Реклама
Панель управления
Календарь новостей
Популярные новости
Размер обуви США на русский - американский размер обуви на русский: таблица, как определить размеры обуви США на русский по таблице
Размер обуви США на русский легко определить и сегодня мы разберем как это сделать. Сейчас многие люди предпочитают приобретать обновки в интернет магазинах, где нередко можно найти хорошие вещи по умеренным

Магазин обуви ECCO (Барнаул)
О компании ECCO (Барнаул) – розничные магазины, в которых вы можете купить качественную женскую, мужскую и детскую обувь. Обувь под брендом ECCO выпускается уже более 50 лет. На сегодняшний день компания

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

Adidas | интернет магазин адидас (Adidas) мужской обуви (недорогая мужская обувь) Москва - кроссовки мужские и женские (женский) адидас - купить мужскую обувь по каталогу
Обувь adidas Выбор обуви явно нелегкий процесс. Мы встречаем множество различных брендов, но какой из них лучший? Как Вы, наверняка, догадались, речь пойдет о марке, зарекомендовавший себя еще с далекого

Стала известна дата выхода коллекции обуви The Weeknd и Puma
Первая совместная с Puma коллекция кроссовок The Weeknd выйдет 24 августа. Об этом канадский музыкант сообщил в своем Instagram. Тогда же, по слухам, обувь появится и на российских прилавках. Пока

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

Размер ножки у ребенка по месяцам подбираем правильно и быстро
Определяем размер ножки Когда сами становимся родителями, мы начинаем осознавать выражение наших друзей и подруг — «малютка растет не по дням, а по часам». Ведь кажется, еще неделю назад у крохи

Интернет-магазин детской обуви
  "TAPIBOO" — ОБУВЬ ДЛЯ САМОГО ГЛАВНОГО! В нашем магазине обуви для детей представлены недорогие ортопедические модели для покупки оптом и в розницу. Мы разработали ряд коллекций, которые придутся

ТАШИ-ОРТО – огромный выбор профилактической и ортопедической обуви для детей.
Врачи-педиатры, ортопеды и неврологи сходятся во мнении, что для правильного формирования свода стопы ребенку необходима специальная ортопедическая обувь. Детям же с имеющимися физиологическими и анатомическими

Интернет-магазин детской обуви "TIFLANI"
А вы хотите, чтобы ваш ребенок был здоровым, модным и счастливым? Разумеется, дорогие мамы и папы! Заботьтесь о здоровье вашего ребенка уже сегодня и приобретайте правильную обувь. Чтобы сделав уверенно

Информация
Экономика стран www.mp3area.ru © 2005-2016
При копировании материала, ссылка на сайт обязательна.