Особенности новой версии сайта и план по развитию проекта

Logo

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

Внешний вид сайта после обновления 9 августа 2016 г.

Немного предыстории

Данный сайт был разработан и запущен на домене dmitriydenisov.com в конце 2010 года. Это был мой первый сайт на WordPress, поэтому при его создании использовалась доработанная бесплатная тема оформления и несколько самых необходимых плагинов для обеспечения минимальной функциональности.

С 2010 по 2012 год я активно развивал проект, публиковал новые статьи и вносил технические доработки, но в целом сайт сохранял неизменный внешний вплоть до 2016 года. Начиная с 2013 года, я переключился на создание и продвижение других проектов, поэтому развитие данного сайта практически прекратилось и начиная с 2014 года ограничивалось лишь публикацией 1-2 материалов в год.

Пренебрежение проектом на протяжении 2–3 лет негативно сказалось на его развитии и конкурентоспособности, поэтому к 2016 году данный сайт потерял порядка 70% трафика. В связи с этим 31 декабря 2015 года во время подведения итогов и плановой постановки целей было принято решение обновить данный сайт, что и было сделано 9 августа 2016 года. Назовем эту дату началом возрождения сайта.

Особенности новой версии сайта

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

Адаптивный дизайн

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

Мобильный вид сайта на устройстве с разрешением экрана 480x320 пикс.
Мобильный вид сайта на устройстве с разрешением экрана 480×320 пикс.

Обеспечить максимальную адаптивность удалось благодаря использованию в CSS единиц измерения REM вместо стандартных пикселов. Также не последнюю роль играет использование jQuery для обработки событий изменения размеров окна браузера пользователя, работы мобильных меню и прочего.

Структурированные данные

В новой версии сайта используются структурированные данные с целью улучшения представления сайта в результатах поиска и социальных сетях. В процессе разработки были использованы три основных словаря: Schema.org, Open Graph и Microformats.

Проверить микроразметку можно при помощи сервиса проверки структурированных данных от Google.

Проверка структурированных данных
Проверка структурированных данных

Подробнее о внедрения структурированных данных будет написана отдельная статья.

Семантическая верстка на HTML5

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

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

Изменение структуры ссылок

Изменениям подверглась также структура ссылок. Изначально на сайте использовался общепринятый устаревший шаблон с категорией в URL и расширением .html в конце:

http://site.com/%category%/%postname%.html

В новой версии он был изменен на более современный:

http://site.com/%postname%/

Данный вариант является более гибким, так как позволяет перемещать записи из категории в категорию без изменения ссылок. Еще одним преимуществом является более короткий адрес страницы, что облегчает запоминание и ручной ввод URL в адресную строку.

Чтобы обеспечить правильное понимание поисковыми системами новой структуры сайта, на сайте были использованы «хлебные крошки». Их использование позволит также улучшить отображение сайта в результатах поиска за счет использования структурированных данных.

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

Обновление авторизации

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

Новая форма авторизации
Новая форма авторизации

Была заменена также форма регистрации и восстановления пароля. Все эти формы теперь защищены от ботов при помощи системы Google reCAPTCHA. Таким образом удалось обеспечить более высокий уровень защиты административной части сайта от взлома.

Подробнее о написании плагина авторизации будет написано в будущих статьях.

Мелкие доработки

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

План по развитию проекта

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

На текущий момент в планах развивать следующие направления:

  1. Поисковая оптимизация и продвижение сайтов.
  2. Создание сайтов на WordPress, включая разработку тем и плагинов.
  3. Скрипты и плагины на PHP, jQuery и т.д.
  4. Основы HTML, CSS, PHP, jQuery и т.д.

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

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter

Комментарии 3

  • Андрей

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

    • Дмитрий

      Здравствуйте, Андрей. Рад, что мои статьи оказались для Вас полезными. Сейчас планирую в первую очередь обновить и дополнить старые материалы, поэтому продолжайте следить за обновлениями. Уверен, сможете найти еще много нового и интересного для себя.

  • Tatyana

    Да, новый дизайн выглядит куда приятнее. Хотя главное — контент. Ждем, когда Вы порадуете нас чем-то новеньким и интересным.

Оставить комментарий

отменить ответ