webdonsk.ruКак сделать красивый url
Добавил пользователь Алексей Ф. Обновлено: 31.08.2024
URL – это адрес вашего сайта. URL-адреса часто являются первым, что видит поисковик Google и посетители. Создание дружественных (понятных) адресов URL – простой вариант улучшения SEO. Если вы уделите внимание этому моменту, то сможете улучшить видимость сайта в поисковике.
Кроме того, дружественные адреса лучше воспринимаются посетителями сайта, которые ищут тематический контент. Чересчур длинные ссылки, изобилующие предлогами, параметрами и лишними категориями, смотрятся хуже, чем короткие адреса, полностью передающие суть контента ресурса. Поэтому создание понятных URL приобретает стратегически важное значение.
В этом обзоре мы:
приведем ряд общих рекомендаций для создания дружественных URL-адресов;
расскажем, как улучшить URL для сайтов на платформах Joomla и WordPress;
дадим простые и эффективные советы для оптимизации структуры URL.
Что такое дружественные URL-адреса?
Дружественные URL-адреса – это ссылки, хорошо воспринимаемые не только посетителями, но и поисковыми системами. Грамотно составленные адреса играют первостепенную роль для качественной работы SEO. Создавая URL-адреса, пользуйтесь следующими рекомендациями:
легкая читаемость и максимальное соответствие тематике страницы/сайта;
отсутствие сложно запоминаемых длинных названий;
последовательный подход в создании структуры URL-адресов.
В Google придерживаются мнения, что структура URL-адреса сайта должна быть как можно более простой. Поэтому применение принципа KISS – это не примитивизм, а мудрое решение. Создавайте URL-адреса логически понятными и легко читаемыми.
Приведем примеры хороших и плохих URL-адресов:
Когда потенциальные посетители посмотрят на адрес, у них не должно быть сомнений в том, какого рода контент им будет предложен. Если ваш адрес будет простым и максимально читаемым, посетители с большим интересом захотят перейти по ссылке, представленной в поисковых результатах Google.
Кроме того, в URL желательно включить 1-2 важных ключевых запроса. Это способствует лучшему ранжированию. Однако не переусердствуйте. Если вы заполняете URL только ключевыми запросами, это ухудшает читаемость и свидетельствует о плохой оптимизации. Поэтому вам нужно избегать этого. От увеличения количества поисковых фраз в URL нет никакой пользы, а иногда это даже приносит вред.
Как подобрать верные ключи? В этом видео есть отличные объяснения по этому поводу:
Следует избегать стоп-слов (слов, которые не несут смысловой нагрузки) в URL. Их использование бессмысленно, они только увеличивают длину адреса. Следовательно, восприятие URL, перегруженного предлогами и союзами, будет только хуже.
Поисковые системы и посетители отдают предпочтение коротким URL-адресам, потому максимально сокращайте их. Старайтесь использовать минимум каталогов, в идеале – только один. Однако короткие URL – это не главная цель. Ваша основная задача состоит в создании логических и хорошо читаемых URL-адресов.
Как изменить URL-адреса для сайта на Joomla?
У нас есть два предупреждения перед тем, как вы начнете:
Желательно установить эти параметры непосредственно перед запуском вашего ресурса. Если вы поменяете их позднее, это может привести к разрушению ранее работавших ссылок и, как следствие, недовольству посетителей.
Вы должны будете войти в вашу файловую систему Joomla. Искомый файл носит название htaccess.txt.
Вы должны найти его. Файл располагается в главном каталоге Joomla-ресурса, рядом с файлами configuration.php, readme.txt, index.php и так далее. Вам понадобится удалить расширение файла – .txt. Вы должны будете поставить точку в самом начале файла. Таким образом, имя файла поменяется с htaccess.txt на .htaccess. Этого достаточно для нормальной работы файла.
Честно говоря, мы не считаем этот суффикс полезным. При включении этого параметра к концу URL-адреса будет добавлен суффикс .html. Таким образом, адрес становится более сложным. При этом сайты уже давно не создаются на чистом HTML. Сомневаемся в полезности этого пункта.
Итак, мы разобрались с тем, как сделать понятными URL-адреса для Joomla-ресурса. Если вы поменяете имя файла htaccess.txt на .htaccess и произведете настройки параметров, как было рассказано выше, получите красивые и простые URL-адреса для своего сайта, работающего на движке Joomla. Далее мы рассмотрим, как сделать дружественными URL ресурса, созданного на базе CRM (системы управления сайтом) WordPress.
Создание понятных URL-адресов на WordPress
Какой адрес привлекает больше? Естественно, первый. Здесь сразу ясно, о чем будет рассказываться на сайте. Ваша URL-ссылка должна сообщать Google и потенциальным посетителям, просматривающим поисковые результаты, о сути содержимого ресурса.
В первом случае адрес содержит необходимые ключевые слова, поэтому Google легко интерпретирует контент. Людям тоже будет проще разобраться, ведь сразу ясно, что сайт посвящен фестивалю, проходящему в 2018 году. В итоге мы получаем беспроигрышный вариант.
1. Обычная – не рекомендуется, поскольку такой URL-адрес не описывает контент.
2. День и название – рекомендуется, поскольку помогает поисковику понять тематику контента и узнать точную дату его публикации (это нужно посетителям).
3. Месяц и название – рекомендуется, как и в прошлом случае, только здесь вместо дня отображается месяц публикации контента.
4. Числовой – не рекомендуется, поскольку такой URL-адрес не описывает контент.
6. Настраиваемая структура – здесь для настройки адреса предлагается использовать специальные теги. Если ваш сайт состоит из нескольких важных разделов, используйте тег типа /% category% /% postname% / для добавления категории к вашему URL. Этот способ дает поисковой системе больше информации о контенте. Здесь все зависит от вашей грамотности.
Также советуем ознакомиться с рекомендациями, касающимися изменения URL-адресов в WordPress:
Укорачивайте URL-адреса. Длинные URL часто ранжируются хуже коротких. Вы можете уменьшить длину адреса, воспользовавшись предыдущим советом. Важно пользоваться релевантными ключевыми фразами и убирать лишние слова.
Пользуясь этими рекомендациями, вы сможете сделать человеко-понятными URL-адреса для своего сайта на платформе WordPress.
Как оптимизировать структуру URL: основные рекомендации
Создание привлекательного сайта, наполненного качественным тематическим контентом, – это только полдела. Поисковым системам важно не только то, как красиво смотрится ваш ресурс. Для них огромное значение имеет и соответствие его структуры потребностям поискового движка.
Тематические поисковые фразы
Каждому владельцу сайта хочется, чтобы его детище было доступно целевой аудитории (и поисковым системам), потому необходимо добавить соответствующие ключевые слова. В URL-адрес необходимо включить слово (словосочетание), которое лучше всего передает тематику вашего сайта.
Сейчас у нас есть страница с множеством ссылок, и она выглядит плоховато:
- ссылки не подчёркнуты, непонятно, что это ссылки;
- когда наводишь мышку, ссылка подчёркивается, но очень толсто;
- ссылки, по которым мы уже щёлкали, не выделяются другим цветом — так не ясно, что мы уже читали, а что нет.
Как будет
Давайте исправим каждый пункт, чтобы получилось как на скриншоте ниже: тонкие красивые подчёркивания, красный цвет при наведении, а ещё должно быть видно посещённые ссылки:
Всё дело в CSS
Чтобы сделать красиво, нам понадобится CSS — специальная разметка, которая отвечает за внешний вид и поведение элементов на странице.
В нашем примере CSS-код встроен в саму страницу, поэтому новые инструкции по оформлению добавлять будем тоже там. Это не очень правильно с точки зрения классической разработки — правильнее держать CSS в отдельном файле. Но для текущей задачи это неважно.
Между фигурными скобками мы напишем код, который превратит наши ссылки в ссылки со стильным тонким подчёркиванием. Для этого нам понадобится:
- убрать стандартное подчёркивание;
- прописать цвет ссылки, чтобы в каждом браузере они выглядели одинаково;
- сделать тонкую линию под ссылкой.
Сделаем всё по очереди.
Убираем стандартное подчёркивание
Эта команда говорит браузеру не использовать стандартные и встроенные украшательства для этого текста. Раз мы прописываем это в разделе про ссылки, то и относиться эта команда будет тоже только к ссылкам.
Задаём цвет ссылки
Это стандартный цвет ссылок в браузере Chrome, возьмём его за основу.
Делаем тонкую линию внизу
Первая строчка говорит браузеру, чтобы он нарисовал под ссылкой (border-bottom) сплошную линию (solid) толщиной в один пиксель (1px).
А вторая — чтобы эта линия была определённого цвета. RGBA означает, что нам нужно смешать красный, зелёный и синий цвета (RGB) и задать им какую-то прозрачность (A). Сделаем всё тем же цветом, что и ссылки, а прозрачность поставим 0.2 — так линия будет выглядеть тоньше, чем один пиксель.
Собираем всё вместе
Меняем цвет ссылки при наведении
За реакцию на наведение мышки отвечает hover, поэтому нам в CSS-раздел нужно добавить такое:
Это значит, что когда мы подведём курсор к ссылке, то сработает тот набор инструкций, который будет прописан в этом разделе.
Нам нужно, чтобы ссылка поменяла цвет на оранжевый и при этом осталась тонкая линия подчёркивания. Для этого повторим все шаги из предыдущего раздела, кроме border-bottom: 1px solid; — это свойство достанется в наследство сразу всем ссылкам, а вот всё остальное нужно прописать заново.
Убираем стандартное подчёркивание:
Чтобы текст ссылки стал оранжевого цвета, используем команду:
Делаем у линии тот же цвет, что и у активной ссылки:
border-bottom-color: rgba(28,0,0,0.2);
В итоге получим:
Помечаем использованные ссылки
Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!
Что такое ЧПУ?
ЧПУ – это исковерканная англоязычная аббревиатура SEF URL (search engines friendly url). Она обозначает адреса ссылок, которые дружелюбны для поисковых систем. О ЧПУ я также писал в статье про внутреннюю оптимизацию сайта. В русскоязычном варианте SEF URL пишется как ЧПУ – человеко-понятные url. Что всё это значит? Это значит, что адреса ваших ссылок будут иметь осознанный текст, а не технический мусор, за примером можете сходить по ссылке выше.
Какие преимущества дают SEF URL?
Во-первых, очевидно, что ЧПУ ссылки уже в самом своём адресе могут содержать полезную для пользователя информацию. Из такого адреса сразу понятно, о чём будет статья или страница в целом.
Во-вторых, SEO. Такие ссылки приветствуются поисковыми системам, пару лет назад они могли бы дать вам значительный перевес над конкурентами. Сегодня подобные ссылки являются само собой разумеющимися, сейчас редко встретишь сайты с не ЧПУ ссылками, однако они до сих пор есть.
В-четвёртых, безопасность. Сайты с ЧПУ ссылками не содержат в своём адресе техническую информацию переданную методом GET (уроки PHP), которую можно запросто использовать для взлома сайта.
И последнее: ЧПУ – как средство навигации. Если ссылка понятна пользователю, то он сам может переходить по разделам сайта, просто редактируя ваш URL. Например:
Если удалить из данной ссылки её последнюю часть (2-sublime-text-2), то мы попадём в раздел, к которому относится данная статья:
Недостатки ЧПУ ссылок
Первое: возможно, вам придётся повозиться и даже помучаться, чтобы их настроить или вовсе сделать с нуля.
Когда ЧПУ не нужны?
ЧПУ ссылки могут быть и лишними, например, если у вас закрытый корпоративный портал, где вся работа осуществляется только авторизованными пользователями, а для всех остальных, в том числе и для поисковых роботов доступ закрыт.
Также ЧПУ будет излишеством в back-end вашего сайта, то есть в панели администратора.
Что ещё нужно знать о ЧПУ?
Во всех актуальных версиях CMS данная проблема уже решена. Всё что вам нужно, чтобы сделать ЧПУ ссылки, это лишь включить соответствующие настройки в движке вашего сайта.
Но что если мы имеем дело с сайтом на чистом PHP, без CMS, или же хотим разработать свою собственную CMS в которой хотим сделать SEF URL? Для подобных случаев, а также для людей, которые хотят углубиться и понять всю суть преобразований обычной ссылки в ЧПУ, я и написал остальную часть статьи. Если вы читали мои предыдущие статьи, то знаете, что мой блог как раз относится к этой категории, то есть сайтам, написанным с нуля на PHP, без использования готовых CMS.
Ах да, ещё один момент: из личного опыта не советую делать кириллических URL.
Коротко: в чём вся суть?
Пишу для тех, кто совсем не в курсе дел. Везде в наших тегах гиперссылки мы будем указывать ЧПУ адреса:
Суть в том, чтобы из красивого и понятного человеку URL (ЧПУ) сделать на лету URL, который будет полезен разработчику PHP (не ЧПУ):
При этом всем на свете (посетителям, поисковым системам, всем) будет видна именно ЧПУ ссылка, но мы как разработчики PHP будем знать, что таит в себе URL на самом деле. В конце статьи, для полного понимания, я покажу все этапы, как ЧПУ работают у меня на блоге.
Создание SEF ссылок с помощью mod_rewrite
Все наши правила преобразований URL записываются в небезызвестный файл .htaccess, который должен лежать в корне нашего сайта.
Для корректной работы mod_rewrite в нём обязательно должна быть написана следующая строка:
Далее подключаем наш модуль rewrite к конкретной папке, то есть к папке, в которой лежит наш .htaccess:
Имеем следующий файл .htaccess:
Правила и условия mod_rewrite
Все правила записываются с помощью команды RewriteRule, после которой ставится пробел и записывается шаблон ваших ЧПУ с помощью регулярных выражений, далее ставится ещё один пробел и указывается строка, в которую мы хотим преобразовать данный шаблон, где $1,$2,…$n – наши переменные. Более подробно о регулярных выражениях вы можете узнать по приведённой выше ссылке, а также далее в данной статье. Давайте рассмотрим пример:
Где ^useful/([a-z]*) – это шаблон ожидаемого url,
а /index.php?category=useful&article=$1 – это то, во что мы его конвертируем, если пришедший URL подошёл под шаблон.
При этом $1 равен тому, что написано в круглых скобках, то есть $1 = [a-z]* Если бы круглые скобки встречались 2 раза, то у нас были бы переменная $1 и $2, если круглые скобки встречаются 3 раза, то переменные $1, $2, $3 и так далее. При этом переменные создаются в том же порядке, как идут круглые скобочки.
Понятно? – молодцы. Непонятно? - идёмте дальше, мы ещё к этому вернёмся. Также хочу обратить ваше внимание на то, что для лучшего понимания статьи, вы уже должны обладать начальными знаниями о PHP, а также о работе с методами GET и POST. Продолжаем.
Для того чтобы наш обработчик, то есть mod_rewrite не срабатывал каждый раз без надобности, мы в RewriteRule указываем шаблон, которому должны соответствовать приходящие URL. Если URL не соответствует шаблону, то mod_rewrite просто не сработает и не преобразует пришедший SEF URL в URL, с которым мы можем работать.
То есть на данном этапе вам важно понять саму суть: в ЧПУ ссылках не передаются параметры, а без параметров мы не можем ничего сделать в PHP с этой ссылкой, поэтому с помощью mod_rewrite мы преобразуем ЧПУ ссылку без параметров в не ЧПУ ссылку с параметрами. Что такое параметры? В примере выше имеем 2 параметра:
Параметр category и параметр article.
Опять-таки обращаю ваше внимание, что про параметры вы уже должны были знать, я лишь вкратце вам напомнил.
В шаблонах мы можем использовать символы и символьные классы. Символ точки обозначает абсолютно любой символ.
- . – любой одиночный символ
- [redf] – это класс символов. Обозначает наличие одного из перечисленных символов с учётом регистра.
- [a-z] – класс символов. Обозначает наличие одного из символов в промежутки от a до z, то есть весь английский алфавит.
- [a-zA-Z] – то же самое, только без учёта регистра, то есть весь алфавит, включая и большие и маленькие буквы.
- Можно и с цифрами: 7
- Естественно, всё можно комбинировать: [a-zA-Z0-9]
- [^rewfad] – класс символов, но со знаком ^ внутри квадратных скобочек обозначает, что шаблон НЕ должен содержать данных символов.
- site|cite – обозначает альтернативу: подходит site или cite.
Квантификаторы или кванторы
Все предыдущие примеры обозначали один символ (одну единицу), а что если мы хотим показать, что символов из этого промежутка [a-zA-Z] может быть не один, а сколько угодно. Для этого мы должны использовать квантификаторы:
- ? — 0 или 1 символ из предшествующего текста (класса символов, символа и тд.)
- * — 0 или любое количество символов из предшествующего текста (n>0)
- + — 1 или любое количество символов из предшествующего текста (n>1)
- — ровно n символов, где n – конкретное число.
- — должно быть ровно 4 символа из предшествующего текста.
- — 4 или 5 символов
- — от нуля до 6 символов
- — от 4 до бесконечности символов
Примером может послужить наша уже известная строчка:
В которой мы применили квантификатор (квантор) звёздочку (*) после класса символов [a-z]. Это значит, что в нашем URL после useful/ могут находиться символы от a до z в любом количестве и, естественно, в любой последовательности, а могут и не быть вовсе. Домен в счёт не берём, он подразумевается сам по себе.
Экранирование
Также при составлении шаблона не стоит забывать и про экранирование. Если вы хотите заключить в класс символов, например, символ точки, то вам нужно её заэкранировать, так как без экранирования точка (служебный символ) обозначает абсолютно любой символ:
Тоже самое касается и квадратных скобочек, они у нас обозначают класс символов, поэтому если в вашем url могут быть квадратные скобочки их нужно заэкранировать:
Ограничение начала и конца строки (маркеры)
Для того чтобы указать начало или конец строки, без учёта домена, используются символы:
То есть в нашем первом примере мы указали, что наш шаблон начинается именно с начала URL, а не откуда угодно (с середины, с конца):
Обращаю ваше внимание на то, что знак ^ внутри квадратных скобок обозначает отрицание, не путайте!
Обратные связи в mod_rewrite
%n – то же самое, только в RewriteCond. RewriteCond мы ещё не рассматривали, он у нас впереди.
Итак, если RewriteRule – это наши правила преобразования URL, то RewriteCond – это условие, аналог if в PHP. RewriteCond нужно в ситуациях, когда вам необходимо выполнить URL преобразование (RewriteRule) только при выполнении какого-то условия.
У сервера есть свои собственные переменные, которые мы можем использовать в наших условиях RewriteCond:
Синтаксис применения серверных переменных таков:
Давайте составим наше первое условие:
Если посетитель зашёл с браузера Mozilla Firefox, то выполняем следующее правило. Как видите, в отличие от PHP мы не используем фигурные скобки для обрамления нашего правила, которое выполнится, если условие TRUE.
RewriteCond позволяет использовать операторы сравнения: (больше), = (равно). Также есть специальные значения, например:
- -d (является ли каталогом)
- -f (является ли файлом)
- -s (является ли файлом с ненулевым размером)
- ! – отрицание.
Флаги
- nocase|NC – можно писать либо nocase, либо NC, это одно и то же, обозначает регистро-независмость. То есть мы можем больше не писать:
Вместо этого написать так:
Если нужно поставить одновременно несколько флагов, ставим их через запятую, например:
Как вы уже могли догадаться, mod_rewrite можно использовать не только для ЧПУ, но и для многих других интересный целей, например, клоакинга – это метод чёрного SEO, когда по одному и тому же адресу посетителям отдаётся одна страница, а поисковым роботам совершенно другая. Ну и под конец статьи, я покажу вам живой пример использования всего написанного выше и как же это всё работает взаимодействуя с нашим PHP.
Живой пример использования mod_rewrite
Итак, вот какой вид имеет мой файл .htaccess:
На этом работа .htaccess завершена и на сцену выходит PHP. Следующий код размещён в index.php:
О том, как работает конструкция switch, я подробно писал в статье по указанной ссылке. Вот и всё, дамы и господа! Наконец-то наша статья подошла к логическому завершению, и теперь вы сможете попрактиковать полученные знания. Я прощаюсь с вами до выхода новой статьи, а напоследок хочу привести интересную цитату:
21 способ красиво оформить ссылки:
Как и в предыдущем уроке мы рассмотрим на примере одного вида эффекта. В структуре ссылок ничего нового:
Но у некоторых ссылок присутствует атрибут data-hover:
Он используется для дублирования текста самой ссылки.
А для создания эффекта перспективы используется дополнительный элемент :
Вот так выглядит CSS стиль для ссылок, которые используют 15-й эффект (при котором ссылка немного уменьшается в размере и изменяет свой цвет):
Вывод
К сожалению IE10 не поддерживают CSS свойство transform-style: preserve-3d . Надеюсь эта коллекция ссылок поможет в создании необычных эффектов на своём сайте! Забирайте их себе и смело применяйте ? .
Читайте также: