Как создать свой сайт бесплатно самому от А до Я

Как создать свой сайт бесплатно самому от А до Я

Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!

06.05.2013

Раздел: Оптимизация и продвижение

Здравствуйте дорогие гости и постоянные читатели блога о создании сайтов – Site on! В одной из предыдущих статей этого раздела я обещал вам рассказать, как всего за пару минут можно создать собственные ЧПУ ссылки. Несмотря на то, что статья может показаться вам объёмной, а для некоторых и сложной – я надеюсь, когда дочитаете её до конца, вы согласитесь, что в создании ЧПУ действительно нет ничего сверхъестественного.

Что такое ЧПУ?

Что такое ЧПУ

ЧПУ – это исковерканная англоязычная аббревиатура SEF URL (search engines friendly url). Она обозначает адреса ссылок, которые дружелюбны для поисковых систем. О ЧПУ я также писал в статье про внутреннюю оптимизацию сайта. В русскоязычном варианте SEF URL пишется как ЧПУ – человеко-понятные url. Что всё это значит? Это значит, что адреса ваших ссылок будут иметь осознанный текст, а не технический мусор, за примером можете сходить по ссылке выше.

Какие преимущества дают SEF URL?

Во-первых, очевидно, что ЧПУ ссылки уже в самом своём адресе могут содержать полезную для пользователя информацию. Из такого адреса сразу понятно, о чём будет статья или страница в целом.

Во-вторых, SEO. Такие ссылки приветствуются поисковыми системам, пару лет назад они могли бы дать вам значительный перевес над конкурентами. Сегодня подобные ссылки являются само собой разумеющимися, сейчас редко встретишь сайты с не ЧПУ ссылками, однако они до сих пор есть.

В-третьих, это престиж. Когда я захожу на сайты, где вместо понятного и красивого адреса в ссылках содержится разного рода мусор, а то и засекреченная информация – я задаюсь вопросом: «Вроде бы приличный сайт, но почему разработчики не сделали ЧПУ? Неужели это было так сложно? Может им настолько нет дела до подобных вещей или просто не хватает знаний и навыков?». В общем, для меня такие сайты большая загадка.

В-четвёртых, безопасность. Сайты с ЧПУ ссылками не содержат в своём адресе техническую информацию переданную методом GET (уроки PHP), которую можно запросто использовать для взлома сайта.

И последнее: ЧПУ – как средство навигации. Если ссылка понятна пользователю, то он сам может переходить по разделам сайта, просто редактируя ваш URL. Например:

http://site-on.net/useful/2-sublime-text-2

Если удалить из данной ссылки её последнюю часть (2-sublime-text-2), то мы попадём в раздел, к которому относится данная статья:

http://site-on.net/useful/

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

Недостатки ЧПУ ссылок

Первое: возможно, вам придётся повозиться и даже помучаться, чтобы их настроить или вовсе сделать с нуля.

Второе: ваш сайт станет дольше грузится, а именно, на пару десятитысячных секунды :) Это связано с тем, что для работы ЧПУ подключается специальный модуль веб-сервера Apache – mod_rewrite, которому понадобится это «огромное» количество времени на обработку ссылок.

Когда ЧПУ не нужны?

ЧПУ ссылки могут быть и лишними, например, если у вас закрытый корпоративный портал, где вся работа осуществляется только авторизованными пользователями, а для всех остальных, в том числе и для поисковых роботов доступ закрыт.

Также ЧПУ будет излишеством в back-end вашего сайта, то есть в панели администратора.

Что ещё нужно знать о ЧПУ?

Во всех актуальных версиях CMS данная проблема уже решена. Всё что вам нужно, чтобы сделать ЧПУ ссылки, это лишь включить соответствующие настройки в движке вашего сайта.

SEF URL

Но что если мы имеем дело с сайтом на чистом PHP, без CMS, или же хотим разработать свою собственную CMS в которой хотим сделать SEF URL? Для подобных случаев, а также для людей, которые хотят углубиться и понять всю суть преобразований обычной ссылки в ЧПУ, я и написал остальную часть статьи. Если вы читали мои предыдущие статьи, то знаете, что мой блог как раз относится к этой категории, то есть сайтам, написанным с нуля на PHP, без использования готовых CMS.

Ах да, ещё один момент: из личного опыта не советую делать кириллических URL.

Коротко: в чём вся суть?

Пишу для тех, кто совсем не в курсе дел. Везде в наших тегах гиперссылки мы будем указывать ЧПУ адреса:

<a href="http://site-on.net/useful/2-sublime-text-2">Sublime Text 2</a>

Суть в том, чтобы из красивого и понятного человеку URL (ЧПУ) сделать на лету URL, который будет полезен разработчику PHP (не ЧПУ):

<a href="http://site-on.net/index.php?category=useful&article=2-sublime-text-2">Sublime Text 2</a>

При этом всем на свете (посетителям, поисковым системам, всем) будет видна именно ЧПУ ссылка, но мы как разработчики PHP будем знать, что таит в себе URL на самом деле. В конце статьи, для полного понимания, я покажу все этапы, как ЧПУ работают у меня на блоге.

Создание SEF ссылок с помощью mod_rewrite

mod_rewrite – это модуль веб-сервера Apache, предназначенный для перезаписи URL. Естественно, для начала работы вы должны включить этот модуль в настройках Apache, эти настройки находятся в файле httpd.conf, вам нужно будет раскомментировать строку с именем данного модуля. У 99% хостинг-провайдеров он включён, за исключением совсем ужасных хостингов. Кстати говоря, используя Denwer, у меня не получилось нормально настроить собственные ЧПУ, мне не захотелось долго искать в чём именно проблема (мешают собственные редиректы Денвера) и я установил Апач отдельно. Для тех, кто не знает, как установить сервер Апач не используя Денвер, я напишу инструкцию в одной из будущих статей. А здесь мы продолжаем разбирать наши ЧПУ.

Все наши правила преобразований URL записываются в небезызвестный файл .htaccess, который должен лежать в корне нашего сайта.

Для корректной работы mod_rewrite в нём обязательно должна быть написана следующая строка:

Options +FollowSymLinks

Или, в частности, для моего хостинга:

Options +SymLinksIfOwnerMatch

Далее подключаем наш модуль rewrite к конкретной папке, то есть к папке, в которой лежит наш .htaccess:

RewriteEngine On

Имеем следующий файл .htaccess:

Options +SymLinksIfOwnerMatch RewriteEngine On

Правила и условия mod_rewrite

Все правила записываются с помощью команды RewriteRule, после которой ставится пробел и записывается шаблон ваших ЧПУ с помощью регулярных выражений, далее ставится ещё один пробел и указывается строка, в которую мы хотим преобразовать данный шаблон, где ,,…$n – наши переменные. Более подробно о регулярных выражениях вы можете узнать по приведённой выше ссылке, а также далее в данной статье. Давайте рассмотрим пример:

RewriteRule ^useful/([a-z]) /index.php?category=useful&article=

Где ^useful/([a-z]) – это шаблон ожидаемого url,

а /index.php?category=useful&article= – это то, во что мы его конвертируем, если пришедший URL подошёл под шаблон.

При этом равен тому, что написано в круглых скобках, то есть = [a-z] Если бы круглые скобки встречались 2 раза, то у нас были бы переменная и , если круглые скобки встречаются 3 раза, то переменные , , и так далее. При этом переменные создаются в том же порядке, как идут круглые скобочки.

Понятно? – молодцы. Непонятно? - идёмте дальше, мы ещё к этому вернёмся. Также хочу обратить ваше внимание на то, что для лучшего понимания статьи, вы уже должны обладать начальными знаниями о PHP, а также о работе с методами GET и POST. Продолжаем.

Для того чтобы наш обработчик, то есть mod_rewrite не срабатывал каждый раз без надобности, мы в RewriteRule указываем шаблон, которому должны соответствовать приходящие URL. Если URL не соответствует шаблону, то mod_rewrite просто не сработает и не преобразует пришедший SEF URL в URL, с которым мы можем работать.

То есть на данном этапе вам важно понять саму суть: в ЧПУ ссылках не передаются параметры, а без параметров мы не можем ничего сделать в PHP с этой ссылкой, поэтому с помощью mod_rewrite мы преобразуем ЧПУ ссылку без параметров в не ЧПУ ссылку с параметрами. Что такое параметры? В примере выше имеем 2 параметра:

/index.php?category=useful&article=

Параметр category и параметр article.

Опять-таки обращаю ваше внимание, что про параметры вы уже должны были знать, я лишь вкратце вам напомнил.

В шаблонах мы можем использовать символы и символьные классы. Символ точки обозначает абсолютно любой символ.

  • . – любой одиночный символ
  • [redf] – это класс символов. Обозначает наличие одного из перечисленных символов с учётом регистра.
  • [a-z] – класс символов. Обозначает наличие одного из символов в промежутки от a до z, то есть весь английский алфавит.
  • [a-zA-Z] – то же самое, только без учёта регистра, то есть весь алфавит, включая и большие и маленькие буквы.
  • Можно и с цифрами: [0-9]
  • Естественно, всё можно комбинировать: [a-zA-Z0-9]
  • [^rewfad] – класс символов, но со знаком ^ внутри квадратных скобочек обозначает, что шаблон НЕ должен содержать данных символов.
  • site|cite – обозначает альтернативу: подходит site или cite.

Квантификаторы или кванторы

Все предыдущие примеры обозначали один символ (одну единицу), а что если мы хотим показать, что символов из этого промежутка [a-zA-Z] может быть не один, а сколько угодно. Для этого мы должны использовать квантификаторы:

  • ? — 0 или 1 символ из предшествующего текста (класса символов, символа и тд.)
  • — 0 или любое количество символов из предшествующего текста (n>0)
  • + — 1 или любое количество символов из предшествующего текста (n>1)
  • {n} — ровно n символов, где n – конкретное число.

Например:

  • {4} — должно быть ровно 4 символа из предшествующего текста.
  • {4,5} — 4 или 5 символов
  • {,6} — от нуля до 6 символов
  • {4,} — от 4 до бесконечности символов

Примером может послужить наша уже известная строчка:

RewriteRule ^useful/([a-z])

В которой мы применили квантификатор (квантор) звёздочку () после класса символов [a-z]. Это значит, что в нашем URL после useful/ могут находиться символы от a до z в любом количестве и, естественно, в любой последовательности, а могут и не быть вовсе. Домен в счёт не берём, он подразумевается сам по себе.

Экранирование

Также при составлении шаблона не стоит забывать и про экранирование. Если вы хотите заключить в класс символов, например, символ точки, то вам нужно её заэкранировать, так как без экранирования точка (служебный символ) обозначает абсолютно любой символ:

[a-zA-Z0-9\.]

Тоже самое касается и квадратных скобочек, они у нас обозначают класс символов, поэтому если в вашем url могут быть квадратные скобочки их нужно заэкранировать:

[a-zA-Z0-9\.\[\]]

Ограничение начала и конца строки (маркеры)

Для того чтобы указать начало или конец строки, без учёта домена, используются символы:

  • ^ - начало URL
  • $ - конец URL

То есть в нашем первом примере мы указали, что наш шаблон начинается именно с начала URL, а не откуда угодно (с середины, с конца):

RewriteRule ^useful/([a-z])

Обращаю ваше внимание на то, что знак ^ внутри квадратных скобок обозначает отрицание, не путайте!

Обратные связи в mod_rewrite

$n – это наша «переменная» в круглых скобках, о них мы уже говорили. Работает для RewriteRule.

%n – то же самое, только в RewriteCond. RewriteCond мы ещё не рассматривали, он у нас впереди.

Итак, если RewriteRule – это наши правила преобразования URL, то RewriteCond – это условие, аналог if в PHP. RewriteCond нужно в ситуациях, когда вам необходимо выполнить URL преобразование (RewriteRule) только при выполнении какого-то условия.

У сервера есть свои собственные переменные, которые мы можем использовать в наших условиях RewriteCond:

HTTP заголовки:
HTTP_USER_AGENT
HTTP_REFERER
HTTP_COOKIE
HTTP_FORWARDED
HTTP_HOST
HTTP_PROXY_CONNECTION
HTTP_ACCEPT REMOTE_ADDR
Соединение и запрос:
REMOTE_HOST
REMOTE_USER
REMOTE_IDENT
REQUEST_METHOD
SCRIPT_FILENAME
PATH_INFO
QUERY_STRING
AUTH_TYPE
Внутри серверные:
DOCUMENT_ROOT
SERVER_ADMIN
SERVER_NAME
SERVER_ADDR
SERVER_PORT
SERVER_PROTOCOL
SERVER_SOFTWARE
Системные:
TIME_YEAR
TIME_MON
TIME_DAY
TIME_HOUR
TIME_MIN
TIME_SEC
TIME_WDAY
TIME
Специальные:
API_VERSION
THE_REQUEST
REQUEST_URI
REQUEST_FILENAME
IS_SUBREQ

Синтаксис применения серверных переменных таков:

%{переменная}

Давайте составим наше первое условие:

RewriteCond %{HTTP_USER_AGENT} ^Mozilla. RewriteRule …

Если посетитель зашёл с браузера Mozilla Firefox, то выполняем следующее правило. Как видите, в отличие от PHP мы не используем фигурные скобки для обрамления нашего правила, которое выполнится, если условие TRUE.

RewriteCond позволяет использовать операторы сравнения: < (меньше), > (больше), = (равно). Также есть специальные значения, например:

  • -d (является ли каталогом)
  • -f (является ли файлом)
  • -s (является ли файлом с ненулевым размером)
  • ! – отрицание.

Флаги

  • nocase|NC – можно писать либо nocase, либо NC, это одно и то же, обозначает регистро-независмость. То есть мы можем больше не писать:
  • RewriteRule ^useful/[a-zA-Z]

    Вместо этого написать так:

    RewriteRule ^useful/[a-z] [NC]
  • ornext|OR – если это, либо следующее условие TRUE, то выполняем RewriteRule. Пример:
  • RewriteCond %{REMOTE_HOST} ^host1. [OR] RewriteCond %{REMOTE_HOST} ^host2. [OR] RewriteCond %{REMOTE_HOST} ^host3. RewriteRule …
  • Last|L – последнее правило. Если правило применилось, то правила, расположенные ниже по коду, не сработают.
  • next|N – некий аналог continue. Если правило применилось, заставляет отыгрывать все правила с самого начала, но при этом с уже преобразованной строкой.
  • redirect|R – редирект. По умолчанию 302. Можно указать другой код редиректа, например:
  • [R=301]
  • forbidden|F – URL становится запрещённым.
  • gone|G – посылает 410 ответ сервера.
  • chain|C -связь. Если правило не сработало, то связанные с ним правила тоже автоматически не сработают.
  • type|T – MIME-тип. Принудительное выставление типа файла. Можно выдавать одно расширение файла за другое :) Например, лежат у нас файлы с расширением .zip, а на самом деле это картинки, так вот чтобы отдавать эти файлы как картинку(.png, .gif и тд.), можно использовать данный флаг.
  • skip|S – пропустить следующее правило, можно указывать сразу несколько, например:
  • [S=2]
  • env|E=VAR:VAL – установить переменную окружения.
  • cookie|CO – послать куки.

Если нужно поставить одновременно несколько флагов, ставим их через запятую, например:

[NC,L]

Как вы уже могли догадаться, mod_rewrite можно использовать не только для ЧПУ, но и для многих других интересный целей, например, клоакинга – это метод чёрного SEO, когда по одному и тому же адресу посетителям отдаётся одна страница, а поисковым роботам совершенно другая. Ну и под конец статьи, я покажу вам живой пример использования всего написанного выше и как же это всё работает взаимодействуя с нашим PHP.

Живой пример использования mod_rewrite

Итак, вот какой вид имеет мой файл .htaccess:

Options +SymLinksIfOwnerMatch RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.(.)$ [NC] RewriteRule ^(.)$ http://%1/ [R=301,L]
RewriteCond %{HTTP_HOST} ^[^www\.].$ [NC] RewriteRule ^/?([a-z0-9\-/]+)/?$ /index.php?article= [L]

Что происходит в этом ужасе? Для начала я проверяю, не набрал ли человек старой закалки мой адрес с www, если набрал, то перенаправляю его на тот же адрес, только без www. Зачем именно это нужно я напишу в одной из следующих статей, если коротко, то для SEO. После перенаправления с www на без www у нас заново считался наш файл .htaccess, поэтому всё начинается снова: проверяем, не пришёл ли нам УРЛ с www, в этот раз - нет. Далее (второй RewriteCond) мы проверяем, если наш УРЛ действительно без www, то делаем преобразования, а именно: заносим весь URL (без имени домена) в параметр article.

На этом работа .htaccess завершена и на сцену выходит PHP. Следующий код размещён в index.php:

if (!empty($_GET["article "])){ // проверяем параметр article на пустоту switch($_GET["article "]){ case 'значение1': $page = 'путь до php файла1 нашей страницы';break; case 'значение2': $page = 'путь до php файла2 нашей страницы';break; case 'значение3': $page = 'путь до php файла3 нашей страницы';break; ... } include $page; // подключаем нужный файл, в зависимости от пришедшего параметра article }

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

Brian Moore

«Несмотря на тонны примеров и документацию, mod_rewrite это Вуду. Чертовски клёвый Вуду, но все-таки Вуду.»

С уважением, Сергей Рудь.

<< Предыдущая статьяСледующая статья >>

Пожалуйста, оцените эту статью
Средняя оценка: 4.09 из 5 (проголосовало: 74)
Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!


Ваш email:

Вы можете помочь развитию проекта, сделав всего 1 клик:
Спасибо!
Как создать свой сайт бесплатно самому от А до Я 73
Создать файл-ссылку на веб-страницу, url файл, создать url файл, сделать
Как создать свой сайт бесплатно самому от А до Я 61
Как создать короткий URL -адрес ссылки для сайта или блога с помощью
Как создать свой сайт бесплатно самому от А до Я 8
Как создать свой сайт бесплатно: пошаговая инструкция от А до Я
Как создать свой сайт бесплатно самому от А до Я 50
Как сделать ссылку на сайте на другой сайт? Тут ответ HTML - при
Как создать свой сайт бесплатно самому от А до Я 3
URL адрес страницы сайта: Что это такое и где его взять? Geek-Nose
Как создать свой сайт бесплатно самому от А до Я 3
Ответы как создать URL? как создать URL картинку? пожалуйста
Как создать свой сайт бесплатно самому от А до Я 31
Ссылки, как сделать ссылку на сайт, виды ссылок
Как создать свой сайт бесплатно самому от А до Я 6
ЧПУ своими руками - как сделать SEF ссылки? Site on!
Как создать свой сайт бесплатно самому от А до Я 22
Как сделать ссылку на странице своего сайта
Как создать свой сайт бесплатно самому от А до Я 31
Создаем правильный URL-адрес страницы для SEO
Как создать свой сайт бесплатно самому от А до Я 73
Как создать свой сайт бесплатно самому от А до Я 18
Как создать свой сайт бесплатно самому от А до Я 30
Как создать свой сайт бесплатно самому от А до Я 31
Как создать свой сайт бесплатно самому от А до Я 98
Как создать свой сайт бесплатно самому от А до Я 36
Как создать свой сайт бесплатно самому от А до Я 91
Как создать свой сайт бесплатно самому от А до Я 93