Урл как интерфейс
Для меня урл (URL) на сайте или в веб-приложении — часть интерфейса. Поэтому он должен быть хорош.
Понимаю, что нормальные люди не задумываются об урлах, а в идеале вовсе не знают, что это такое. Но я гик, поэтому хочу красивые и информативные адреса. Если у вас так же — оставайтесь, поговорим о плохих и хороших урлах.
Плохие урлы
Начнём с характеристик плохого урла.
Урл не зависит от состояния
Пусть есть список клиентов с адресом /customers. Если при поиске, фильтрации и переходе по страницам списка адрес не меняется — это плохой урл. Такой не сохранишь в закладках и не пришлёшь коллеге.
Лучше, если урл отражает состояние списка:
/customers?channel=facebook&sort-by=ltv&page=3
Урл шифрует состояние
Допустим, программист осознал проблему с урлом из предыдущего примера, и добавил в него состояние:
/customers?state=eyAiZmlsdGVyIjogeyAiY2hhbm5lbCI6ICJmYWNlYm9vayIsICJuYW1lIjogbnVsbCwgInBob25lIjogbnVsbCwgImVtYWlsIjogbnVsbCB9LCAic29ydC1ieSI6IHsgImZpZWxkIjogImx0diIsICJkaXJlY3Rpb24iOiAiYXNjIiB9LCAicGFnZSI6IDMgfQ==
Это всё равно плохой адрес. Во-первых, он уродлив. Во-вторых, непонятно, что в нём зашифровано — вдруг там мой пароль, а я поделюсь ссылкой?
В урле мусор
Вот адрес поискового запроса в Гугле:
https://www.google.ru/search?newwindow=1&site=&source=hp&q=who+am+i&oq=who+am+i&gs_l=psy-ab.3..0l4.563.2744.0.2962.8.8.0.0.0.0.73.547.8.8.0....0...1.1.64.psy-ab..0.8.546...0i131k1._To1c908Z2U
Большая часть в нём — мусор:
newwindow=1&site=&source=hp&oq=who+am+i&gs_l=psy-ab.3..0l4.563.2744.0.2962.8.8.0.0.0.0.73.547.8.8.0....0...1.1.64.psy-ab..0.8.546...0i131k1._To1c908Z2U
Лучше убрать служебные параметры, бесполезные для человека, и оставить только то, что по делу:
https://www.google.com/search?q=who+am+i
Урл содержит кириллицу
Добавил этот пункт ради Медиума, который делает такие ссылки, если вовремя не словить его за хвост:
https://medium.com/russian/%D0%BE-%D1%86%D0%B5%D0%BB%D1%8F%D1%85-%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B0-%D0%B8-%D0%B4%D1%80%D1%83%D0%B3%D0%B8%D1%85-%D1%80%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D1%85-%D0%B2%D0%BE%D0%BF%D1%80%D0%BE%D1%81%D0%B0%D1%85-c6c1aa6c32
Задумка хорошая: включить заголовок статьи в урл и повысить информативность. А получился мусор. Решить проблему несложно — автоматически транслитерировать кириллицу, которая идёт в адрес:
https://medium.com/russian/o-celyah-proekta-i-drugih-ritoricheskih-voprosah-c6c1aa6c32
Урл спрятан за сокращателем ссылок
Сокращатели превращают нормальные ссылки:
https://explainshell.com/?utm_source=twitter.com&utm_medium=social
https://sqlime.org/about.html
https://antonz.ru/choice/
в такие:
https://amp.gs/mgYs
https://goo.gl/QspV62
https://t.co/JCZGu9SelO
Тут плохо всё. Потерялись не только параметры, но и сам сайт. Теперь я совсем не понимаю, куда заведёт ссылка.
Конечно, я знаю, зачем нужны сокращатели. Маркетологи прячут за ними utm-метки — параметры, которые говорят владельцу сайта, откуда пришёл посетитель. Я даже понимаю, почему нужны эти метки — соцсети не сообщают источник перехода (это большое зло и тема для отдельной статьи).
Но для меня как для пользователя сети — сокращатели чистейшее зло.
Хорошие урлы
Перейдём к хорошему.
Урл однозначно идентифицирует конкретный объект
Для магазина значимые объекты — товары, для журнала — статьи и комментарии, для системы контроля версий — каждая строка кода:
https://market.yandex.ru/product/8478688
https://habrahabr.ru/company/hflabs/blog/267997/#comment_8598021
https://github.com/nalgeon/redka/blob/main/redka.go#L94
Хороший урл ведёт прямо на идентифицируемый объект, без промежуточных страниц и попапов.
Урл информативный
По хорошему урлу примерно понятно, о чём он. Например, клиенты с единственным заказом за последний год:
/customers?order-count=1&order-date=last-year
Урл может быть уникальным и при этом информативным:
https://wpdev.uservoice.com/forums/257854-universal-windows-platform/suggestions/6509607-stop-internet-explorer-development
https://www.citilink.ru/catalog/mobile/cell_phones/393683/
Ссылка должна оставаться рабочей, даже если объект переместят в другую категорию или раздел сайта. Пока в урле есть идентификатор, этого достаточно.
Более того, «текстовую» часть можно убрать, а адрес продолжит работать:
https://wpdev.uservoice.com/forums/257854/suggestions/6509607
https://www.citilink.ru/catalog/393683/
Такой подход хорошо показал себя на форумах, в блогах и каталогах.
Урл читается как обычное предложение
Это высший пилотаж:
http://yasobe.ru/na/obed
Так редко получается, но если видите возможность — не упустите.
Красота и иерархичность
Важно, чтобы адрес оставался иерархичным: каждый кусочек от слэша до слэша не просто «создаёт красоту», а имеет самостоятельный смысл:
/na/obed
— конкретный сбор;/na/
— список всех сборов (а Яндекс отдаёт 404, ататат);/
— главная страница.
Каждый слэш создаёт уровень иерархии. Если убирать уровни один за одним справа налево, ссылка каждый раз должна отдавать что-то логичное, пока не дойдём до главной страницы.
Не пренебрегайте иерархией ради красоты. Но если получается сделать иерархичный адрес красивым — отлично.
Урл живёт вечно
Сайты меняются, сливаются в один и разбиваются на несколько. Урлы страниц при этом изменяются, и это нормально. Главное — оставлять со старых адресов редирект на новые:
weather.yandex.ru
→ yandex.ru/pogoda
mann-ivanov-ferber.ru/books/biznes-kak-igra
→ mann-ivanov-ferber.ru/catalog/product/biznes-kak-igra
Единожды опубликованный урл должен жить вечно. Даже если страница по ссылке удалена, на её месте оставляют заглушку с пояснением:
⌘ ⌘ ⌘
Делать хорошие урлы нелегко, а оценит их мало кто. Но если у вас получится — знайте, я вами горжусь ツ
★ Подписывайтесь на новые заметки.