Чат PHP-разработчиков
Логические задачи с собеседований
SEO верстка сайта: как это делается

Как создается грамотная SEO верстка сайта

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

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

Базовые требования

Сайт может состоять как из одной (лендинг), так и из множества страниц, на каждой из которых верстальщик должен предусмотреть возможность создания уникального заголовка (Title), описания (meta-тег Description) и URL-адреса. Последний должен быть человекопонятным, то есть отражать общее содержимое страницы, на которую перешел человек. Если речь идет о новости на информационном портале, URL такой страницы может выглядеть, как заголовок статьи, переведенный на латиницу. Важно соблюдать требования для всех страница сайта, ведь каждая из них может привлекать трафик, не только главная.

В процессе верстки важно следить за тем, чтобы теги заголовков (H1) не были сквозными. Если они становятся общими для всех страниц с пагинацией, фильтрами, получается, что заголовок дублируется по всем страницам, и нет никакой возможности их оптимизировать и сделать привлекательными для поисковых систем. Проверить это можно с помощью различных сервисов. Конкретного исполнителя рекомендовать не буду, но могу посоветовать отличный сайт с рейтингом сервисов для интернет-бизнеса https://imhocloud.com/.

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

Чтобы проверить, как выглядят страницы сайта для поисковика, достаточно вбить в строку поиска site:адрес сайта и посмотреть, какие страницы проиндексированы, как они выглядят. Яндекс и Гугл может выдать до тысячи страниц, важно просмотреть большую их часть на предмет ошибок, добавить ключевые слова.

Что должен сделать дизайнер

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

  • Нужно отрисовать внешний вид тестовых заголовков для тегов H1, H2 и H3;
  • Абзацы текста в верстке заключаются в тег <p>, но каждый браузер задает свой отступ между блоками. Верстальщик должен знать, на каком расстоянии они будут находиться, чтобы самостоятельно задать эти стили в css;
  • Дизайнер должен показать, как будут выглядеть нумерованные и маркированные списки, гиперссылки и акцентированные части текста;
  • Важно создать структуру меню, продумать поведение пользователя и точки, из которых он сможет попасть в разделы с главной страницы или с внутренних.

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

Мобильная версия

Mobile-first - важный принцип в современном интернете

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

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

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

Распространенные ошибки

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

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

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

Говоря о самых грубых ошибках, нужно отметить следующее:

  1. Информация представлена на картинке вместо текста. Так делать нельзя, важная информация должна быть прописана буквами.
  2. Flash заставка вместо главного экрана. Такую версию оформления сложно встретить в 2018 году, но некоторые дизайнеры по-прежнему считают, что это креативно. На самом деле многие браузеры блокируют Flash элементы, а у пользователей такой ресурс не вызывает доверие.
  3. Использование тегов тегов <h1> - <h6> вне тестовых заголовков. Все необходимые элементы заключаются в теги <div>, <span> и прочие HTML5 элементы.
  4. Инлайновые стили допустимо использовать только во время отладки и работы, перед сдачей проекта важно вынести их в файл css.
  5. Куски js-кода также нужно вынести в отдельный подключаемый файл.

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

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Об авторе
Generic placeholder image
Артём Ивашкевич
Занимаюсь программированием более трех лет, работаю над проектами с миллионной посещаемостью. В свободное время обучаю программированию на PHP других людей, потому что мне это нравится. Если вы интересуетесь темой IT и хотели бы стать разработчиком, рекомендую прочитать статью о том, как я стал программистом.
Читайте также
Комментарии