Создание сайта с нуля

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

Предлагаю рассмотреть создание сайта с нуля на движке WordPress. Это самая популярная система управления контентом (Content Management System) на сегодняшний день. Каждый третий сайт (включая мой) созданы на этой CMS.

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

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

Выбор ниши

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот такие названия пришли мне в голову…

Greece	Greek
GreeceIs	Greka
greece4you	GreekReporter
greece4all	GreekParadise
FromGreece	GreekStories
InGreece	grekomania
GreeceInfo	MirGreka
IloveGreece	GreekBlog, grekoblog
GreeceMyLove	GreekSite
vseogrecii	GreekExpert
GreeceWel.com	GreekPlatform

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

Обязательно проверяю историю домена на сайте web.archive.org. Домен GreekExpert.info был зарегистрирован в 2018 году, была попытка создать сайт о Греции, но остановилась на начальной стадии. Можно зайти посмотреть скриншоты.

Дополнительно проверяю ссылочный профиль по Ahrefs: чистый домен 2018 года.

Целевая аудитория

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

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

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

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

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

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

Перейдём к нашему конкретному примеру. Мой сайт задумывается как познавательно- развлекательный портал, и уж точно не научный журнал или энциклопедия. В качестве персонажа я выбрала сову. Она прекрасно символизирует Грецию, знания, мудрость.

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

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

Анализ конкурентов

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

Обратите внимание на структуру сайтов, количество и качество контента, иллюстрации, логотипы, доменные имена, страницы «контакты» и «о компании», в каких соцсетях представлены…

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

Чем лучше вы проведёте анализ, тем меньше ошибок совершите в собственном проекте.

В моём примере нужно отбросить коммерческие туристические компании, тогда останутся информационные сайты и блоги. Это и есть мои прямые конкуренты.

Конструктор сайтов или CMS

Этот вопрос подобен вызову: профессионально или нет. Конечно, проще создать свой блог в конструкторе сайтов. Это как поехать отдыхать по программе «всё включено». Именно так я начинала создавать свои первые блоги. Выбрала Blogger и первое время была очень довольна:

• интуитивно понятно;
• без рекламы;
• абсолютно бесплатно.

Однако выбрав данный путь, вы отказываетесь от своей собственности… Экономия 24 $ в год может перечеркнуть многолетние старания. Тут уж вам решать стоит ли затея 2 доллара в месяц. Если же в планах создать профессиональный продукт, то рекомендую не тратить время на эксперименты и сразу учиться работать с CMS.

Выбор нужной платформы прежде всего определяется поставленными задачами. Для ведения блога отлично подойдут WordPress или Joomla. В данном обзоре мы рассмотрим первый вариант, он немного проще и гораздо популярнее.

Выбор хостинга и домена

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

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

Покажу весь процесс на примере СХОСТ. Этот украинский хостинг-провайдер с пакетом Small подошёл по всем моим запросам:

• недорогие цены на услуги, акции, скидки;
• аптайм (время непрерывной работы сайта) 99.95%;
• бесплатный перенос сайта с другого хостинга;
• поддержка на украинском и русском языках;
• оплачивать услуги можно как банковскими картами так и криптовалютами;
• аккаунт в гривнах или долларах;
• стоимость хостинга всего лишь 0.97$/месяц при оплате на 3 года;
• домен в международной зоне в подарок при оплате хостинга на 3 года;
• 10%-ная скидка при первом платеже;
• простая удобная реферальная программа;
• дата центры в Украине и Нидерландах;
• бесплатный SSL-сертификат;
• 5 Гб SSD для 5 сайтов;
• PHP memory 512 MB.

Если вы впервые регистрируетесь на сайте, то ниже тарифов вы увидите дополнительную 10%-ную скидку на первый платёж. Для этого нужно ввести промо-код youarewelcome. Дата действия скидки ежедневно обновляется.

Если вы ещё не определились с доменным именем, то при регистрации укажите субдомен С-ХОСТ. Его очень удобно использовать для тестового сайта, на котором будете проводить подбор тем и плагинов и только потом внедрять в рабочую версию.

Выбор доменных зон в СХОСТ не очень большой, но порадует доступными ценами.

Я не раздумывая оплатила сразу на 3 года и получила в подарок регистрацию домена в международной зоне.

Советую согласовывать все действия с поддержкой для вашего конкретного случая.

Создание дополнительного домена

Если при регистрации на хостинге вы указали субдомен СХОСТ, то теперь нужно создать дополнительный домен. Откройте в Cpanel раздел Домены.

Перейдите по ссылке в Дополнительные домены и заполните поля.

SSL-сертификат

Обеспечьте читателям безопасное соединение с вашим сайтом, а себе — поддержку поисковых систем. Для этого предварительно нужно заказать SSL-сертификат. Для обычного блога вполне достаточно бесплатного сертификата с проверкой домена на подлинность, он выдаётся на 3 месяца и затем автоматически продлевается.

Итак, в разделе Безопасность перейдите по ссылке Let’s Encrypt SSL.

Закажите новый сертификат для своего домена.

Нажмите на кнопку Issue.

Установка движка WordPress

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

Система управления контентом устанавливается автоматически. Найдите раздел Программное обеспечение.

Откройте WordPress Manager.

Заполните поля и запустите установку.

Готово! Вы уже можете зайти и посмотреть. В зависимости от версии WordPress внешний вид может отличаться. Мой сайт сейчас выглядит так.

Переход на безопасный HTTPS протокол

Сейчас сайт открывается как по https та и http, но так быть не должно.

Настройте постоянную переадресацию (301 редирект) с http на https, чтобы сайт всегда работал по защищённому каналу. Для этого перейдите в корневую папку сайта, откройте редактирование файла .htaccess и напишите в начале файла код переадресации.

Для большинства движков или самописных скриптов должен подойти такой код:

RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} ^www\. [NC]
RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]
RewriteRule ^ https://%1%{REQUEST_URI} [L,NE,R=301]

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

Забегая наперёд, скажу что 301 редирект не защищает первое взаимодействие с сайтом. И если в адресной строке вы введёте домен сайта, то браузер по умолчанию использует http://. Поэтому когда сайт будет настроен задумайтесь о подключении HSTS. В этом случае используется алгоритм принудительного взаимодействия сайта по https://, включая первое взаимодействие.

Здоровье сайта

Удалите все неактивные плагины и темы, а используемые — обновите. От здоровья сайта напрямую зависит его безопасность и производительность.

WordPress по умолчанию устанавливает два плагина: Akismet Anti-Spam и Hello Dolly. Для защиты от спама я использую другой плагин, а Hello Dolly не несёт никакой пользы, он просто вставляет строчку из одноимённой песни. Поэтому смело можно всё удалить.

Теперь перейдите по цепочке Внешний вид — Темы — Просмотреть — Информация о теме, удалите неиспользуемые темы.

Защита сайта от СПАМа

Одним из способов продвижения сайта является размещение обратных ссылок на сторонних ресурсах. Поэтому комментарии могут оставляться только ради этого. Роботы очень быстро найдут новенький ресурс и начнут спамить его ссылками.

Удалять плагины вы уже умеете, а теперь разберёмся как их устанавливать. Начнём с антиспама. Очень простой и надёжный способ защитить свой проект от ненужных ссылок и нецензурной лексики — установить плагин Kama SpamBlock.

Перейдите по цепочке Плагины — Добавить новый. В поиск введите название.

Нажмите кнопку «Установить», а затем — «Активировать». Перейдите в раздел Плагины и проверьте его наличие. Никаких дополнительных настроек он не требует.

Базовые настройки WordPress

Перейдите в раздел Настройки и укажите все необходимые данные по каждому пункту.

Общие настройки: название, описание, адрес (с учётом HTTPS-протокола), язык сайта.

Настройки чтения: ограничьте отображение в RSS-ленте отрывком последнего элемента и попросите поисковые системы не индексировать сайт на период разработки. Конечно, доверять поисковикам нельзя и мы в следующем пункте применим более строгий инструмент.

Настройки обсуждения: отключите оповещение блогов и добавьте проверку комментария перед публикацией.

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

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

Создание robots.txt

robots.txt — текстовый документ в корне сайта, который указывает поисковым роботам какие страницы разрешено индексировать, а какие являются приватными и обрабатывать их запрещено. Также в файле указывается адрес sitemap (об этом чуть позже).

Поскольку проект только что создан, то на этом этапе нужно закрыть сайт от индексации. Галочку вы уже поставили, теперь установим запрет с помощью robots.txt.

Создайте текстовый файл в корне сайта и добавьте две строчки:

User-agent: *
Disallow: /

Когда сайт будет готов к встрече с посетителями и поисковыми системами нужно будет задать новые правила для индексирования и внести их в robots.txt. Для каждого проекта файл разрабатывается индивидуально, но можно подсмотреть у конкурентов или заказать у профессионалов.

Безопасность сайта

После установки WordPress вам автоматически присваивается имя admin, а вход в административную панель осуществляется по стандартному адресу wp-login.php. Защитите свой сайт от подбора паролей.

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

Рекомендую установить плагин Clearfy Pro от WPShop, он хоть и платный, но вы одним махом решите десятки проблем и избавитесь от головной боли решать каждую из них индивидуально.

Clearfy Pro не имеет бесплатную версию, доступен для скачивания в аккаунте WPShop, имеет лицензионный ключ и 12 месяцев русскоязычной поддержки.

Устанавливается он путём загрузки архива.

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

Устранение недостатков WordPress

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

Clearfy Pro решает и эту проблему.

Оптимизация URL адресов страниц сайта

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

Снова открываем настройки плагина Clearfy Pro.

Выбор и установка темы

Тысячи бесплатных шаблонов (тем) почти под любой запрос. Среди них можно найти достаточно интересные варианты, однако проверяйте код на ошибки (Validator V3), а также смотрите на скорость загрузки сайта (RageSpeed Insights) и наличие мобильной версии.

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

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

Проверяю тему Cook It: скорость загрузки сайта составляет 99% для декстопа и 92% для мобильных устройств.

Тему Twenty Twenty-Two, которая по умолчанию шла с WordPress, удалять не рекомендуется, она будет использоваться на случай, если с вашей темой возникнут проблемы.

sitemap.xml и карта html

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

Такой файл можно создать с помощью различных плагинов: XML Sitemaps, Rank Math, Yoast SEO. Плагин XML Sitemaps — специально разработан для создания карты сайта, могу порекомендовать новичкам.

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

Для создания карты html пользователям тем от WPShop достаточно создать новую страницу и разместить шорткод.

Логотип и фавикон

Ни один серьёзный сайт не обходится без собственной символики. Добавьте логотип в шапку и установите фавикон-комплект в корень сайта.

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

SEO оптимизация

SEO — комплекс мер по оптимизации сайта под поисковые системы с целью продвинуть его в ТОП выдачи. Чем выше позиции, тем лучше видимость сайта и его посещаемость. Трафик в свою очередь конвертируется в цель создания проекта (продажу товаров/услуг, заработок на рекламе, донесение информации и т.д.).

Самыми популярными являются плагины Yoast SEO и Rank Math. Можете попробовать оба и выбрать на свой вкус. Смысл работы заключается в прописывании мета-тегов, отслеживании 404 ошибок, установлении переадресаций, контроле за индексацией, формировании сниппетов и анонсов для социальных сетей, настройке хлебных крошек, микроразметки и т.д.

Я отдаю предпочтение Rank Math. Он позволяет выбрать необходимые модули под каждый проект и вести настройку выбранных функций. Использование искусственного интеллекта облегчит оптимизацию для пользователей PRO-версии.

Предлагаю посмотреть видео по настройке плагина.

Персонализация блога

Расскажите читателям о себе: заполните профиль и создайте страницы «Об авторе» и «Контакты». Подключите социальные профили. Создайте свой Граватар.

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

Если в вашей теме не предусмотрен данный функционал, то воспользуйтесь плагином Contact Form 7.

Мультиязычность

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

Структура сайта

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

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

Если вы не разбираетесь в семантике, то лучше закажите её сбор и кластеризацию SEO-специалисту.

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

Политика конфиденциальности и куки

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

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

Уведомление о куки добавляется с помощью плагинов, например Clearfy Pro. Он поможет составить текст, настроить цветовую гамму и местоположение.

Аудит сайта

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

Найдена одна ошибка, связанная с robots.txt. Действительно, мы специально запретили индексирование.

Открыть сайт для индексации

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

В среднем на раскрутку нового сайта уходит 6-8 месяцев, готовьтесь к систематической работе и запасайтесь терпением.

Когда вы будете готовы открыться миру, уберите галочку в настройках о просьбе не индексировать сайт и замените файл robots.txt.

Если вы не знаете как составить правила для роботов, то плагин Clearfy Pro автоматически сгенерирует универсальный виртуальный robots.txt.

Кабинет Вебмастера

Добавьте сайт в кабинет Вебмастера от Яндекс и Google Search Console. Установите счётчики. Теперь вы можете видеть статистику посещений, ошибки и рекомендации поисковых систем.

Первым делом нужно сообщить поисковым системам URL файла Sitemap, задать региональность. Яндекс также позволяет настроить регистр имени сайта (GreekExpert вместо greekexpert).

Опубликованные посты можно принудительно отправлять на индексацию в Google (Проверка URL — Запросить индексирование) и Яндекс (Индексирование — Переобход страниц), тем самым ускоряя процесс и фиксируя авторское право за собой. Недобросовестные вебмастера могут украсть контент, поэтому важно, чтобы ваш материал был проиндексирован первым.

Подписка на новостную рассылку

Предложите читателям подписаться на обновления сайта. Самый простой способ создать рассылку — это воспользоваться плагином Jetpack, а тому, кто хочет самостоятельно оформить формы подписок и письма для подписчиков — советую обратить внимание на MailPoet 3.

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

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