идеальный htaccess

Попытка номер раз создать почти идеальный htaccess

  • Tutorial
    - Google выше ранжирует сайты, которые загружаются быстрее.
    - Если на eBay или Amazone увеличить время загрузки страниц на 9% они теряют 1% прибыли.
    - Сделать свой сайт быстрее, чтобы сэкономить на клиентском трафике и на числе обращений к серверу.

.htaccess — наш герой

Профессионалы знают, что такое htaccess.
Тем кто собираются уйти с народ.ру на php-хостинг только предстоит узнать, что это такое.
Те кто только что установил свои первые jooml’у или wordpress срочно должны узнать о нашем герое — htaccess

Зачем нам .htaccess ?

Представьте, что вы купили себе хостинг и кажется, почти обрели счастье. Но однажды (а может быть дважды, а может и трижды) ваш сайт перестает отвечать на запросы. Начинает медленно грузиться и вообще вести себя странно. А виртуальный хостинг это такая хитрая штука, что помимо вашего сайта на этом сервере находится ещё два десятка других сайтов. Все они разные по мощности, организованности и трафику. И когда ваш сосед по случайности, а может и умыслу запускает на своем хостинге сложные или избыточные в алгоритмах скрипты, это отзывается и на вас.

Или другой пример. Скажем ваш ресурс начинает набирать популярность, но переезжать на выделенный сервер ещё рано, а мощностей VPS уже не хватает. Вас очень может выручить htaccess.

А ещё htaccess может решить некоторые вопросы с безопасностью вашего сайта.

А ещё…

Хочу идеальный .htaccess !

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

1. Первой строкой задаем основные опции:

Options All -ExecCGI -Indexes -Includes +FollowSymLinks

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

Опция -ExecCGI запрещает запуск CGI скриптов. Лучше разрешить только для конкретных папок. Повысит безопасность.
Опция -Indexes запрещает показывать содержимое каталогов, если в них нет индексного файла. На виртуальном хостинге обычно включена по умолчанию. Изменив минус на плюс +Indexes можете наоборот разрешить просмотр содержимого каталога (или каталогов).
Опция -Includes запрещает SSI. Если не знаете, что это — запрещайте (Можно поЯндексировать(!) по запросу Server Side Include если хотите узнать об этом побольше). Можно использовать опцию IncludesNOEXEC, которая разрешит использовать SSI без запуска скриптов.
Опция +FollowSymLinks позволяет использовать символические ссылки на файлы или каталоги, не находящиеся в пределах корня вашего сайта.

Примечание
Пример

2. Немного SEO (куда же без него)

<IfModule mod_rewrite.c>
	RewriteEngine on
	RewriteBase /
	RewriteCond %{HTTP_HOST} ^black-web
	RewriteRule (.*) http://www.black-web.ru/$1 [R=301,L]
	RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.php\ HTTP/
	RewriteRule ^index\.php$ http://www.black-web.ru/ [R=301,L]
</IfModule>

Обязательно не забыть про условие <IfModule mod_rewrite.c>. Не окажись у хостера данного модуля и ваш сайт станет выдавать 500-ую ошибку. Данный конкретный модуль входить в сборку Апача по-умолчанию. Ну а вдруг… Хостеры и их админы бывают всякие.

В данной части пользы больше для SEO. Модуль rewrite как следует из его названия занимается перенаправлениями (привет Кэпу).

В этой части файла мы указали две склейки: мы склеили ваш_сайт и www.ваш_сайт Даже если пользователь наберет ваш сайт без WWW его перебросить 301 редериктом на www.ваш_сайт.
А также мы избавились /index.php в строке запроса. Если пользователь наберет www.ваш_сайт/index.phpего перебросит (снова 301 редериктом) на www.ваш_сайт.
Теперь поисковики не будут путаться между www и не будут дублировать главную страницу в результатах индексирования вашего сайта. Гуглим СЕО склейки домена, если не понимаете зачем это нужно.

3. Кто в папке главный?

Если у вас папке есть файлы index.html и index.php (не знаю, зачем и кому такое было нужно, но не раз видел такое) то как указать серверу кто их них более индексный?

DirectoryIndex index.php

А ещё можно там указать скажем roosso.php и тогда набрав в строке запроса адрес сайт.бла/бла/бла/ вы увидете не index, а roosso

4. Ещё настройки…

<IfModule mod_setenvif.c>
	SetEnv TZ Europe/Moscow
</IfModule>
ServerSignature Off
AddDefaultCharset UTF-8

Первая строчка устанавливает часовой пояс. Например в Apache 2.22.22 был баг связанный с этой опцией. Функции времени в php не работали, пока не установишь часовой пояс.

Вторая строка это подпись сервера. Вы их не раз видели на всяких системных страницах типа 500ой ошибки или 403ей. Обычно там какая-нибудь техническая информация и почта вебмастера. Я предпочитаю даже в таких мелочах скрывать данные о софте на сервере. Коллеги параноики меня поддержат.

Угадайте, что делает третья строка?

5. Когда нет доступа к php.ini

С помощью .htaccess мы также можем управлять рядом настроек PHP. На виртуальном хостинге, как правило, нет возможности изменять настройки php.ini. Чаще всего этого и не требуется. Но все же есть ряд опций контроль над которыми может нам быть полезен. Например, увеличить лимит на загрузку файлов, или лимит передачи данным методом POST.

<ifModule mod_php.c>
  php_value	upload_max_filesize	32M
  php_value	post_max_size		10M
  php_value	default_charset utf-8
  php_value	max_execution_time 200
</ifModule>

Первая строчка разрешить загружать файлы размером до 32 Мегабайт. По умолчанию в php обычно это значение 8 или 16 мегабайт.
Второй строкой разрешаем постинг объемом до 10 мегабайт. По умолчанию это значение обычно 2 Мегабайта.
Третья строка устанавливает кодировку по используемую вашими скриптами. По своей сути она дублирует строку: «AddDefaultCharset UTF-8». Но я чаще прибегаю к установке кодировки именно через php.
Четвертой строкой изменяем лимит времени выделенный на выполнение скрипта. По умолчанию он обычно равен 30 секундам. Но иногда для выполнения каких нибудь сложных обработок требуется больше времени.

6. Типы файлов. Ловкость рук и ни какого мошенничества.

В моей практике случалось пару раз, что после какого либо обновления провайдером софта, слетали типы файлов. Хотя такое редко. За 10 лет, всего два случая. Но иногда мне нужно было заставить html работать как php. А иногда требуется научить апач различать типы файлов, которые ему неизвестно. (Как оказалось Апачу вообще мало что известно из редких типов файлов.) В такой ситуации нас спасет следующий код:

AddHandler application/x-httpd-php .html
AddHandler cgi-script .pl .py .jsp .asp .htm .shtml .sh .cgi
AddType application/x-javascript .js
AddType text/css .css
AddType text/xml .xml
AddType application/octet-stream .doc .mov .avi .pdf .xls 
# ForceType application/x-httpd-php

Первая строчка позволит нашим php файлам иметь расширение html, но выполняться как php. Полезно бывает во многих случаях. А в старые добрые когда поисковики индексировали ЧПУ лучше, такая строчка всегда приходила на выручку.
Мы можем переназначить, добавить или подменить любые типы файлов под удобные нам разрешения.

Интересный трюк

Второй строкой указано, какие расширения файлов должны выполняться как cgi скрипты.

Третья, четвертая и пятая строки, на всякий случай уточняют мим-тип файлов с разрешением css, js, xml. Не путайте с присвоением заголовка в ответе сервера на запрос, как это сделано в первых двух строках.

Шестая строчка это участка, нужна если на вашем сайте есть скачиваемый для пользователей контент. Если добавить эту строку, то при обращении к данным файлам им будет предлагаться скачать их на компьютер, а не как это сейчас в современным браузерах куча плагинов, которые даже word открывают в браузере.

Седьмую строку я закомментировал. Это строчка в принудительно-добровольном порядке, будет все файлы с вашего сервера запустить как php. Её лучше использовать лишь в отдельных папках, при необходимости.

7. Знают взрослые и дети, что архивы меньше весят…

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

У Апача есть два модуля сжатия. Оба не являются модулями по умолчанию, поэтому необязательно могут присутствовать у вашего провайдера. Но как показала практика у 99% провайдеров один из них стоит. Наиболее распространен mod_deflate. Чтобы его с помощью сжимать весь контент на вашем сайте добавьте в .htaccess следующие строки:

<ifModule mod_deflate.c>
	AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>

Как видите мы должны перечислить mime type файлов, которые следует подвергать сжатию. Сюда можно добавить и видео и картинки, но толку это даст мало. Потому что jpeg или gif уже сами по себе являются сжатыми форматами. Также как avi или flv. Вы фактически нечего не выиграете указав их.

Второй менее популярный модуль это mod_gzip, Чтобы включить сжатие с его помощью добавьте вот такие строчки:

<IfModule mod_gzip.c>
	mod_gzip_on         Yes
	mod_gzip_dechunk    Yes
	mod_gzip_item_include file		\.(html?|txt|css|js|php|pl)$
	mod_gzip_item_include mime		^text\.*
	mod_gzip_item_include mime		^application/x-javascript.*
	mod_gzip_item_exclude mime		^image\.*
	mod_gzip_item_exclude rspheader	^Content-Encoding:.*gzip.*
</IfModule>

Данный модуль умеет работать с масками, что несомненно большой плюс. Да и синтаксис у него куда более гибкий чем у предыдущего. Но используют его реже. А по сжатию я даже не берусь судить, который из модулей лучше. Я сильной разницы не заметил при тестах.

8. А ещё быстрее можно?

Можно. Если применить кеширование страниц. У кеширования есть и плюсы и минусы, поэтому подходить к этому вопросу надо подготовившись. Для динамически обновляющегося сайт каждый 2-3 минуты, например популярного форума, нужно учесть, что пользователь должен видеть актуальную информацию. Но у любого сайт есть контент, который более или менее статичен. Например те же картинки, или файлы стилей. Поэтому нам потребуется по разному использовать кеширование различного содержимого на сайте. В html разметки мы всегда можем использовать meta теги. И через php мы может устанавливать заголовки ответа сервера. Остается вопрос, как быть с css, js, image и т.д. и т.п.

Помочь нам в этом могут два модуля: mod_headers и mod_expires которые могут установить заголовки в ответ сервера и подсказать вашему браузеру, что и как нужно кешировать. Один из модулей обычно стоит у провайдера, но как и в случае с любым модулем, который не входит в стандартную сборку Апача, 100% гарантии никто вам не даст. Поэтому снова во избежание 500й ошибки указывает условия для каждого из модулей.

<ifModule mod_headers.c>
	#кэшировать html и htm файлы на один день
	<FilesMatch "\.(html|htm)$">
		Header set Cache-Control "max-age=43200"
	</FilesMatch>
	#кэшировать css, javascript и текстовые файлы на одну неделю
	<FilesMatch "\.(js|css|txt)$">
		Header set Cache-Control "max-age=604800"
	</FilesMatch>
	#кэшировать флэш и изображения на месяц
	<FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$">
		Header set Cache-Control "max-age=2592000"
	</FilesMatch>
	#отключить кэширование
	<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
		Header unset Cache-Control
	</FilesMatch>
</IfModule>

Вот такой синтаксис у mod_headers. Думаю по комментариям ясно что к чему.
В данной секции я отключил кеширование php файлов. Хотя по моему мнению небольшой временной интервал кеширования им не повредит. 5-30 секунд, это интервал времени, за который мало что меняется. А многие пользователи любят пользоваться клавишей back (вернуться назад). Чтобы не загружать им страницу второй раз, а подхватить её из кеша, разумный интервал кеширования все же уместен.

Во второй секции где идут условия для mod_expires я именно так и делаю — для php ставлю небольшой интервал кеширования.

<ifModule mod_expires.c>
	ExpiresActive On
	#по умолчанию кеш в 5 секунд
	ExpiresDefault "access plus 5 seconds"
	#кэшировать флэш и изображения на месяц
	ExpiresByType image/x-icon "access plus 2592000 seconds"
	ExpiresByType image/jpeg "access plus 2592000 seconds"
	ExpiresByType image/png "access plus 2592000 seconds"
	ExpiresByType image/gif "access plus 2592000 seconds"
	ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
	#кэшировать css, javascript и текстовые файлы на одну неделю
	ExpiresByType text/css "access plus 604800 seconds"
	ExpiresByType text/javascript "access plus 604800 seconds"
	ExpiresByType application/javascript "access plus 604800 seconds"
	ExpiresByType application/x-javascript "access plus 604800 seconds"
	#кэшировать html и htm файлы на один день
	ExpiresByType text/html "access plus 43200 seconds"
	#кэшировать xml файлы на десять минут
	ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>

9. Правила вежливого тона…

В процессе модернизации своего сайта, мы часто оставляем хвосты ввиде ссылок, которые ведут на страницы, которые мы удалили. Иногда такие ссылки идут с других сайтов или из поисковых систем. Чтобы не терять пользователей вежливым тоном считается иметь собственные страницы для различного типа ошибок. Включая даже ошибки сервера. Например стандартное сообщение о 500й ошибки очень скучное и мрачное, и вряд ли вызовет у пользователя желание посетить вашу страницу ещё раз. Но в htaccess есть приемы, которые могут сделать даже эту страницу приветливей.

# Bad Rquest
ErrorDocument 400 /400.html
# Authorization Required
ErrorDocument 401 /401.html
# Forbidden
ErrorDocument 403 /403.html
# Not found
ErrorDocument 404 /404.html
# Method Not Allowed
ErrorDocument 405 /405.html
# Request Timed Out
ErrorDocument 408 /408.html
# Request URI Too Long
ErrorDocument 414 /414.html
# Internal Server Error
ErrorDocument 500 /500.html
# Not Implemented
ErrorDocument 501 /501.html
# Bad Gateway 
ErrorDocument 502 /502.html
# Service Unavailable 
ErrorDocument 503 /503.html
# Gateway Timeout
ErrorDocument 504 /504.html

Для 400-х ошибок можно использовать и динамические страницы на php. А вот для 500 лучше сделать на html и js. Это часть ошибок обычно связана с ошибками сервера (в большинстве случаев) и php или cgi как правило в такой ситуации не работают.

Если вам лень делать столько страниц устанавливайте страницей ошибок главную страницу своего сайта или карту сайта.

Все это вы делаете исключительно для людей. Поисковым роботам плевать на то есть у вас страницы ошибок или нет. Они видят ответ сервера с кодом ошибки и блокируют вашу страницу в поиск. Так что имейте ввиду, это не панацея. Это лишь вежливость к вашей аудитории и имидж вашего сайта.

10. Подведем итог

Знатоки понимают, что в этой статье описано далеко не все. Я коснулся здесь лишь поверхности «айсберга». На самом деле возможности .htaccess куда много обширней, чем описано в статье. Но я и не преследовал целью перевести манаул по htaccess на русский язык. Всего чего я хотел это создать небольшой костяк файла .htaccess для тех, кто только приступил к изучению данного вопроса, чтобы сэкономить их время на поисках информации по сети.

В результате всех манипуляций у нас должен был получить файл следующего содержания:

Options All -ExecCGI -Indexes -Includes +FollowSymLinks

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteBase /
    RewriteCond %{HTTP_HOST} ^black-web
    RewriteRule (.*) http://www.black-web.ru/$1 [R=301,L]
    RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.php\ HTTP/
    RewriteRule ^index\.php$ http://www.black-web.ru/ [R=301,L]
</IfModule>

DirectoryIndex index.php

<IfModule mod_setenvif.c>
	SetEnv TZ Europe/Moscow
</IfModule>
ServerSignature Off
#AddDefaultCharset UTF-8
<ifModule mod_php.c>
	php_value	upload_max_filesize	32M
	php_value	post_max_size		10M
	php_value	default_charset utf-8
	php_value	max_execution_time 200
</ifModule>
AddHandler application/x-httpd-php .html
AddHandler cgi-script .pl .py .jsp .asp .htm .shtml .sh .cgi
AddType application/x-javascript .js
AddType text/css .css
AddType text/xml .xml
AddType application/octet-stream .doc .mov .avi .pdf .xls 
# ForceType application/x-httpd-php

<ifModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>

<IfModule mod_gzip.c>
    mod_gzip_on         Yes
    mod_gzip_dechunk    Yes
    mod_gzip_item_include file		\.(html?|txt|css|js|php|pl)$
    mod_gzip_item_include mime		^text\.*
    mod_gzip_item_include mime		^application/x-javascript.*
    mod_gzip_item_exclude mime		^image\.*
    mod_gzip_item_exclude rspheader	^Content-Encoding:.*gzip.*
</IfModule>

<ifModule mod_headers.c>
    #кэшировать html и htm файлы на один день
    <FilesMatch "\.(html|htm)$">
        Header set Cache-Control "max-age=43200"
    </FilesMatch>
    #кэшировать css, javascript и текстовые файлы на одну неделю
    <FilesMatch "\.(js|css|txt)$">
        Header set Cache-Control "max-age=604800"
    </FilesMatch>
    #кэшировать флэш и изображения на месяц
    <FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$">
        Header set Cache-Control "max-age=2592000"
    </FilesMatch>
    #отключить кэширование
    <FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
        Header unset Cache-Control
    </FilesMatch>
</IfModule>

<ifModule mod_expires.c>
    ExpiresActive On
    #по умолчанию кеш в 5 секунд
    ExpiresDefault "access plus 5 seconds"
    #кэшировать флэш и изображения на месяц
    ExpiresByType image/x-icon "access plus 2592000 seconds"
    ExpiresByType image/jpeg "access plus 2592000 seconds"
    ExpiresByType image/png "access plus 2592000 seconds"
    ExpiresByType image/gif "access plus 2592000 seconds"
    ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
    #кэшировать css, javascript и текстовые файлы на одну неделю
    ExpiresByType text/css "access plus 604800 seconds"
    ExpiresByType text/javascript "access plus 604800 seconds"
    ExpiresByType application/javascript "access plus 604800 seconds"
    ExpiresByType application/x-javascript "access plus 604800 seconds"
    #кэшировать html и htm файлы на один день
    ExpiresByType text/html "access plus 43200 seconds"
    #кэшировать xml файлы на десять минут
    ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>

# Bad Rquest
ErrorDocument 400 /400.html
# Authorization Required
ErrorDocument 401 /401.html
# Forbidden
ErrorDocument 403 /403.html
# Not found
ErrorDocument 404 /404.html
# Method Not Allowed
ErrorDocument 405 /405.html
# Request Timed Out
ErrorDocument 408 /408.html
# Request URI Too Long
ErrorDocument 414 /414.html
# Internal Server Error
ErrorDocument 500 /500.html
# Not Implemented
ErrorDocument 501 /501.html
# Bad Gateway 
ErrorDocument 502 /502.html
# Service Unavailable 
ErrorDocument 503 /503.html
# Gateway Timeout
ErrorDocument 504 /504.html

11. Послесловие.

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

И напоследок для любителей экспериментов несколько строк .htaccess. Сужу по своему опыту — на практике знания усваиваются лучше чем в теории.

Разные интересные примеры

# SECURE ____________________
<IfModule mod_ssl.c>
	SSLOptions +StrictRequire
	SSLRequireSSL
	SSLRequire %{HTTP_HOST} eq "black-web.ru"
</IfModule>
<IfModule mod_rewrite.c>
	RewriteCond %{HTTPS} !on
	RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
</IfModule>

# HOTLINKING ________________
<IfModule mod_rewrite.c>
	RewriteCond %{HTTP_REFERER} !^$
	RewriteCond %{HTTP_REFERER} !^http://([ -a-z0-9]  \.)?black-web\.ru [NC]
	RewriteRule \.(gif|jpe?g|png)$ - [F,NC,L]
</IfModule>

# REDIRICT __________________
Redirect 301 /index.html /index.php
<IfModule mod_rewrite.c>
	RewriteRule ^news/([^/\.]+)/?$ news.php?news=$1 [L]
	RewriteRule ^(.*\.((js)|(css)))$ plugin/GzipFile.php?file=$1
	RewriteRule \.css$ plugin/GzipFile.php?file=$1
	RewriteRule \.js$ plugin/GzipFile.php?file=$1
</IfModule>
RedirectMatch 301 /blog(.*) http://www.black-web.ru/$1

Настройка .htaccess

Настройка .htaccess. Полное руководство

08.06.2011

настройка htaccess

Сегодня я хочу рассказать о htaccess, файле, который позволяет настраивать веб-сервер Apache. Директивы, которые прописываются в этом файле напрямую влияют на выдачу, которую формирует веб-сервер. Инструмент этот достаточно мощный, использовать его нужно с умом. Статья эта написана больше полугода назад, теперь я снова к ней возвращаюсь, чтобы сделать самым подробным мануалом на эту тему.

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

Для начала — пару слов, что такое htaccess? Процитирую официальный сайт веб-сервера Apache:

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

То есть, мы можем управлять поведением сервера в каждой, отдельно взятой папке, что очень удобно.


Директивы htaccess. Перенаправление

Блокируем хотлинки с других сайтов

Есть нехорошие товарищи, которые могут использовать картинки с вашего ресурса для использования в своих проектах. Они используют ваши изображения на своих сайтах, другими словами, используют вашу пропускную способность в своих целях, по аналогии с перемещением изображений на поддомен. Будем с ними бороться… Заменим любую картинку, на которую ведет хотлинк с другого сайта, на какое-нибудь предупреждающее изображение или на что хватит фантазии. В коде не забывайте менять адреса на ваши URL.

1
2
3
4
5
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?ваш-урл\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
#Замените путь к картинке
RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/noHL.jpg [L]

Перенаправим RSS фиды WordPress на Feedburner

Я не думаю, что кто-то пользуется чем-то другим, отличным от Feedburner. Удобно для пользователя, удобно для владельца блога, статистика, опять же. Если вы еще не используете — крайне рекомендую. Код ниже перенаправит все ваши RSS потоки на ваш аккаунт, не забывайте только вставить нужный адрес.

1
2
RedirectMatch 301 /feed/(atom|rdf|rss|rss2)/?$
RedirectMatch 301 /comments/feed/(atom|rdf|rss|rss2)/?$ http://feedburner.com/yourfeed/

В этом примере идет перенаправление двух потоков: основного RSS и обновление комментариев, если посетитель подписан на обновления.

Изменим страницы ошибок

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

1
2
3
4
5
6
ErrorDocument 400 /errors/badrequest.html
ErrorDocument 401 /errors/authreqd.html
ErrorDocument 403 /errors/forbid.html
ErrorDocument 404 /errors/404.html
ErrorDocument 500 /errors/serverr.html
#Замените /errors/*.html на путь к вашим страницам ошибок

В этом примере идет перенаправление в случае основных ошибок. 404 я тоже добавил, хотя CMS обычно отрабатывают такие моменты, но бывали случаи.

301 и 302 редирект или перенаправление

301 редирект или, так называемое постоянное перенаправление — говорит о том, что страница поменяла адрес или URL и перенаправляет на новую страницу. Если у вас на сайте была проиндексированная ПС страница, а вы поменяли ее адрес — в обязательном порядке сделайте 301 редирект на новую страницу. При 301 редиректе старая страница не индексируется, а вместо нее «подставляется» новая.

1
2
RewriteEngine on
Redirect 301 /old-page http://ваш-урл.ру/new-page

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

1
2
3
Options +FollowSymLinks
RewriteEngine on
RewriteRule (.*)  [R=301,L]

Есть интересная методика «скрытия» внешних ссылок путем 301 редиректа. Допустим, у вас есть «сквозная» ссылка в сайдбаре, которая ведет на ваш профиль в Google+, она внешняя, то есть ведет на внешний ресурс. Для SEO очень хорошо, когда таких ссылок как можно меньше. Можно спрятать их и сделать внутренними.

Технология производства внутренних ссылок из внешних:

  • ставим ссылку на мнимую страницу, допустим gering111.com/google-plus
  • настраиваем 301 редирект в htaccess с этой страницы на реальную страницу вашего профиля
  • посетитель ничего не чувствует, ПС довольны

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

1
2
RewriteEngine on
Redirect 302 /old-page http://ваш-урл.ру/new-page

Код абсолютно такой же, как в случае с постоянным перенаправлением.
302 редирект удобно использовать, когда проводятся какие-либо долгосрочные работы на сайте и не нужно показывать посетителям «поломанные» страницы. В таком случае вам поможет этот код:

1
2
3
4
RewriteEngine on
RewriteCond %{REQUEST_URI} !/inside.html$
RewriteCond %{REMOTE_ADDR} !^123.123.123.123
RewriteRule $ /inside.html [R=302,L]

Склеиваем сайты с www и без него

Очень плохо, когда сайт доступен по двум адресам, ПС это очень не любят. Склеить это в один адрес поможет код ниже:

1
2
3
4
Options +FollowSymLinks
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.ваш-урл\.com$ [NC]
RewriteRule ^(.*)$ http://ваш-урл.com/$1 [R=301,L]

В этом примере — главное зеркало это адрес без www. Если необходимо сделать наоборот — поменяйте www местами, сверху уберите, внизу добавьте.

Показ страниц в зависимости от IP

1
2
3
SetEnvIf REMOTE_ADDR 192.168.0.1 REDIR=&amp;quot;redir&amp;quot;
RewriteCond %{REDIR} redir
RewriteRule ^/$ /about.html

Добавлять адреса можно дублированием первой строки, в последней — меняется страница для перенаправления.

Перенаправляем на главную

Перенаправление со страниц site.com/index.php и site.com/index.html на страницу site.com/. За код спасибо Василию Красноженову.

1
2
3
4
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.html\ HTTP/
RewriteRule ^index\.html$ http://site.com [R=301,L]
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.php\ HTTP/
RewriteRule ^index\.php$ http://site.com [R=301,L]

Директивы htaccess. Разделяем доступы

Запрет доступа к сайту

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

1
2
3
Order Allow,Deny
Allow from all
Deny from 192.168.0.1

Добавлять IP в список можно просто добавляя последнюю строку и меняя там адрес на нужный.
Противоположная ситуация, когда всем нужно запретить, кроме некоторых IP, тогда используем такой код:

1
2
3
Order Deny,Allow
Deny from all
Allow from 192.168.0.1

Добавлять адреса аналогично предыдущему примеру.

Запрещаем просмотр нежелательным User-Agent

Каждый браузер или приложение, которое запрашивает страницу, так или иначе имеет идентификатор — User-Agent. Можно запретить просмотр нежелательным товарищам. Это могут быть как программы, сканирующие сайты, так и старые браузеры, от поддержки которых вы целиком отказались. Ситуации бывают разные.

1
2
3
4
5
6
7
SetEnvIfNoCase user-Agent ^FrontPage [NC,OR]
SetEnvIfNoCase user-Agent ^Java.* [NC,OR]
SetEnvIfNoCase user-Agent ^Microsoft.URL [NC,OR]
SetEnvIfNoCase user-Agent ^MSFrontPage [NC,OR]
Order Allow,Deny
Allow from all
Deny from env=bad_bot

Полный список известных User-Agent вы можете найти на сайте http://www.user-agents.org/

Запрещаем доступ к определенному файлу

В примере стоит запрет на доступ к файлам wp-config и htaccess, тем самым повышается уровень общей защиты. Очень нужная директива, рекомендую добавить в свои файлы

01
02
03
04
05
06
07
08
09
10
# защищаем wpconfig.php
&amp;lt;Files wp-config.php&amp;gt;
order allow,deny
deny from all
&amp;lt;/Files&amp;gt;
#защищаем htaccess
&amp;lt;Files .htaccess&amp;gt;
order allow,deny
deny from all
&amp;lt;/Files&amp;gt;

Аналогично можно защитить css и js файлы, которые используются плагинами:

1
2
3
4
&amp;lt;Files ~ &amp;quot;\.(js|css)$&amp;quot;&amp;gt;
order allow,deny
allow from all
&amp;lt;/Files&amp;gt;

Скачивание определенных типов файлов

Современные браузеры такие умные, что иногда становится страшно. Мой Хром иногда пытается внутри себя открывать для просмотра PDF файлы, иногда вешаясь насмерть. С помощью htaccess можно принудительно сказать браузеру, что делать с тем или иным типом файлов, не оставляя этот момент на его усмотрение. В данном случае это скачивание. Дополнительные типы файлов можно добавить по аналогии.

1
2
3
AddType application/octet-stream .pdf
AddType application/octet-stream .zip
AddType application/octet-stream .avi

Ограничение на доступ к админке WordPress

Если у вас постоянный IP адрес, можно только ему давать доступ к админ-панели WordPress

1
2
3
4
5
6
7
8
9
AuthUserFile /dev/null
AuthGroupFile /dev/null
AuthName &amp;quot;Example Access Control&amp;quot;
AuthType Basic
&amp;lt;LIMIT GET&amp;gt;
order allow, deny
deny from all
allow from Ваш IP
&amp;lt;/LIMIT&amp;gt;

Директивы htaccess. Техническая оптимизация и ускорение

Запрещаем автоматическое индексирование файлов

В каждой папке на сайте Apache создает, по умолчанию, индексные файлы, в которых перечисляется, какие файлы в папке находятся. Если вы не хотите давать дополнительную лазейку для злоумышленников — запретите индексирование.

1
Options -Indexes

Включаем gzip сжатие

Вы знаете о том, что данные на сервере можно сжать, а клиент их распакует у себя? Код ниже как раз включает такую штуку. Нужно только убедиться, что gzip разрешен на вашем хостинге, но обычно он есть.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
&amp;lt;FilesMatch &amp;quot;\.js.gz$&amp;quot;&amp;gt;
ForceType text/javascript
Header set Content-Encoding: gzip
&amp;lt;/FilesMatch&amp;gt;
&amp;lt;FilesMatch &amp;quot;\.css.gz$&amp;quot;&amp;gt;
ForceType text/css
Header set Content-Encoding: gzip
&amp;lt;/FilesMatch&amp;gt;
&amp;lt;FilesMatch &amp;quot;\.js$&amp;quot;&amp;gt;
ForceType text/javascript
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} !&amp;quot;.*Safari.*&amp;quot;
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*)\.js$ $1\.js.gz [L]
ForceType text/javascript
&amp;lt;/FilesMatch&amp;gt;
&amp;lt;FilesMatch &amp;quot;\.css$&amp;quot;&amp;gt;
ForceType text/css
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} !&amp;quot;.*Safari.*&amp;quot;
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*)\.css$ $1\.css.gz [L]
ForceType text/css
&amp;lt;/FilesMatch&amp;gt;

Код не работает для изображений, но к ним применять gzip не рекомендуется. Именно такой код установлен у меня.

Сжатие с применением mod_deflate

Ходят слухи, что с помощью этого мода сжимать данные лучше и сайт работает быстрее. Я не могу протестировать, да и не встречал в Интернете подобных тестов. Если у кого есть такая информация — буду благодарен. А код выложу, мало ли

1
2
3
4
5
&amp;lt;ifmodule mod_deflate.c=&amp;quot;&amp;quot;&amp;gt;
&amp;lt;filesmatch &amp;quot;.(js|css)$&amp;quot;=&amp;quot;&amp;quot;&amp;gt;
SetOutputFilter DEFLATE
&amp;lt;/filesmatch&amp;gt;
&amp;lt;/ifmodule&amp;gt;

Включаем кэширование браузера клиента

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

01
02
03
04
05
06
07
08
09
10
11
12
Header append Cache-Control &amp;quot;private&amp;quot;
FileETag MTime Size
ExpiresActive On
ExpiresDefault &amp;quot;access plus 0 minutes&amp;quot;
ExpiresByType image/ico &amp;quot;access plus 1 years&amp;quot;
ExpiresByType text/css &amp;quot;access plus 1 years&amp;quot;
ExpiresByType text/javascript &amp;quot;access plus 1 years&amp;quot;
ExpiresByType image/gif &amp;quot;access plus 1 years&amp;quot;
ExpiresByType image/jpg &amp;quot;access plus 1 years&amp;quot;
ExpiresByType image/jpeg &amp;quot;access plus 1 years&amp;quot;
ExpiresByType image/bmp &amp;quot;access plus 1 years&amp;quot;
ExpiresByType image/png &amp;quot;access plus 1 years&amp;quot;

Указываем кодировку по умолчанию

WordPress работает с кодировкой UTF8 и делает это хорошо, но чтобы гарантированно избежать проблем с кодировкой — укажите ее принудительно, хуже не будет точно.

1
AddDefaultCharset UTF-8

Ограничиваем число подключений к сайту

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

1
MaxClients &amp;lt;количество подключений&amp;gt;

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

Разрешаем выполнение php внутри JavaScript

Иногда необходимо выполнить некоторый код внутри скрипта. Этот код поможет включить эту функцию

1
2
3
4
5
AddType application/x-httpd-php .js
AddHandler x-httpd-php5 .js
&amp;lt;filesmatch &amp;quot;\.(js|php)$&amp;quot;&amp;gt;
SetHandler application/x-httpd-php
&amp;lt;/filesmatch&amp;gt;

Вот и все, что касается htaccess и его стандартного использования. Я не стал упоминать о защите папок паролями, потому что не считаю это правильным, о «защите» от спама, путем блокировки запросов запросов без передачи Referer, потому что все современные спам-машины давно умеют это делать. Ну и прочие вещи, которые не считаю грамотно реализованными.

Напоследок хочу представить вам сервис тестирования вашего htaccess файла — http://htaccess.madewithlove.be/. Там все просто, удачного дня

CSS — Позиционирование блочных элементов

CSS — Позиционирование блочных элементов

Автор: Александр Мальцев

Блочный элемент в HTML –это такой элемент, который занимает по умолчанию всю ширину родительского элемента. Родительским элементом может быть другой блочный элемент, или окно браузера. Блочному элементу с помощью свойств CSS можно задать ширину (width) и высоту (height). Позиционированием блочных элементов называется процесс их расположения внутри окна браузера и относительного друга с помощью CSS свойств position, left, top, right и bottom. Свойство CSS position предназначено для задания одного из четырёх доступных видов позиционирования: static (по умолчанию), absolute (абсолютное), fixed (фиксированное) и relative (относительное). Остальные CSS свойства, а именно left, top, right и bottom предназначены для задания расстояний относительно левого, верхнего, правого и нижнего края родительского элемента. Также блочные элементы при задании определенных свойств могут накладываться друг друга, и данную возможность то же можно использовать на сайтах.

Позиционирование по умолчанию (static)

Если вы не указали position у блочного элемента или указали static, что одно и то же, то в таком случае блочные элементы располагаются по порядку. Причем следующий блок (например: красный) располагается с новой строки. Так же на данное позиционирование не действует задание расстояний left, top, right и bottom.

<body>
  <div style="width: 200px; height: 100px; border: 1px solid black; background: green;"></div>
  <div style="width: 300px; height: 150px; border: 1px solid black; background: red;"></div>
</body>

Статичное позиционирование блоков

Абсолютное позиционирование (absolute)

При абсолютном позиционировании положения элемента задаётся относительно краёв окна браузера с помощью расстояний, задаваемых свойствами left, top, right и bottom. Если указать расстояния left и right одновременно, и они будут противоречить между собой, то предпочтение отдаётся left, то же самое касается top и bottom, в которых больший приоритет имеет расстояние top. Абсолютное позиционирование применяется очень часто совместно с относительным позиционированием в дизайнерских целях, когда необходимо разместить различные элементы относительного друг друга, так же может применяться для создания выпадающих меню, разметки сайта и т.д.

<body>
  <div style="width: 200px; height: 100px; border: 1px solid black; background: green;"></div>
  <div style="width: 300px; height: 200px; position: absolute; top: 50px; left: 100px; border: 1px solid black; background:red;"></div>
</body>

Блок с абсолютным позиционированием

Фиксированное позиционирование (fixed)

Фиксированное позиционирование отличается от других видов позиционирования и не перемещается вместе с контентом при скроллинге страницы. Блочные элементы с фиксированным позиционированием привязываются с помощью свойств left, top, right и bottom к краям окна браузера. Фиксированное позиционирование применяется для создания фреймовых интерфейсов (окно браузера делится на несколько областей), фиксированного меню, фиксированного подвала сайта и «постоянных» блоков (перечень ссылок, социальные кнопки и т.д.).

<body>
  <div style="width: 200px; height: 2000px; border: 1px solid black; background: green;"></div>
  <div style="width: 600px; height: 200px; position: fixed; top: 100px; left: 100px; border: 1px solid black; background:red;"></div>
</body>

Блок с фиксированным позиционированием

Относительное позиционирование (relative)

Относительное позиционирование задаётся с помощью задания расстояний left, top, right и bottom относительно его текущего положения.

<body>
  <div style="width: 200px; height: 100px; border: 1px solid black; background: green;"></div>
  <div style="width: 300px; height: 200px; position: relative; top: 50px; left: 100px; border: 1px solid black; background: red;"></div>
</body>

Блок с относительным позиционированиемОднако такое положение блока можно создать и с помощью свойства margin (отступы).

<body>
  <div style="width: 200px; height: 100px; border: 1px solid black; background:green;"></div>
  <div style="width: 300px; height: 200px; margin-top: 50px; margin-left: 100px; border: 1px solid black; background: red;"></div>
</body>

Относительное позиционирование не интересно использовать само по себе, оно в основном применяется вместе с абсолютным позиционированием.

Рассмотрим варианты:

    1. Если расположить блоки с абсолютным позиционированием в блок с относительным, то расстояния будут уже задаваться не от края окна браузера, а от границ относительного блока.
      <body>
      <!-- Зелёный блок с относительным позиционированием -->
      <div style="width: 400px; height:400px; position:relative; top:50px; left:50px; border: 1px solid black; background:green;">
        <!-- Красный блок с абсолютным позиционированием -->
        <div style="width: 100px; height:100px; position:absolute; top:50px; left:50px; border: 1px solid black; background:red;"></div>
        <!-- Синий блок с абсолютным позиционированием -->
        <div style="width: 100px; height:100px; position:absolute; bottom:50px; right:50px; border: 1px solid black; background:blue;"></div>
      </div>
      </body>

      Расположение блоков с абсолютным позиционированием в относительном блоке

    2. Например: для создания фиксированных макетов состоящих из 3 блоков, выровненных по верхнему краю. Установим высоту «400px» относительному блоку для наглядности .
<body>
<div style="width: 800px; height:400px; position:relative; border: 1px solid black; background:green;">
  <div style="width: 200px; height:200px; position:absolute; left:0px; border: 1px solid black; background:red;">Левый блок</div>
  <div style="width: 400px; height:200px; position:absolute; left:200px; border: 1px solid black; background:blue;">Основной блок</div>
  <div style="width: 200px; height:200px; position:absolute; left:600px; border: 1px solid black; background:red;">Правый блок</div>
</div>
</body>

Макет, состоящий из 3 блок с абсолютным позиционированием

  1. Дополнительно к блокам можно применять свойство z-index, которое предназначено для позиционирования элементов по оси Z. Чем больше значение свойства z-index, тем ближе элемент расположен к нам, и наоборот, чем меньше значение, тем дальше расположен элемент от нас.
    <body>
    <body>
    <div style="width: 300px; height:300px; position:relative; border: 1px solid black; background:green;">
      <div style="width: 100px; height:100px; position: absolute; z-index: 1; left: 50px; top: 50px; border: 1px solid black; background: red;"></div>
      <div style="width: 100px; height: 100px; position: absolute; z-index: 2; left: 100px; top: 100px; border: 1px solid black; background: blue;"></div>
      <div style="width: 100px; height: 100px; position: absolute; z-index: 3; left: 150px; top: 150px; border: 1px solid black; background: yellow;"></div>
    </div>
    </body>

    Расположение блоков с абсолютным позиционированием, к которым применено свойство z-index