Дизайн структуры URL-адреса сайта.

Вы должны уделять время на проектирование структуры URL. Есть одна вещь, я надеюсь, вы запомните ее после прочтения этой статьи — для создания свей URL структуры нужно потратить время. Не переносите эту работу полностью на ваш фреймворк. Не оставляйте это на волю случая. Думайте об этом и набирайтесь опыта.

Дизайн URL структуры сайта - это сложный вопрос. Я не могу сказать есть ли "правильные" решения - это так же, как с остальным дизайном. Есть хороший дизайн URL, есть плохой, а есть что-то среднее - это все субъективно.

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

Почему вы должны делать дизайн своих URL.

URL дизайн для браузера

Адресная строка стала главной достопримечательностью современных браузеров. И это не просто строка для URL - можно ввести часть URL-адреса и браузеры используя темную магию, покажут вам практически точный адрес, который вы ищите. При вводе resque issues в моей адресной строке, я получу в результате:

https://github.com/defunkt/resque/issues.

URL-адреса являются универсальными. Они работают в Firefox, Chrome, Safari, Internet Explorer, CURL, Wget, ваш iPhone, Android и даже на стикерах для заметок. Они являются одним универсальным синтаксисом Сети. Не принимайте это как должное.

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

Самые важное - это верхнии уровни сайта.

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

Думаете я драматизирую? Может и так, но после того как прийдут 1,000,000 пользователей уже поздно думать о том, какое влияние будет вносить структура URL.

Другой совет - всякий раз, когда вы создаете новый сайт, подумайте о черных списках URL-адресов (и, возможно, узнайте немного о плохом дизайне URL из Quora’s URLs).

Пространства имен является отличным инструментом для расширения URL-адресов.

Пространства имен могут быть отличным способом для создания прагматической структуры URL, которую легко запомнить при частом использовании. Что я подразумеваю под пространством имен? Я имею в виду часть URL, которая означает уникальный контент. Например:

https://github.com/defunkt/resque/issues

В указанном выше URL, defunkt/resque является пространством имен. Почему это полезно? Потому, что все после этого URL становится новым разделом сайта. Таким образом, вы можете перейти к любой <user>/<repo> и перейти на /issues или, может быть на /wiki и получить ту же страницу, но в другом пространстве имен.

Держите пространство имен в чистоте. Не начинайте бросать один контент в /feature/<user>/<repo>, а другой в /<user>/<repo>/feature. Чтобы пространства имен были эффективными они должны быть универсальными.

Строковые параметры в URL.

Параметры в URL-адресах позволяют легко настроить текущий вид страницы и настроить его на свой вкус. Придерживайтесь единого формата параметров (например: sort=alpha&dir=desc) и у вас будет легкая и запоминающиеся сортировка и фильтрация по URL.

И еще. Страница должна работать и без параметров. Содержание страницы может отличаться, но она должна отображаться.

Не ASCII URL, ужасны для английских сайтов.

Существует большое множество разных интересных символов - ¿ümlåts?, ¡êñyés, и даже такие ☄. Таким символам не место в адресной строке сайта. Их сложно набрать с клавиатуры и в адресной строке браузера они обычно заменяются на что-то вроде «xn-n3h».

URL-адреса должны быть для человека, а не для поисковых систем.

Довольно часто в URL-адрес добавляют ключевые слова для поисковиков и получаются адреса в виде:

http://guitars.example.com/best-guitars/cheap-guitars/popular-guitar

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

Имейте в виду некоторые дополнительные моменты:

  • Подчеркивание - это плохо, используйте тире.
  • Используйте короткие, полные и обычные слова.

URL-адреса предназначены для человека. Создавайте и проектируйте их для людей.

URL является договором.

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

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

Все должно иметь URL.

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

  • onReplaceState - этот метод заменяет текущий URL в истории браузера, оставляя кнопку "Назад" неизменной.
  • onPushState - этот метод добавляет новые URL в историю браузера, заменяет URL в адресной строке и добавляет его в историю браузера (влияет на кнопку "Назад").

Когда использовать onReplaceState и когда использовать onPushState.

Эти новые методы позволяют изменить весь путь в адресной строке, не только якорь элемента. При этом с новой возможностью приходит новая ответственность - мы должны обрабатывать кнопку назад.

Чтобы определить, какой способ использовать, задайте себе такой вопрос: это действие дает новое содержание или это просто другая страница с тем же содержанием?

  • Новое содержание - вы должны использовать onPushState (например: ссылки с нумерацией страниц)
  • Различные отображения одного и того же содержания - вы должны использовать onReplaceState (например: сортировка и фильтрация)

Используйте свои собственные суждения, но не забывайте эти два правила. Подумайте, что вы хотите увидеть при нажатии кнопки "Назад" и делайте это.

Ссылка должна вести себя как ссылка.

Очень много удивительного функционала встраивают в элементы <а> и <button>. Если вы кликайте средней кнопкой мыши или нажимаете ctrl+ кнопка мыши, то ссылка открывается в новой закладке (окне). При наведении курсора на <a> браузер показывает вам URL в строке состояния. Не ломайте это поведение при игре с onReplaceState и onPushState.

  • Встраивайте расположение запросов AJAX в href атрибуты элементов ссылок.
  • Возвращайте true от обработчиков Javascript после нажатия на ссылки.

Это довольно просто сделать с обработчиком нажатия. Вот пример на JQuery:

$('a.ajaxylink').click(function(e){
   // Fallback for browser that don't support the history API
   if (!('replaceState' in window.history)) return true

  // Ensure middle, control and command clicks act normally
   if (e.which == 2 || e.metaKey || e.ctrlKey){
     return true
   }

  // Do something awesome, then change the URL
   window.history.replaceState(null, "New Title", '/some/cool/url')
   return false
 })

Отличный пример.

Best URL

  1. В URL используются только ASCII символы и части, созданные пользователем (defunkt, resque).
  2. "pull" это укороченный вариант от "pull request".
  3. Номер запроса для pull в области видимости defunkt/resque.
  4. Точки привязки к якорю для прокрутки позиции.

Бонусные баллы: Этот адрес имеет много различных форматов, например посмотрите patch и diff.

Начало новой эры.

Я надеюсь, что использование нового Javascript API увеличивается, дизайнеры и разработчики уделять время на дизайн URL. Юзабилити - это важная часть любого сайта, но я часто вижу, что дизайн URL-адреса игнорируются. Легко перестроить внешний вид сайта, но гораздо труднее переделать URL структуру.

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

По материалам URL Design.

Постоянная ссылка на материал Дизайн структуры URL-адреса сайта.