Какая ошибка была допущена при создании web страницы

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

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

Вложенный тег закрывается позже родительского

<section> 
  <p>Пример текста на сайте.</section>
</p>

В этом примере элемент <p> закрывается после <section>, хотя является вложенным. Это может привести к проблемам в отображении элементов. Такая ошибка повторяется из-за невнимательности и некорректной структуры HTML-документа. Если вы будете следить за вложенностью, то не ошибётесь, где должен закрываться вложенный тег, а где — его родитель.

Правильный способ вложения этих элементов:

<section>
  <p>Пример текста на сайте.</p>
</section>

Пример корректного написания кода, где видна вложенность и шансов совершить ошибку меньше:

<ul class="user-menu">
  <li>
    <a href="#">Закладки</a>
  </li>
  <li>
    <a href="#">Корзина</a>
  </li>
  <li>
    <a href="#">Оформить заказ</a>
  </li>
</ul>

Нет закрывающего тега

<section class="advantages">
  <h2>Что выделяет нас среди конкурентов?</h2>
  <ul class="advantages-list">
    <li>Используем только природные материалы</li>
    <li>Ежедневные отчёты о ходе работ</li>
    <li>Сами соберём мебель для вас</li>
    <li>Бесплатное гарантийное обслуживание в течение 10 лет</li>
</section>

В примере у списка отсутствует закрывающий тег — </ul>. В этом случае список и все его элементы отразятся некорректно. Будьте внимательны, такие мелкие ошибки могут принести много неприятностей.

Правильный вариант:

<section class="advantages">
  <h2>Что выделяет нас среди конкурентов?</h2>
  <ul class="advantages-list">
    <li>Используем только природные материалы</li>
    <li>Ежедневные отчёты о ходе работ</li>
    <li>Сами соберём мебель для вас</li>
    <li>Бесплатное гарантийное обслуживание в течение 10 лет</li>
  </ul>
</section>

Повторяются идентификаторы

<form action="https://echo.htmlacademy.ru" method="post">
  <table>
    <tr>
      <td>
        <label for="login-field">Ваш логин</label>
      </td>
      <td>
        <input type="text" id="login-field" name="login">
      </td>
    </tr>
  ...

<form action="https://echo.htmlacademy.ru" method="post">
  <table>
    <tr>
      <td>
        <label for="login-field">Ваш пароль</label>
      </td>
      <td>
        <input type="text" id="login-field" name="password">
      </td>
    </tr>

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

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

<form action="https://echo.htmlacademy.ru" method="post">
  <table>
    <tr>
      <td>
        <label for="password-field">Ваш пароль</label>
      </td>
      <td>
        <input type="text" id="password-field" name="password">
      </td>
    </tr>

Неправильное использование семантических тегов

<section class="products">
    <h2>Курс для фронтендеров</h2>
    …
    <div>Купить курс</div>
  </section>

Здесь <div> ошибочно используется вместо кнопки <button>.

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

Кнопка <button> отвечает за выполнение определённой функции: добавить в корзину, купить, отправить, проголосовать и другие.

<section class="products">
  <h2>Курс для фронтендеров</h2>
    …
  <button class="button">
    Купить курс
  </button>
</section>

Семантические теги <header>, <main>, <footer> предназначены для выделения основных структурных блоков на странице сайта, а теги <nav>, <section>, <article>, <aside> — для разметки крупных смысловых разделов. Все теги должны быть использованы в соответствии со своим назначением.

• Что такое семантическая вёрстка и зачем она нужна
• Как сделать кнопку в HTML

Отсутствие атрибута alt для изображений img

<img src="image/logo.png" width="200" height="100">

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

<img src="image/logo.png" alt="Логотип" width="200" height="100">

6 простых правил хорошего alt-текста

Определение уровня заголовка по размеру текста на макете

<main>
  <h1>Мы — молодая креативная компания</h1>
  <section class="products">
    <h2>Обувь и аксессуары</h2>
    …
  </section>
  <section class="about">
    <h2>Мы надёжные партнёры и поставщики</h2>
    … 
  </section>
  <section class="companies">
    <h2>Уже много лет мы сотрудничаем с самыми крупными производителями</h2>
    …
  </section>
</main>

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

<main>
  <h1>Интернет магазин «Фактура»</h1>
  <section class="products">
    <h2>Товары</h2>
    …
  </section>
  <section class="about">
    <h2>О нас</h2>
    …
  </section>
  <section class="companies">
    <h2>Производители</h2>
    …
  </section>
</main>

Также неверно обозначать заголовок не специальными тегами h1-h6, а использовать выделение текста тегами <b> или <strong>.

Включать в main то, что повторяется на других страницах

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

<body>
    <h1>Интернет магазин «Фактура»</h1>
  <main>
    <nav class="user-nav">
      <ul class="user-menu">
        <li>
          <a href="https://htmlacademy.ru/blog">Меню</a>
        </li>
        <li>
          <a href="https://htmlacademy.ru/blog">Корзина</a>
        </li>
        <li>
          <a href="https://htmlacademy.ru/blog">Оформить заказ</a>
        </li>
      </ul>
    </nav>  
    <section class="about">
      <h2>О нас</h2>
      …
    </section>
  </main>
  <footer class="main-footer">
      <!-- Подвал сайта -->
  </footer>
</body>

Тег <main> выделяет основное содержание страницы, которое не повторяется на других страницах. И на странице используется один тег <main>. Если навигация одинаковая на всех страницах сайта, то лучше размещать её в <header>.

Неверное обозначение комментариев

Если комментарий неправильно разметить, то он будет виден на странице.

<-- Это комментарий -->

Комментарии начинаются последовательностью <!--, например:

<!-- Это комментарий -->

Не использовать <li> для элементов списка

<ul class="user-menu">
  <div>
    <a href="https://htmlacademy.ru">Закладки</a>
  </div>
  <div>
    <a href="https://htmlacademy.ru">Корзина</a>
  </div>
  <div>
    <a href="https://htmlacademy.ru">Оформить заказ</a>
  </div>
</ul>

Непосредственно в теге <ul> могут находиться только теги <li>, которые обозначают элементы или пункты списка. Пунктов может быть неограниченное количество, но не менее одного.

<ul class="user-menu">
  <li>
    <a href="https://htmlacademy.ru">Закладки</a>
  </li>
  <li>
    <a href="https://htmlacademy.ru">Корзина</a>
  </li>
  <li>
    <a href="https://htmlacademy.ru">Оформить заказ</a>
  </li>
</ul>

Материалы по теме

• Как проверить валидность HTML-разметки
• Как сделать картинку ссылкой
• Флексы для начинающих
• Шаблон HTML-формы

---

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Дизайнеры тратят часы на оттачивание мастерства для тщательной подгонки мельчайших деталей в дизайне веб сайтов, которые выходят из-под их пера. Однако качество кода очень часто остается весьма низким. Вам нужны доказательства? Посмотрите галереи бесплатных шаблонов CSS. 90% шаблонов не пройдут проверку. Причем, основная часть ошибок является весьма примитивными и их очень легко исправить. В данном уроке рассмотрим типовые ошибки в коде HTML, которые мешают успешному завершению проверки.

Зачем проверять код?

Если сайт выглядит отлично в браузере, то зачем проверять код? Типичный вопрос, который задается перед проверкой кода. Но ведь сайт не ограничивается только тем, что видно пользователю. Страницы HTML предназначены для представления данных, а не графических эффектов. Данные должны быть доступными для чтения для всего огромного сообщества людей, которое использует интернет. И читатели могут использовать совсем другие технологии для получения информации, представленной на вашем сайте — например, они могут использовать программу для воспроизведения данных голосом и просто слушать, что написано на вашей странице.

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

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

Общие ошибки

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

Не указан тип документа

Самая плохая ошибка — не использовать Doctype! Отсутствие тега Doctype означает, что браузер будет «догадываться», какой язык использовался для создания документа. Для исправления ошибки нужно указать тип документа вашей страницы.

Не закрыт элемент

Если вы открыли тег где-то в вашем документе HTML, его нужно закрыть в соответствующем месте. Забывчивость в данном вопросе не только приводит к ошибкам  при проверке кода, но и может вызвать серьезные проблемы с шаблоном. На рисунке представлена ситуация, когда автор забыл закрыть тег <p>.

Опускается символ / в самозакрывающихся элементах

Большинство элементов HTML имеет отдельные закрывающие теги, например: </div>. Но есть элементы, такие как input, img и meta , которые являются самозакрывающимися, это означает, что они должны иметь символ / перед закрывающейся скобкой.

Не произведена конвертация специальных символов

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

Неконвертированные символы в URL

В соответствии с  предыдущим пунктом, специальные символы, особенно амперсанд, должны быть кодированы в строках URL. Ссылки на сайты, построенные с использованием PHP, часто содержат переменные с использованием  символа &, их нужно писать с использованием кода HTML &.

Блочные элементы  внутри строчных

Одно из основных правил HTML заключается в том, что блочные элементы НИКОГДА не должны находиться внутри строчных элементов.

Популярный пример ошибки — использование ссылки в заголовке: <a href="#"><h3>bananas</h3></a>

<h3> — блочный элемент, поэтому он должен оборачиваться вокруг ссылки (строчный элемент): <h3><a href="#">bananas</a></h3>.

Отсутствует атрибут alt у изображения

Каждое изображение в документе HTML должно иметь атрибут alt с описанием содержания картинки. Даже если картинка служит для дизайнерских целей, она должна иметь атрибут alt, но в данном случае его надо оставить пустым, например, alt="". В другом случае нужно представить описание содержание изображения.

Использование атрибутов подобных width и height

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

Имя класса или ID начинается с цифры

Имя класса, ID или имя атрибута не может начинаться с цифры. Они могут включать цифры, но не в начале слова.

А какова ситуация с проверкой CSS кода?

В отличие от HTML, CSS используется для визуального представления страницы. Таким образом, вопрос “Если страница выглядит хорошо, то зачем проверять код?” в данном случае звучит более убедительно. Неправильный код CSS не оказывает такого влияния на веб страницы, как неправильный код HTML. Однако проверку стоит проводить на предмет обнаружения опечаток и ошибок в коде. Если вы используете новые свойства CSS3, они сделают ваш документ не прошедшим проверку, так как еще не включены в спецификацию, но если вы уверенны, что все правильно, то на такие ошибки можно не обращать внимание.

Обновлено 28 октября 2021

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

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

Основные проблемы при создании веб-сайтов

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

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

1. Веб-доступность.

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

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

Краткий план проверки сайта на совместимость:

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

3. Оптимальная навигация.

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

4. Читабельность.

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

Этот комплексный аспект включает в себя три элемента:

• шрифт;
• дизайн, модульную сетку;
• цветовую гамму.

Самые распространённые шрифты сегодня – это Times New Roman, Verdana, Arial. К ним привыкли абсолютно все интернет-пользователи. Старайтесь выбирать их или хотя бы такие, которые чётко отображаются на любых экранах и легко читаются. Не забудьте о компоновке и структурировании текстов, а также цвете. Макет статьи (её текстовое представление) должен быть таким, чтобы его было удобно читать внимательно и пробегать глазами по диагонали.

5. Удобство использования.

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

Глупые ошибки, допущенные при разработке сайта

Типичные ошибки, допускаемые веб-разработчиками и дизайнерами:

• Отсутствие логики. Пользователю неясно, что это за сайт и каких действий от него здесь ждут. Например, контакты не вынесены в отдельную категорию, а размещены на странице “О компании” (под длинным текстом об истории фирмы, новостной лентой, списком вакансий).
• Дизайн по шаблону и бесплатная популярная CMS (наподобие Joomla). У такого сайта будут проблемы с продвижением, поскольку сайты с подобными характеристиками ранжируются по своим особым правилам, и обогнать конкурентов в топе по своей тематике будет невозможно.
• Перегруженный цветами и деталями дизайн, множество модальных окон и навязчивых баннеров. Этим часто грешат магазины, и до 75 % клиентов они теряют прямо со страницы корзины. В выдачу проще попасть с простым, лаконичным дизайном.

А вот стандартные проблемы, типичные для интернет-магазинов:

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

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

Шапка:

• отсутствует логотип;
• нет слогана и пояснения о виде деятельности фирмы;
• указан только мобильный телефон, городского нет;
• e-mail на бесплатном почтовом сервисе, а не на собственном домене;
• нет информации о графике работы магазина;
• вся шапка сделана единым изображением, текст невозможно скопировать;
• нет ни формы заявки, ни заказа обратного звонка.

Главное меню:

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

Текстовый контент:

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

Сниппет, заголовок:

• выглядит непривлекательно (что снижает количество переходов на сайт из поисковика).

Подвал:

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

Раздел “О нас”:

• отсутствуют фото работников и главных лиц компании;
• не указан e-mail.

Раздел “Контакты”:

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

Вы наверняка согласитесь, что к сайту, на котором последняя новость датируется прошлым годом, а в разделе “О нас” присутствует только пара строк текста, доверия будет мало (и к самой организации тоже). И это, не считая проблем с оптимизацией сайта.

Частые проблемы новорожденных сайтов

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

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

Проблема № 1. Поисковики не индексируют сайт.

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

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

Иногда новый сайт индексируется, но неправильно и не в полном объёме. Причиной часто становится неправильно настроенная карта сайта (файл с перечнем всех страниц, которые нужно проиндексировать, и прочими важными параметрами) – sitemap.xml.

Метаданные тоже нужно заполнять правильно, чтобы не ломать голову над проблемой индексации сайта. Так, главная страница должна иметь человекопонятный, осмысленный заголовок типа “ООО Ирис – интернет-магазин для садоводов”, а не просто “Главная”.

Проблема № 2. Сайт проиндексировался с демо-контентом.

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

Проблема № 3. Не склеились зеркала (версия с www и без www).

Поисковые роботы воспринимают домены oursite.ru и www.oursite.ru как две совершенно разных.

Перед тем, как выкатывать сайт в продакшн, необходимо склеить зеркала, чтобы поисковики не путались. Люди набирают URL’ы по-разному: некоторые так привыкли к www, что на автомате начинают с него, и это нужно учитывать.

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

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

Проблема № 4. С удалённых страниц не настроена переадресация.

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

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

Проблема № 5. Сайт неадаптивен и медленно загружается.

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

То же самое касается и скорости загрузки. Медленный сайт раздражает посетителей. Они с большой вероятностью покинут его и уйдут на конкурирующие площадки. SEO тоже страдает: у вас нет шансов подняться в топ, если сайт “тормозит”.

Типичные причины медленной загрузки:

• Неудачно выбран хостинг, система настроена некорректно.
• На сайте много “тяжёлой” графики.
• Скрипты (счётчики посещаемости, виджеты и т. п.) тормозят загрузку.

Многие из этих проблем не свойственны движку 1С Битрикс, сам по себе он довольно “шустрый” (при условии, что сайт сделан по композитной технологии), и многие его шаблоны по умолчанию адаптированы под мобильные устройства.

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

Типичные проблемы коммерческих сайтов

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

1. SEO? Какое ещё SEO?

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

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

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

Спустя пару-тройку месяцев подведите итоги: посмотрите, как изменились показатели посещаемости. И на основании этого примите решение о том, нужно ли вашему сайту полноценное SEO.

2. Не выработаны KPI, никто не занимается их мониторингом.

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

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

3. Посадочные страницы неэффективны.

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

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

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

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

4. Нет призывов к действию.

Если на странице нет CTA-элементов (Call to Action – призывов к действию), то посетитель едва ли поймёт, что ему нужно делать. Если вы продаёте услуги, то целевым действием является оформление заявки, а если торгуете товарами, то заказ продукта или обратного звонка.

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

5. Нет стратегии работы с внешней средой.

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

• Регистрация в интерактивных картах, агрегаторах, справочниках (Яндекс.Справочник, Google Мой Бизнес и др.).
• SMM – создание и продвижение профилей в соцсетях.
• Ведение YouTube-канала.
• Регистрация в каталогах и на других ресурсах по вашей тематике.
• Крауд-маркетинг: общение в комьюнити, на форумах.
• Закупка и ручные способы линкбилдинга – получения внешних ссылок.

Специфика проекта определяет, какие из этих направлений необходимо охватить и сколько усилий затратить. Также влияют ниша, регион, где работает бизнес, и ситуация на рынке (прежде всего конкуренция). Как бы то ни было, есть минимальный объём работы по каждому направлению, без которого не обойтись: внешние факторы тоже влияют на ранжирование и способны создать сайту проблемы в онлайн-среде.

6. Множество технических неполадок на сайте.

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

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

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

7. Устаревший дизайн, неактуальные технологии.

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

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

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

Серверные проблемы сайта

Обычно пользователь сталкивается с 404 ошибкой, но иногда натыкается и на серверные. Они исправляются очень быстро. Эти ошибки подразделяются на несколько типов, каждый со своими методами “починки”. Обнаружить их сложно (они возникают случайно, поэтому при ручном тестировании их не всегда удаётся отловить, а поисковые машины их не отслеживают), но находить и исправлять подобные проблемы на сайте необходимо вне зависимости от их количества. Воспользуйтесь специальными функциями облачного хранилища или хостинга, изучите серверные логи.

• Ошибки на хостинге.

Ошибки с HTTP-кодами 500 и 403 – исчезающе редкие, но иногда всё же встречаются, если хостинг настроен неправильно или отдельные настройки поменялись. Некорректные права доступа к веб-ресурсу приводят к ошибке доступа – 403. Чтобы понять, как исправить эти права, обратитесь в техподдержку своего хостинга. Неправильный формат размещённого на хостинге .htaccess-файла (например, если он был отредактирован) могут породить 500 ошибку.

• Ошибки на сервере.

Намного больше проблем на сайте создают ошибки на стороне сервера – 504, 503 и 502. Из-за них ресурс в принципе не может нормально работать. Ошибка с кодом 504 означает, что время обработки скриптов превышено (дело либо в самих скриптах, либо в увеличенной нагрузке на хостинг или недостаточности его ресурсов); 503 – о том, что сейчас хостинг получает слишком много запросов и не способен все их обработать; 502 – о проблемах в скриптах приложения.

Серверные ошибки – это потерянные посетители сайта. Они обнуляют конверсию (в отличие от 404 ошибки, например). Исправить их может только ваша команда, ответственная за веб-разработку. Чтобы получить подробную информацию о серверных ошибках, воспользуйтесь логами хостинга – error.log – и отладочную информацию. Для корректировки и анализа необходимы специальные сервисы.

• Отказы сервера.

Этот вид ошибок появился довольно недавно, когда nginx, фиксирующий их в логах, стал широко распространяться. Ошибка 499 сигнализирует о наличии у сайта проблем с соединением, причем на стороне браузера в момент получения каких-либо данных с сайта. Причины две: либо хостинг не успевает ответить на запрос, а пользователь устаёт ждать и уходит, либо интернет-канал очень слабый (у пользователя или на хостинге), что замедляет передачу данных.

Для начала проверьте скорость обработки запросов хостингом (оптимальное время до 500 мс на каждый запрос), чтобы исключить первый вариант. Если отказов очень много, попробуйте использовать CDN либо найти другого хостинг-провайдера.

Неочевидные технические проблемы сайта, мешающие SEO-продвижению

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

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

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

Если вы задались целью “прокачать” свой веб-ресурс, проверьте его на наличие следующих проблем:

1. Сайт медленно грузится.

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

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

Замерить скорость можно посредством сервисов Pingdom Website Speed Test и GTmetrix. Они также предоставляют рекомендации по улучшению этого показателя.

2. Страницы дублируются.

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

Почему дубли превращаются в головную боль для веб-разработчиков? Потому что похожие или одинаковые метатеги на страницах с разными URL’ами мешают поисковым роботам оценить релевантность и проранжировать такие страницы. Обилие дублей ухудшает позиции всего сайта. Решение – уникализировать эти страницы и проставить атрибут rel=”canonical” (либо meta name=”robots”).

Для поиска дублей существуют краулеры вроде NetPeak Spider и Screaming Frog SEO Spider. Просканируйте сайт одним из этих инструментов и после этого сверьте метатеги title и description у проблемных страниц. Если они совпали, перед вами дубль.

В Google Search Console есть специальный отчёт, доступный в категории “Вид в поиске” (выберите там “Оптимизацию HTML”). В пунктах “Повторяющиеся заголовки”, “Повторяющиеся метаописания” есть сведения о дублях.

3. Тексты неуникальны.

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

Не использовать “копипаст” самим – одна часть проблемы. Есть и другая: материалы с вашего ресурса могут процитировать и скопировать другие сайты, и это тоже повлияет на ваши позиции. Встречаются и недобросовестные копирайтеры, компилирующие свои тексты из разных источников вместо того, чтобы честно писать их самим. Желательно всегда проверять контент, который вам присылают подрядчики.

В этом вам помогут программы Advego Plagiatus и eTXT Антиплагиат. Для списка страниц можно использовать пакетный режим на портале Content-watch.ru.

4. Посадочные страницы слабо проработаны.

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

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

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

• Расширьте семантику запросов, под которые они оптимизированы.
• Добавьте ещё текст, причём полезный и информативный.
• Загрузите видеоролик, дополнительные фото продукта.
• Упорядочьте, отформатируйте тексты, чтобы их легче было читать.

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

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

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

5. Ключевые запросы использованы неправильно.

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

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

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

6. Вёрстка неадаптивна.

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

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

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

7. Взлом сайта, внедрение вирусного кода.

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

Устранить последствия хакерской атаки надо максимально быстро! Ведь невозможно предугадать дальнейшие действия преступников. Срочно закройте все уязвимости. Желательно также защитить сайт каким-нибудь дополнительным модулем. И, кстати, не забывайте обновлять CMS вовремя: разработчики движком обычно следят за безопасностью и постоянно улучшают защиту сайтов.

Чтобы не пропустить уведомление от поисковой системы, заглядывайте в “Диагностику” Яндекс.Вебмастера а “Проблемы безопасности” Google Search Console.

8. Проблемы с внутренними ссылками.

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

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

Порядок действий прост и очевиден: найти “плохие” ссылки и убрать их с ресурса – битые заменить актуальными, где возможно, а нежелательным бэклинкам прописать nofollow или удалить их.

Бесплатное приложение Xenu Link Sleuth позволяет быстро просканировать сайт. В итоге вы получите список битых и прочих проблемных линков, выделенных разным цветом. Их можно отсортировать по статусу, посмотреть URL properties для каждой (в меню, вызываемом правой кнопкой мыши) и увидеть, на каких страницах эта ссылка встречается. Осталось только поправить её или удалить.

Поиск проблем на сайте, если неясно, что проверять

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

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

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

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

О некоторых из них Google и Яндекс уведомляют специальным оповещением, но, к сожалению, не обо всех и не всегда.

• Наложены ли санкции на сайт?

О том, что сайт оказался под санкциями, свидетельствует откат ниже 30-й позиции после того, как перед этим сайт по группе запросов вышел в топ 10-20 и находился там в течение пары недель.

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

Откат после подъёма семантического кластера и пребывания сайта в топе в течение 10 дней, наоборот, говорит о проблемах в оптимизации. То есть дело не в фильтрах. Необходимо проверить сайт на типичные проблемы и поработать над ошибками.

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

• SEO-ссылки и естественные ссылки в дисбалансе.

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

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

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

Поисковики ценят полезные линки, которые не просто привлекают внимание посетителя, но и несут ценную информацию.

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

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

• Анализируем ссылочный профиль.

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

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

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