Как правильно проводить технические работы на сайте

Рано или поздно вебмастера сталкиваются с проблемой проведения технических работ на сайте, останавливая его функционирование по различным причинам:

• смена движка сайта, дизайна или изменение базы данных
• модернизация установленного программного обеспечения
• обновление сервера, покупка и установка нового оборудования

Либо другие причины, по которым требуется приостановить работу сайта. Как правильно проводить технические работы, чтобы с одной стороны, не потерять позиции в поисковых системах, а с другой, оставаться полезным для посетителей и не терять их доверие? Об этом и хотелось бы поговорить.

Under Construction

Вешая на сайт страницу under construction, нужно зараннее побеспокоиться о том, что новый контент будет виден как пользователям, так и поисковым системам. Ваши тайтлы и сниппеты в поисковой выдаче могут измениться, и большинство страниц вылететь как дубликаты. Чтобы не допустить этого, необходимо отдавать поисковым ботам заголовки с 503 ошибкой (сайт временно недоступен).

header(‘ HTTP /1.1 503 Service Temporarily Unavailable’);
header(‘Status: 503 Service Temporarily Unavailable’);
header(‘Retry-After: 3600’);
header(‘X-Powered-By:’);

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

Посетители, пришедшие на ваш сайт и увидевшие одну надпись

Просим прощения, в данный момент над сайтом проводятся технические работы. Зайдите к нам позже.

очень разочаруются, закрыв окно браузера, так и не найдя искомой информации. А ведь это мог бы быть человек, заинтересованный в вашем продукте или сервисе. Нужно зараннее побеспокоиться о посетителе, встав на его место. Добавить на эту страницу свои контактные данные будет лучшим решением (например, как на drophk.com).

Некоторые также добавляют соответствующую графику, чтобы с первого взгляда была понятна представленная информация.

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

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

Итак, если подвести итог, тогда для большей юзабилити сайта при проведении технических работ, необходимо:

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

Вообще, чем больше информации вы разместите на страницу under construction, тем больше она понравится посетителю и он обязательно вернется к вам позже, как и поиковая система при виде 503-ей ошибки.

Желательно о проведении технических работ над сайтом предупреждать зараннее на блоге компании (сайта) либо на форуме, или же в листах рассылки для подписчиков, чтобы облегчить жизнь пользователям и не потерять их доверие к вашему сервису. Простенькие страницы вызывают только раздражение и вопросы, когда же все-таки сервер начнет работать? Если вам ценны клиенты и посетители, тогда поставьте себя на их место!

Источник

Как создать заглушку для сайта

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

Итак, давайте приступим…

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

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

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

Открываем программу Notepad++ (или аналогичную, например Блокнот). Создаем новый документ. Далее — Файл — Сохранить как, выбираем нашу папку с заглушкой и сохраняем документ с названием index.html

Вот что теперь должно быть в нашей папке:

Открываем в нашем редакторе файл index.html (после сохранения он должен быть у вас открыт). Теперь нам надо убедиться, что кодировка этого файла выставлена правильно. Для этого идем в пункт меню «Кодировки» и нажимаем на «Преобразовать в UTF-8″

Чтобы во время работы случайно не потерять достигнутый результат, рекомендую периодически сохранять документ во время работы. Это можно сделать в меню «Файл» или сочетанием клавиш «Ctrl + S».

Пишем в редакторе следующий код:

Из этих тегов состоит любая веб-страница.

Теперь добавим к нашей странице заголовок, ведь будет не очень красиво, когда кто-то откроет ее и увидит в заголовке вкладки браузера index.html (можете открыть страницу в браузере и следить за тем, что получается). Для этого между и добавим следующий код:

Фоновая картинка

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

Для этого заходим в Гугл Картинки и ищем интересную картинку, которая могла бы служить фоном для нашей страницы. Важно подбирать картинку шириной не менее 1920 пикселей, чтобы на больших экранах наша страница смотрелась хорошо. Я ввел в поисковую строку 1920 backgrounds и выбрал одну из картинок.

Открываем картинку в полном размере и сохраняем себе в папку images. Затем переименовываем ее. Назовем ее bg (не забываем о формате картинки, в моем случае это jpg).

Вот что я подобрал. Это фото города Чикаго. По-моему вполне подойдет для фонового изображения сайта.

Прикрепляем фоновое изображение к странице, для этого используем стили CSS:

Также выше я добавил стили для текста, а именно задал шрифт Ариал и белый цвет текста.

Далее создадим блок шириной 900 пикселей, в который поместим наш текст. Выровняем этот блок по центру.

Текст будет состоять из заголовка и, собственно, абзаца текста.

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

Добавим 3 блока, в которых будут телефон, электронная почта и скайп.

Осталось поработать со стилями.

Увеличим заголовок, выровняем его по центру и опустим ближе к центру экрана.

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

Сделаем блоки с контактами в 3 столбца, увеличим шрифт, выровняем каждый блок по центру и изменим цвет текста.

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

Источник

Собственная страница «Сайт закрыт на технические работы»

Немногим ранее мы рассмотрели что такое Maintenance mode, а также способы закрытия сайта на техническое обслуживание.

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

• нет возможности полностью кастомизировать отображаемую страницу-заглушку
• требует правки кода, в то время как решения в виде плагинов позволяют добиться результата в 1 клик

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

Создание файла maintenance.php

Этап первый. Создание файла, в котором и будет размещен наш собственный контент. Для этого в директории /wp-content создадим файл с названием maintenance.php . Не забывайте о кодировке файла.

С первым пунктом на этом все.

Верстка страницы

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

Листинг HTML:

// Регистрируем опцию для включения Maintenance mode class custom_general_settings < function custom_general_settings() < add_filter( 'admin_init' , array( &$this , 'custom_register_fields' ) ); >function custom_register_fields() < register_setting( 'general', 'custom_under_maintenance', 'esc_attr' ); add_settings_field('mk_custom_under_maintenance', '
'.__('Режим технического обслуживания' , 'custom_under_maintenance' ).'
' , array(&$this, 'clinto_fields_html') , 'general' ); > function clinto_fields_html() < $value = get_option( 'custom_under_maintenance'); $checked = ($value=='yes') ? 'checked="checked"' : ''; echo 'Закрыть сайт'; > > $custom_general_settings = new custom_general_settings(); //

//закрытие сайта на тех. обслуживание start $value = get_option( 'custom_under_maintenance');//обработка нашей опции if ($value=='yes' && !current_user_can('manage_options')): add_action( 'wp_loaded', function() < global $pagenow; if($pagenow !== 'wp-login.php' && ! is_user_logged_in() ) < header( 'HTTP/1.1 Service Unavailable', true, 503 ); header( 'Content-Type: text/html; charset=utf-8' ); if ( file_exists( WP_CONTENT_DIR . '/maintenance.php' ) ) < require_once( WP_CONTENT_DIR . '/maintenance.php' ); >die(); > >); endif; //закрытие сайта на тех. обслуживание end

server < listen 80; server_name anart.ru; . location / < return 503; # закрываем сайт на технические работы > # задаем красивую страницу 50x для пятисотых ошибок error_page 500 502 503 504 /50x.html; location = /50x.html < root /var/www/errors; > . > 

     charset="utf-8"> На сайте ведутся технические работы  name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  name="description" content="На сайте ведутся технические работы">  type="text/css"> body font-family: "Antic Slab", Arial, Helvetica, sans-serif;> .box  width: 800px; height:200px; position: absolute; top: 50%; left: 50%; background-color: #f8f8f8; border: 1px solid #e5e4e4; text-align: center; margin-top: -100px; margin-left: -400px; > h1  color: #614444; font-size: 40px !important; font-weight: normal !important; >   class="box"> Технический перерыв  >Приносим свои извинения за перебои в работе сайта. Наши технические специалисты уже работают над устранением неполадок.