Создание сайтов + Продвижение сайтов


Создание и продвижение сайтов: разработка сайта (ключевые моменты); оптимизация (SEO); поисковое продвижение. Без воды!

Читайте внимательно, помогает!

8 (812) 935-95-35

Создание и продвижение сайтов: как правильно подойти к вопросу


Прежде чем приступать к созданию сайта необходимо определиться с целями и ответить на несколько вопросов:

  • Зачем Вам сайт
  • Какой именно сайт Вам нужен
  • Где и как получить трафик (пользователей)

Рассмотрим на примере коммерческих продающих сайтов.

Подробнее…
Свернуть…

Зачем Вам сайт?

Наверное для того чтобы сайт помогал Вам зарабатывать деньги. Всё верно? Продолжаем.

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

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

Альтернатива – тратить очень много денег и времени на раскрутку кривого сайта, а значит расходовать бюджет неэффективно.

Какой именно сайт Вам нужен?

А какие бывают? И здесь было бы уместно ознакомить Вас с подробной классификацией сайтов, но увы и ах. Однозначной классификации сайтов не существует!

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

Сейчас нас интересуют исключительно коммерческие проекты. Их мы условно разделим на две категории:

  • Интернет-магазины
  • Простые коммерческие сайты

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

Основных разновидностей простых коммерческих сайтов не так уж и много:

  • Сайт-визитка
  • Лендинг (продающая страница)
  • Сайт-витрина
  • Портфолио
  • Промо-сайт

Здесь я попытался классифицировать сайты в зависимости от их назначения, но даже это разделение весьма условно. Никто не мешает прикрутить элементы Landing Page к сайту-визитке, а сайт-витрину дополнить страницами с портфолио готовых проектов. Любые комбинации возможны!

Запомните: базовая структура сайта, контентная модель и основа для дизайна задаются в соответствии с тематикой, прямым назначением ресурса и, обязательно, прицелом на будущее!

Поскольку сайты коммерческой направленности служат для получения прибыли за счёт продажи товаров и услуг, либо их рекламы, на это и стоит делать упор. Их характеристики могут отличаться, однако это не меняет сути – коммерческие веб-сайты должны продавать!

Где и как получить трафик?

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

  • Платная реклама (например Яндекс Директ)
  • Поисковое продвижение (органический трафик)

Платная реклама

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

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

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

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

Источник: Википедия

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

А теперь рекомендую проявить максимум внимания!

Наилучшей конверсией обладают сайты которые относятся к типу так называемых Лендингов (Landing Page). Landing Page – продающая страница или одностраничный сайт.

Если в своих грандиозных планах по привлечению пользователей Вы отдаёте приоритет рекламным площадкам, то именно Лендинг, ну или даже Мульти-Лендинг, станет для Вас достойным кандидатом.

Казалось бы: "Вот оно! Можно дальше не читать. Закажу себе крутейший Landing Page, найду хорошего Директолога и начну наконец зарабатывать!"

Ага. Не тут-то было.

Существует всего одна, но крайне неприятная проблема, у которой, к великому сожалению, отсутствует решение – это мошенники!

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

  • Ремонт компьютеров на дому
  • Средний чек 3500 рублей
  • Выезд мастера в день обращения

Вроде нормально, и так бы оно и было, если бы ни это:

  • Ремонт компьютеров от 100 рублей
  • Выезд мастера бесплатно
  • Скидки пенсионерам

И какое же объявление выглядит привлекательней для среднестатистического "чайника"? Вопрос риторический.

Очень дёшево, бесплатно, халява… Вот Вы и попались. Они уже едут чтобы обуть Вас тысяч на 30, а то и на все 150. Я не преувеличиваю.

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

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

Надеюсь суть Вы уяснили. Выводы делайте сами.

Продвижение сайта на поиске

Что говорит Википедия (слегка отредактировал):

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

Источник: Википедия

Или так (слегка отредактировал):

Поисковая оптимизация (англ. search engine optimization, SEO) – комплекс мер по внутренней и внешней оптимизации для поднятия позиций сайта в результатах выдачи поисковых систем по определённым запросам пользователей, с целью увеличения общего сетевого трафика (для информационных ресурсов), потенциальных клиентов (для коммерческих ресурсов).

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

Источник: Википедия

Немного суховато, ни вполне верно, но в общем информативно.

Таким образом, и поисковая оптимизация (SEO), и поисковое продвижение, раскрутка сайта, да и продвижение сайтов в целом – понятия близкие по смыслу и значению, но различные по форме и способам реализации.

Продвижение сайта

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

Поисковая оптимизация, SEO

Поисковая оптимизация подразумевает тонкую настройку технических и прочих внутренних параметров сайта, в отличии от абстрактного продвижения. Её истиная цель – понравиться поисковой системе. Отсутствие технических ошибок (об этом будет написано далее), скорость работы, удобство для пользователя – это и есть вся суть поисковой оптимизации, SEO.

Поисковое продвижение

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


Разработка сайта: код, контент, дизайн


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

  • Валидность и рациональность кода
  • Скорость загрузки и работы в целом
  • Правильная структура
  • Удобство для пользователя
  • Субъективная ценность контента или сервиса
  • Визуализация и оформление (в последнюю очередь)

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

За первые три пункта отвечает разработчик и Вам, как инициатору, следует определиться с выбором:

  • Разрабатывать сайт с нуля
  • Использовать готовый HTML-шаблон
  • Приобрести CMS (система управления сайтом)
  • Воспользоваться конструктором сайта (не рекомендую)
Подробнее…
Свернуть…

Разработка сайта с нуля

Если производить разработку сайта без использования готовых шаблонов, CMS и конструкторов, Вы обязательно останетесь в выигрыше. На то есть целый ряд объективных причин:

  • Качество кода (если руки откуда надо)
  • Уникальность проекта (хороший сигнал для поисковых систем)
  • Отсутствие каких-либо ограничений
  • Мало кто этим занимается (конкурентное преимущество)

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

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

Использование готового HTML-шаблона

Готовых HTML-шаблонов в интернете достаточно много и заполучить их не трудно. Среди них есть нормальные и не очень, платные и бесплатные.

Плюсы готовых шаблонов для сайта:

  • Легко найти подходящий шаблон
  • Быстро внести соответствующие изменения
  • Запустить проект недорого или бесплатно

Теперь о минусах:

  • Кривой код (почти всегда)
  • Отсутствие уникальности кода и оформления
  • Тяжело доводить до ума
  • Может встречаться вредоносный код

Система управления сайтом

CMS – это аббревиатура от Content Management System, что в дословном переводе означает "система управления контентом", однако в большинстве случаев подразумевается именно "система управления сайтом".

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

Плюсы использования CMS:

  • Экономия времени (всё уже придумано)
  • Знания HTML, CSS, PHP и JS необязательны
  • Удобство работы через пользовательский интерфейс
  • Простота масштабирования (за счёт готовых модулей)

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

Минусы использования CMS:

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

Использование конструктора сайтов

Для начала спросим у Википедии:

Конструктор сайтов (англ. site builder) – программно реализованная сложная система для создания веб-страниц без знания языков программирования. Обычно является отдельным сервисом, но может и предоставляться как дополнительная услуга хостинг-компаниями.

Источник: Википедия

Важно! Пожалуйста, не путайте банальный конструктор с полноценной системой управления сайтом, хоть Википедия и намекает на это.

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

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

Выбор за Вами.

Что к чему: HTML, CSS, PHP и JavaScript

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

HTML

HTML (от англ. HyperText Markup Language – «язык гипертекстовой разметки») – стандартизированный язык разметки веб-страниц во Всемирной паутине. Код HTML интерпретируется браузерами, а полученная в результате интерпретации страница отображается на экране монитора компьютера или мобильного устройства.

Строгим вариантом HTML является XHTML. Он наследует синтаксис XML и является приложением языка XML в области разметки гипертекста.

Источник: Википедия

HTML не является языком программирования.

CSS

CSS (от англ. Cascading Style Sheets – «каскадные таблицы стилей») – формальный язык описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG или XUL.

Источник: Википедия

CSS не является полноценным языком программирования, хотя и способен на многое.

PHP

PHP (от англ. Hypertext Preprocessor – «препроцессор гипертекста»; первоначально PHP/FI (Personal Home Page / Form Interpreter), а позже названный Personal Home Page Tools – «Инструменты для создания персональных веб-страниц») – скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов.

Источник: Википедия

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

JavaScript

JavaScript – мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией стандарта ECMA-262.

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

Источник: Википедия

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

Что такое качественный сайт и код?

Долго объяснять, проще продемонстрировать на примере. Вот что нужно сделать:

  • Запустить Google Chrome на компьютере (мобильный браузер не подходит)
  • Обновить до последней версии
  • Открыть любой сайт (желательно по вашей тематике)

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

Справа вверху находим кнопку "Настройка и управление Google Chrome" / "Дополнительные инструменты" / "Инструменты разработчика". Нас интересует инструмент "Lighthouse". Убираем галочку с пункта "Progressive Web App" и выбираем версию для теста, "mobile" или "desktop".

Запускаем тест, кнопка "Generate report", немного ждём и оцениваем результат.

Результат проверки сайта durianbar.ru с помощью инструмента Lighthouse
Ссылка на проверяемый сайт durianbar.ru

Обратите внимание! Это результат проверки одного из моих сайтов. Используйте Lighthouse для проверки сайтов потенциальных конкурентов и результат Вас удивит. Листайте ниже, анализируйте. Полезной информации много. Кому нужно – тот разберётся.

Валидация кода и почему это важно

Производительность сайта это всегда хорошо, однако его код должен быть ещё и валидным.

Что такое валидность?

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

Валидация HTML

Валидацию HTML-кода требуется производить постранично. Сделать это можно перейдя по ссылке https://validator.w3.org – официальный сервис проверки HTML от консорциума разработчиков W3C. Переходим, вставляем ссылку на проверяемую страницу интересующего нас сайта, нажимаем на кнопку "Check" и анализируем результат.

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

Результат проверки на валидность кода главной страницы сайта durianbar.ru с помощью validator.w3.org
Ссылка на проверяемый сайт durianbar.ru

Валидация CSS

Валидация CSS-кода производится аналогичным способом. Переходим по ссылке https://jigsaw.w3.org/css-validator/ – официальный сервис проверки CSS от консорциума разработчиков W3C. Перешли, вставляем ссылку на проверяемую страницу интересующего нас сайта, нажимаем на кнопку "Проверить" и анализируем результ.

Достойный результат проверки CSS может быть таким:

W3C результаты проверки CSS для https://durianbar.ru (CSS3 + SVG)
Ссылка на проверяемый сайт durianbar.ru

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

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

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

Контент – больше чем просто текст

22.10.2020

Что-то я подустал. Позже допишу.