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

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

Чтобы создать сайт, нужно сделать всего 9 шагов.

Приобрести хостинг

Среди множества российских компаний лично я разместил этот сайт на хостинге от www.netangels.ru. Проверить это Вы сможете через www.whois.com, введя доменное имя моего сайта. Я размещаю свои сайты на данном хостинге с 2009 года и очень доволен ценой и качеством услуг. Для тех, кто интересуется хостингом в Северной Америке – www.cloudflare.com и www.bluehost.com, в Европе —   www.fornex.com.

Зарегистрировать доменное имя

Часть хостинговых компаний предоставляют данную услугу «бесплатно» при приобретении хостинга, включая ее в стоимость хостинга. Другая часть, например, www.netangels.ru, выделяет регистрацию домена отдельной строкой. Если хотите приобрести доменное имя в другой компании, то самый крупный регистратор доменных имен в России – это www.reg.ru (доля в мире – 3.5%), а крупнейший в мире – www.godaddy.com (доля в мире – 57.2%, есть русскоязычный сайт).

Не тратьте кучу времени на придумывание красивого доменного имени. Несмотря на то, что многие считают, что выбор правильного звучного доменного имени очень важен, вспомните, как часто вы забиваете в адресную строку название какого-то сайта. Я думаю, это бывает крайне редко. Обычно Вы заходите в Яндекс или Google и вводите название интересующего сайта там. Единственное, что, возможно, стоит отразить в доменном имени, с точки зрения SEO-продвижения, так это не более 2 ключевых слов из основной тематики сайта, согласно выбранной рыночной нише. Если сделать 3 и более слов, то поисковые системы могут отфильтровать ваш сайт за переоптимизацию.

Установить WordPress

NetAngels дают возможность выбрать одну из нескольких бесплатных систем управления контентом (CMS – Content Marketing System) – грубо говоря, конструкторов сайтов. Существует множество разных CMS, но более 35% сайтов в мире, по данным  Web Technology Surveys, сделаны на бесплатной, регулярно обновляемой и имеющей несколько тысяч тем и более 57000 плагинов CMS WordPress. Даже такие серьезные сайты, как Entrepreneur c 12.7 миллионами посещений в месяц, используют именно эту систему. Я также решил бесплатно создать сайт с нуля на WordPress).

Выбрать тему WordPress

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

Критерии выбора темы

При выборе темы обратите внимание на следующие ее характеристики:

• Быстрота загрузки (чем быстрее загружается ваш сайт, тем меньше вероятность потерять потенциального клиента).
• Дружелюбность для SEO (оптимизация сайта, пригодная для начала внешнего продвижения).
• Респонсивность верстки (адаптация сайта под любой размер экрана).
• Возможности кастомизации (наличие большого количества настроек, если Вам это надо).
• Многоязычность (поддержка различных языков, если Вам это надо).
• Подключение большого количества плагинов. Однако помните, чем больше плагинов подключите, тем медленнее будет грузиться Ваш сайт.
• Возможность подключения WooCommerce (плагин для онлайн-магазинов).
• Соответствие требованиям GDPR (европейского стандарта сбора и хранения конфиденциальных данных, если Вам это необходимо).
• Рейтинги тем и отзывы тех, кто уже пользуется соответствующей темой.
• Частота обновления темы и когда она обновлялась в последний раз.

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

Мой выбор тем

Я предлагаю Вам обратить внимание на темы, представленные ниже и соответствующие вышеперечисленным критериям. Хоть их интерфейс и разработан на английском языке, не стоит беспокоиться из-за этого. Более 6 млрд.чел. не говорят на английском, но вполне успешно используют Гугл- или Яндекс-переводчик. Онлайн-переводчики позволяют понять основной смысл переводимых текстов. Кроме того, Вы всегда можете задать мне Ваши вопросы в комментариях внизу статьи:

• GeneratePress – одна из наиболее популярных качественных и недорогих тем с большим количеством шаблонов, на основе которых можно создать свой собственный сайт с нуля (от блога до онлайн-магазина). Эта тема считается одной из самых быстрых и надежных. А еще разработчик имеет очень хорошую службу технической поддержки. Она помогает в кратчайшие сроки решить любую проблему с созданием сайта на базе данной темы. Проверил на себе – при необходимости могу выложить скриншоты переписки с техподдержкой. Базовая версия темы – бесплатно, расширенная — $49.95. Чтобы долго не мучится с дизайном сайта, я купил расширенную версию GP Premium. В библиотеке сайтов выбрал шаблоны под названием «Nouveau». Проверить это Вы сможете через www.isitwp.com, введя доменное имя моего сайта.
• Storefront – очень быстрая крутая тема для магазинов, сделанная разработчиками самого популярного плагина для онлайн-магазинов WooCommerce. Базовая версия – бесплатно, пакет необходимых плагинов — $69.
• Divi – самая популярная в мире премиум-тема WordPress с высоким уровнем кастомизации. Годовая подписка — $89, бессрочная покупка — $249.

А если хотите всё-таки подобрать что-нибудь бесплатное, то 1283+ бесплатные темы вы найдете на https://justfreethemes.com/. Выбрав там понравившуюся тему, рекомендую ее добавлять через ваш WordPress. Это гарантирует «чистоту кода» и работоспособность темы. У меня были случаи, когда найденные в Интернете темы я не находил в WordPress. И не забывайте про вышеуказанные критерии выбора темы.

Установить плагины

Плагины — это программные дополнения, которые влияют на функциональность Вашего сайта: его безопасность, скорость, SEO и другие характеристики. Не стоит устанавливать все понравившиеся плагины. Чем больше плагинов Вы установите, тем медленнее будет работать Ваш сайт. Выберете те, которые наиболее критичны для Вас. Где-то можно обойтись без автоматизации, например, самостоятельно уменьшая размер изображений. А какие-то вопросы закроет хостер, например, с ежедневным созданием резервных копий сайта.

Наиболее важные плагины

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

• All In One WP Security – лучшее комплексное решения для увеличения безопасности WordPress. Заменяет ряд плагинов таких, как Wordfence Security, Loginizer Security, UpdraftPlus — Backup/Restore. Как настроить, смотрите здесь.
• Yoast SEO — первое по-настоящему комплексное специализированное SEO-решение для WordPress. Включает в себя анализ содержимого на странице, XML-карты сайта и многое другое.
• W3Total Cache – имеющий самый высокий рейтинг, самый комплексный плагин для повышения производительности сайтов. Значительно улучшит скорость и удобство работы Вашего сайта.
• MonsterInsights — самый простой способ установить Google Analytics, чтобы отслеживать действия посетителей вашего сайта.
• Elementor — лучший визуальный конструктор для страниц, использующий метод перетаскивания интересующих блоков (drag&drop). С помощью него Вы можете вставлять и форматировать фото, видео, тексты и другие элементы.
• WooCommerce – лучший инструмент для электронной коммерции, который поможет вам продать всё что угодно.
• Sassy Social Share — вставляет кнопки 33 социальных сетей и мессенджеров в посты и на страницы.
• wpDiscuz — позволяет пользователям оставлять комментарии на сайте, а администратору сайту модерировать их.
• Cookie Notice — уведомление о cookie-файлах. Позволяет Вам соблюдать правила европейского законодательства о cookie-файлах.
• Everest Forms – бесплатный конструктор контактных форм методом перетаскивания  интересующих блоков (drag & drop). Позволяет легко создавать простые и сложные формы для любых целей. Подойдет на первое время, пока не потребуется массовая рассылка писем по базе подписчиков.
• SendinBlue – одна из лучших платформ email-маркетинга по демократичной цене.
• Polylang – добавляет многоязычность на сайт. Создает под каждую страницу и пост соответствующие страницы и посты на выбранных языках с последующей самостоятельной вставкой текста без автоматического перевода.

Плагины средней степени важности

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

• UpdraftPlus — Backup/Restore – один из лучших плагинов для автоматического резервного копирования и восстановления вашего сайта. Может создать резервные копии на Вашем компьютере, на Amazon S3, Dropbox, Google Drive, Rackspace, (S) FTP, WebDAV или в электронной почте. Но у Вас в этом плагине у Вас не будет необходимости. Во-первых, NetAngels предоставляет услугу ежедневного резервного копирования бесплатно. А во-вторых, в «All In One WP Security» Вы можете активировать эту функцию.
• Akismet Anti-Spam — один из лучших в мире плагинов защиты от спама. Хорошие почтовые платформы и сервисы для отправки комментариев имеют встроенную Recaptcha, а также возможность премодерирования любых комментариев, настройки черных списков и прочее. Это позволяет обойтись без лишних плагинов на сайте.
• Autoptimize – один из лучших инструментов для минимизации Вашего кода. Однако его использование может привести к неработоспособности некоторых других плагинов таких, как Everest Forms, Mailchimp Top Bar и других, связанных с динамическими элементами, которые открываются и скрываются по запросу.
• Wordfence Security — антивирус, брандмауэр (firewall). Предназначен для сканирования на наличие вредоносных программ. NetAngels предоставляет данную услугу бесплатно. А у «All In One WP Security» есть аналогичные функции.
• Google XML Sitemaps – плагин для создания карты сайта и уведомления поисковых систем об обновлениях на сайте. Все говорят, что это очень важный плагин, который обязательно необходимо подключить. Но если Вы установили Yoast SEO, то там уже есть этот функционал. Кроме того, Google XML Sitemaps может банально вступить в конфликт с Yoast SEO.
• Связка WPSSO и WPSSO JSON – 2 плагина, настраивающих микроразметку. Ситуация аналогична необходимости установки Google XML Sitemaps.
• Easy Table of Contents – все заголовки в формате Н2 собирает в таблицу в начале поста. Это упрощает навигацию по посту для людей и автоматизирует выдачу структуры поста в Google.

Неважные, но полезные плагины

• OptinMonster – один из лучших инструментов для всплывающих окон и контактных форм.
• Quick Page / Post Redirect — отлично подходит для 301 переадресации.
• Regenerate Thumbnails и ShortPixel — плагины оптимизации размера изображений. Вместо этих плагинов Вы можете сами до загрузки изображений на сайт уменьшить их размер. Используйте для этого https://www.img2go.com/ru, www.tinypng.com или новый сервис от Google «Squoosh»: https://squoosh.app/editor.
• WordPress Ping Optimizer – настраивает частоту оповещения поисковых систем об обновлениях на сайте. Помогает не попасть в списки ping-спамеров, когда кто-либо при публикации окончательной версии поста периодически нажимает кнопку «Опубликовать».
• Google Tag Manager используется для расширенного управления измерениями/ рекламными тегами и персонализации сайта.
• WP-PageNavi — добавляет более продвинутую навигацию по страницам на ваш сайт для поисковых машин.
• ThirstyAffiliates — помогает изменить целевой URL лишь в одном месте вместо его изменения в десятках постов, делает безопасные redirects ссылок, защищая их от удаления или замены вредоносными программами в браузере наших посетителей, отслеживает клики по ссылкам с формированием отчетов, применяет геотаргетинг с показом ссылок в соответствии с геолокацией посетителя, автоматически проверяет работоспособность ссылок.
• Broken Link Checker – позволяет находить недействительные ссылки. Можно периодически его активировать, проверять «битые» ссылки, всё исправлять и затем деактивировать до следующего раза, чтобы не перегружать сайт.
• Pluso – сервис для вставки ссылок на социальные сети (генерирует код для вставки его в любой пост или на страницу). Мне достаточно стандартных возможностей для вставки иконок социальных сетей от Sassy Social Share.
• Rocketbots или Chatbot – автоответчики-чатботы для сайта.

После установки плагинов нажмите под каждым из них кнопку «Активировать». Далее необходимо у каждого плагина зайти в раздел «Настройки», если он есть. Там, где рекомендуется поставить галочки в чек-боксах, сделайте это и нажмите кнопку «Сохранить». Всё готово – плагины заработали!

Базовые версии плагинов – бесплатные, а расширенные – за деньги.

Настроить SEO-продвижение

Оптимизация настроек темы WordPress

• Общие: добавление заголовка сайта, слогана и URL.
• Чтение: отображение главной страницы, поисковая система видимость.
• Постоянные ссылки: использование для каждого поста и страницы URL в формате: https://www.blog.com/%postname%. Чем короче URL, тем выше рейтинг сайта.

Установка и настройка специального SEO-плагина Yoast

• Подключение после установки Yoast Яндекс.Вебмастера, Google Search Console, инструментов вебмастера Bing, Mail. Подробные инструкции, как это сделать, можно найти в этой и этой статье.
• После установки Yoast данный плагин появляется в нижней части каждого поста и страницы. Необходимо каждый пост и страницу настроить в соответствии с рекомендациями, которые предлагает Yoast. Проблемные зоны выделены оранжевым и красным цветом.
• В настройках Yoast «SEO — Advanced — Permalinks» надо убрать флажок «Remove stop words from slugs». В противном случае Yoast будет удалять все предлоги, порой изменяя первоначальный смысл ключевой фразы на противоположный.
• Изменение таксономий (рубрик и тегов для группировки записей, рубрик ссылок, форматов постов). Эти настройки изменят порядок индексации содержимого нашего сайта нашей картой сайта (sitemap). Когда еще мало постов на сайте, то можно отключить теги в результатах поиска, а также в архивах дат. Бесплатные плагины для работы с таксономиями — Simple Taxonomies by Yoast, Pods, Types.
• Добавление учетных записей социальных сетей и включение карт Twitter.
• Включение файла robots.txt.

Подключение к бесплатным сервисам Google

Для того чтобы настроить SEO-продвижение, не нагружая Ваш сайт плагинами, можно подключить ряд следующих бесплатных сервисов от Google:

• Google Search Console – это бесплатный сервис, который позволяет вам контролировать, поддерживать и устранять неисправности вашего появления в результатах поиска Google. При настройке создайте четыре версии вашего блога (www/non-www и http/https) и убедитесь, что основной учетной записью является версия https. Другие элементы для оптимизации включают международный таргетинг, предпочитаемый домен и отправка вашей карты сайта.
• Check My Links – расширение для поиска неработающих ссылок. Все плохие ссылки можно скопировать в буфер обмена одним щелчком мыши! Коды ответов HTTP и полные URL-адреса неработающих ссылок публикуются в журнале консоли (находится в «Chrome > Tools > Javascript Console» или «Ctrl + Shift + J»).
• Redirect Path позволяет быстро справиться с обнаружением и исправлением некорректных ссылок, ошибок 301 и 500.
• Word Counter Plus считает количество выделенных слов, знаков, включая пробелы, знаки препинания, что важно для написания метатегов и постов, чтобы повысить видимость сайта для поисковых систем.

Работа с ключевыми словами

• Отбор ключевых слов и фраз с уровнем конкуренции до 0.5 или KD (Keyword Difficulty) до 50 с помощью SEMrush. Использование их в заголовках, тегах заголовков (2-3 слова: теги заголовка являются невероятно важной частью оптимизации сайта, т.к. их сканируют поисковые системы, используя ключевые слова в теге заголовка для определения цели страницы), URL (3-5 слов после знака «/», включая главное ключевое слово и при необходимости предлоги, т.к. без предлогов смысл фразы может кардинально измениться), метаописаниях (это небольшие фрагменты текста – не более 320 символов, которые описывают содержимое страницы для поисковых систем) и текстах постов (Yoast внизу каждого поста даст рекомендации по достаточности количества ключевых слов в посте), в именах файлов изображений (ALT tags) и видео.
• Добавление в тексты постов и метаописания слов, семантически связанных с ключевыми словами, с помощью LSIGraph (генератора ключевых слов LSI), например, технологическая компания Apple или фрукт Apple, чтобы отсекать нерелевантный трафик и сделать более насыщенным по содержанию текст.
• Использование длинных ключевых фраз, т.к. они наименее используемые и конкуренция по ним ниже. Это позволит быстрее поднять рейтинг сайта, чем по наиболее частотным фразам. Достаточный для старта ежемесячный трафик по таким ключевым словам составляет от 1 000 до 5 000 посещений.
• Выявление ключевых фраз, по которым первая страница результатов поиска Google имеет хотя бы один сайт с KD менее 30.
• Проверка, изменялась ли история позиций SERP по рассматриваемым ключевым словам за последние 6 месяцев. Если да, то новые сайты могут попасть в поисковую выдачу относительно легко.

Работа с заголовками

• Заголовки постов должны иметь шрифт Н1 (обычно темы WordPress автоматически устанавливают данный формат названий статей).
• Они должны быть не более 60 знаков, включая пробелы и знаки препинания. В противном случае, они всё равно будут обрезаны поисковыми системами.
• Ключевые фразы лучше размещать в начале или ближе к началу заголовка (URL).
• В заголовках стоит использовать числа, т.к. это повышает кликабельность поста (уровень вовлеченности потенциальных читателей). При этом нечетные числа работают лучше, чем четные.
• В конце заголовка целесообразно ставить год, если тема актуальна.
• После заголовка поста стоит вставить небольшой вводный абзац, о чем пост, с основными ключевыми, чтобы Google идентифицировал, как можно раньше, содержание статьи.
• Заголовки основных разделов постов и страниц должны иметь размер шрифта H2. После заголовка основного раздела лучше поставить вводный абзац (обычный шрифт), после которого одним предложением с включением хотя бы одного вторичного ключевого слова или семантически связанных ключевых слов обозначить, о чем раздел (тем же размером шрифта, что и вводный абзац, но жирным шрифтом, с красной строки).
• В свою очередь, заголовки подразделов на страницах и в постах должны иметь размер шрифта Н3 и быть пронумерованы. Должно быть не менее 5 подразделов, тогда Google идентифицирует данный формат как имеющий характерные особенности фрагмент и может вынести его на Zero-позицию в начале поисковых выдач.

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

В начале, в середине и в конце текстов постов необходимо размещать ссылки на другие посты и страницы нашего сайта. Это увеличит время пребывания посетителей на сайте (time on page) и уменьшит показатель отказов (bounce rate) – важные метрики Google, а также повысит вероятность взаимодействия читателей с большим количеством нашего контента.

Прочие настройки

• Микроразметка (schema markup).
• Комментарии: наличие качественных комментариев длиной не менее 50 знаков повышает рейтинг сайта в поисковых системах.
• Социальные сети: наличие ссылок на собственные аккаунты в социальных сетях.
• Обновления: периодические обновления постов и страниц повышают рейтинг сайта в поисковых системах. В то же время устаревший контент не попадает в расширенные результаты Google.
• SEO-аудит: периодическое проведение SEO-аудита с помощью SEO Analyzer и Ubersuggest от Nail Patel.

Ускорить загрузку сайта

Скорость загрузки сайта на мобильных устройствах и компьютерах – один из основных факторов рейтинга в Google. Чем быстрее загружается сайт, тем выше его рейтинг в поисковой выдаче (https://backlinko.com/search-engine-ranking).

Для ускорения загрузки необходимо сделать следующее:

• Установить Content Delivery Network (CDN – сеть доставки контента). Это географически распределенная группа серверов, обеспечивающая более быструю доставку интернет-контента. Если вы используете Bluehost, вы можете легко подключиться к CDN, например Cloudflare, Amazon CloudFront или Akamai, чтобы значительно увеличить скорость вашего сайта.
• Оптимизировать плагины под скорость загрузки сайта:
  • Autoptimize – необходимо убедиться, что установлены следующие флажки – «Optimize HTML Code», «Optimize JavaScript Code», «Aggregate JS files», «Optimize CSS Code», «Aggregate CSS File»s, а также «Aggregate Inline CSS».
  • «a3 Lazy Load» используется для загрузки изображений после начальной загрузки страницы.
  • «ShortPixel» подходит для сжатия изображений. Необходимо убедиться, что файлы в формате PNG преобразованы в JPEG.
  • Периодически очищать файлы от цифрового мусора в виде рабочих версий, комментариев и прочего, что оставляют дизайнеры.
  • Загружать полностью оптимизированные видео. Заголовки должны быть короткие, привлекательные и содержать ключевое слово. Заставка для видео является решающим фактором, т.к. влияет на то, будет ли кто-то смотреть данное видео. Заставка даже важнее, чем заголовок.
  • Удалить все плагины, которые не используются.
  • Не использовать плагин Jetpack, т.к. он замедляет работу сайта из-за своей громоздкости.
• Проверить скорость загрузки сайта для мобильных устройств и компьютеров после проведенных действий можно в один клик с помощью сайта Google PageSpeed Insights или расширения к браузеру Chrome Google PageSpeed ​​Chrome Extension. Необходимо смотреть отдельные вкладки для мобильных и для компьютеров в левом верхнем углу сервиса. Если сайт слишком долго грузится, сервис покажет конкретные слабые места и порекомендует методы ускорения сайта. Для объективности анализа рекомендую использовать также https://gtmetrix.com/ и https://tools.pingdom.com/.

Создать уникальный контент

Написать уникальные (нескопированные) статьи, добавив туда инфографику и красивые картинки, чтобы повысить конверсию посетителей в подписчиков.

Проверить тексты на уникальность и наличие ошибок можно с помощью сервисов: Text.ru, Главред, Адвего, Content-Watch, Monster Antiplagiat Pro, eTXT Antiplagiat, Istio.  Необходимо использовать несколько сервисов, чтобы сравнить полученные результаты, т.к. алгоритмы сервисов часто дают сбои. Обзор плюсов и минусов указанных сервисов можно посмотреть на этом сайте.

Бесплатные красивые фото можно скачать на www.unsplash.com, www.pexels.com.

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

• «Главная» (рассказывает кратко о Вашем ценностном предложении, услугах и дает быстрый доступ к лучшим постам).
• «Блог», где размещены все посты.
• «О нас».
• «Контакты».
• «Пользовательское соглашение».
• «Политика конфиденциальности».

Сделать окончательные настройки сайта

• Проверить, правильно ли размещен URL сайта в общих настройках.
• Убедиться, что основная карта сайта находится в Yoast и нет других плагинов таких, как JetPack, предоставляющих отдельную карту сайта.
• Посмотреть, как работает Redirect 301 при переходе с другого веб-сайта.
• Проверить отображение сайта на нескольких браузерах и устройствах. Если загружены наиболее популярные темы WordPress, то проблем с респонсивностью сайта не будет.
• Разместить доменное имя сайта на приобретенном хостинге. Хостинг должен быть ближе к потребителям. Если аудитория российская, то хостинг должен быть в России. Это важно для гео-детерминированных поисков.
• Получить SSL-сертификат, который свидетельствует о безопасном соединении с Вашим сайтом и повышает рейтинг сайта.
• Снять флажок «Запрещать поисковым системам индексировать этот сайт» в разделе «Настройки / Чтение».

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