Стандарты верстки и разметки шаблонов сайта для SEO-продвижения

Автор: Пятикоп Владислав

#Разработка сайтов#SEO#Продвижение сайтов
Стандарты верстки и разметки страницы для SEO

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

Микроразметка и разметка веб-страницы тегами

Базовая разметка тегами любой страницы (кроме служебных, закрытых от индексации) по стандарту компании:

Все теги уникальны по содержанию.

  • Title
  • Description
  • H1
  • Canonical
  • OG title
  • OG description

Это базовый набор для любой страницы сайта при базовой SEO-оптимизации сайта.

Детальная разметка Schema.org

В целом, на мой взгляд, разбирать отдельно разметку Schema нет никакого смысла.

Ниже предоставляю несколько ссылок, которые следует изучить при внедрении на конкретный проект:

При внедрении данной микроразметки стоить обратить внимание на:

  1. Тип контента сайта и тематику (есть специальные схемы разметки практически под любой тип контента и под многие коммерческие тематики: особенно хорошо разметка работает для медицинских проектов)
  2. Валидацию (проверка корректности разметки)
    1. валидатор Яндекса
    2. валидатор Google

Детальная разметка The Open Graph protocol

Базовые параметры описаны в начале данной статьи. Наш внутренний софт Cyber Capital Platform считает грубой ошибкой отсутствие основных параметров.

По дополнительным параметрам оптимизации: мы исходим из предоставленного клиентом контента. По умолчанию правило звучит так: «чем больше данных заполнено из Open Graph-разметки, тем лучше оптимизирован проект».

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

Соответствие требуемой схеме распределения «весов» страниц

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

НЕОБХОДИМО: документ «Структура сайта» от SEO-специалиста на основе анализа семантики и конкурентного окружения проекта.

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

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

НЕОБХОДИМО: документ «Структура сайта» от SEO-специалиста на основе анализа семантики и конкурентного окружения проекта.

SEF адреса динамических страниц

В случае если страницы сайта создаются динамически, их адреса должны быть дружественны поисковым системам (Search Engine Friendly, SEF). В переводе на русский эти адреса почему-то оказываются человеко-понятными, но даже при этом они должны оставаться дружественными поисковым системам. Это предполагает уникальный и стабильный адрес для каждой динамически генерируемой страницы, возможность его изменения средствами админ-панели.

Корректность настроек переадресации

Правильные настройки переадресации предполагают, что запросы страниц по адресам вида www.site.ru/str1, site.ru/str1/, site.ru/str1, site.ru/str1.php, site.ru/str1.html автоматически перенаправляются на страницу site.ru/str1/. При создании новых сайтов желательно отказываться от приставки www (формировать 301 переадресацию с URL такого вида на URL без www). Также любая страница на сайте должна «отдаваться» только по одному виду URL, а именно с закрывающим слешем в конце.

Корректность настроек в sitemap.xml

site.ru/sitemap.xml – необходимо наличие, корректное заполнение и автоматическая генерация.

Пример: https://cct.moscow/sitemap.xml

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

Корректность настроек в robots.txt

site.ru/robots.txt – необходимо наличие, корректное заполнение данного файла и автоматическое редактирования.

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

Также необходимо, чтобы в файле robots.txt была указана деректива Host.

Пример корректного заполнения данного файла:

User-Agent: Googlebot

Disallow: *?type=*

Disallow: *?ad=*

Disallow: *?_err=*

User-Agent: Yandex

Disallow: *?type=*

Disallow: *?ad=*

Disallow: *?_err=*

User-Agent: *

Disallow: *?type=*

Disallow: *?ad=*

Disallow: *?_err=*

Пояснение

  1. В файле закрыты от индексации ссылки, которые получаются при ведении рекламы на сайт.
  2. Указан основной Host
  3. Указана ссылка на sitemap.xml.

HTML-разметка шаблонов и контента сайта

Корректность оформления тега <head>

Первым дочерним элементом <head> обязан быть <title>. Сразу за ним следуют <description>, желательно вывод тега <keywords>. Все служебные определения следуют после.

Блочная верстка

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

Положение контентной области в коде

Контентная область должна быть размещена в коде страницы настолько близко к началу, насколько это возможно.

Размещение тегов заголовков

Теги заголовков (h1, h2, …, h6) могут содержаться только в корректном порядке вложенности, причем тег h1 может встречаться на странице только один раз.

Порядок размещения тегов изображений в коде страниц сайта

Если изображение вставлено в код страницы сайта при помощи HTML-тега <img>, в нем обязательно должен быть определен атрибут alt, хотя бы равный пустой строке: alt=””. Определение атрибута alt желательно продублировать в атрибуте title.

Разделение логического и визуального форматирования

HTML-код страниц не должен содержать никаких атрибутов, относящихся к визуальному представлению контента страницы, а также атрибутов style. Все визуальное форматирование должно быть корректно исполнено средствами Cascading Style Sheets.

CSS-свойства элементов разметки

Централизованное хранение CSS

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

CSS reset

Имеет смысл использовать набор CSS-инструкций, предопределяющий установки значений по умолчанию, выполняемые пользовательским клиентом (как правило, браузером).

Читаемость CSS

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

Специфичность CSS

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

Корректное указание свойств CSS3

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

Кроссбраузерность

Набор CSS-описаний должен обеспечивать корректное отображение сайта в Chrome, Mozilla, Opera и IE наиболее актуальных на данный момент версий.

Интегрированность в CMS

Корректный доступ к структуре сайта средствами CMS

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

Корректный доступ к свойствам страницы средствами CMS

Все шаблоны сайта должны быть интегрированы в CMS так, чтобы мета теги страницы – title, description, keywords, а также «название страницы», которые используется в bredcrumbs и автоматически генерируемых ссылках на эту страницу были определены через стандартный интерфейс CMS, верно отображались в коде страницы.

Пример реализации основных настроек страницы:

Реализации основных настроек страницы

Корректная обработка динамической информации средствами CMS

Сайт должен обеспечивать корректную работу с динамической информацией, управляемой средствами CMS. Любое статичное включение HTML или CSS-кода должно иметь четкое обоснование.

Необходимый минимум подключаемых компонентов

Коды используемых на сайте framework’ов – как JavaScript, так и CSS, должны подключаться в минимально необходимом объеме только в местах их непосредственного использования.

Порядок хранения информации

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

Настройки хостинга

Корректная обработка .htaccess

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

Дружественность CMS

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

Время загрузки страницы

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

Статья была полезна? Будем рады информационной поддержке и распространению материала

Отзывы


Анастасия Ященко
★★★★★ Яндекс Карты

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

Матвей Зиченков
★★★★★ 2ГИС

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

Реклама Рекламовна
★★★★★ Google карты

Сотрудничаю с ребятами в рамках проекта АО ПКФ Спектр. Мне понравился уровень погружения в проект. На встречах обсуждаем не только SEO и разработку, но и страницы входа, конверсии, поведение пользователей. Иногда рекомендации выходят за рамки непосредственно продвижения, что удобно. Подбирали подрядчика достаточно долго. Уже был не самый удачный опыт с SEO, поэтому к обещаниям относились осторожно. У CCT понравился другой подход: сначала разобраться, что вообще происходит с сайтом, потом определить приоритеты и только после этого делать работу.

Анастасия Павленко
★★★★★ Zoon

Достоинства: Все работает

Тематика непростая, потому что запросы достаточно специфические. настроили и оптимизировали кампании в Директе, подключили отслеживания обращений. За несколько месяцев получили существенный рост количества лидов. Вроде бы обычная задача была: настроить рекламу и получить заявки. Но на практике оказалось много нюансов. В ССТ не стали просто запускать объявления, а сначала разобрались с тем, кто именно наш клиент и какие запросы для нас действительно интересны. Хороший результат.

оля полева
★★★★★ Zoon

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

Николай Салатов
★★★★★ Google карты

Прозрачные цены на услуги, слова не расходятся с делом. Работаем дальше

Городской житель
★★★★★ 2ГИС

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

Елизавета Алябьева
★★★★★ 2ГИС

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

Алексей Железнов
★★★★★ Zoon

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

Петр Пономарев
★★★★★ 2ГИС

Искали подрядчика, который сможет не просто вести SEO, а разобраться в нашем бизнесе. В CCT с этим все хорошо. Сначала изучили сайт,конкурентов, семантику, потом уже составили план работ. За время сотрудничества видим стабильную положительную динамику.Для меня главный плюс CCT в том, что они смотрят не только на позиции. Настроили аналитику, начали отслеживать обращения, стало гораздо понятнее, какие страницы и запросы реально работают. Теперь SEO можно нормально оценивать с точки зрения бизнеса.Работают системно. Сайт растет, обращений становится больше. По коммуникации тоже все нормально.

Ирина Вербина
★★★★★ Zoon

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

Rinat minnikhanov
★★★★★ 2ГИС

С CCT работаем по SEO. Нравится, что ребята не обещают быстрых чудес, а последовательно разбираются с сайтом и поиском.До этого уже был опыт с SEO, поэтому относились довольно скептически. Здесь понравилось, что никто не рассказывает сказки про топ за месяц. Есть конкретные задачи, аналитика и понятный контроль. Через несколько месяцев стало видно, что работа действительно дает результат. Рост есть, заявки тоже. Продолжаем.

Анастасия Миронова
★★★★★ Zoon

Заказывали у ребят разработку сайта. Нужно было перенести старый сайт на 1С-Битрикс и заодно серьезно обновить его. CCT взяли на себя разработку, интеграцию с Битрикс24 и дальнейшую поддержку. Понравилось, что команда думает о проекте. Важным условием было не просто сделать красивый дизайн, а подготовить сайт для дальнейшей рекламы и продвижения. В CCT это учли еще на этапе проектирования (мультикаталог). Получили удобный каталог, нормальную мобильную версию и понятную структуру.

Ali Nagamedov
★★★★★ Яндекс Карты

Взяли CCT Studio по рекомендации. Главное — результат: за 2 месяца +50% заявок. Понравилась прозрачность: вся статистика в открытом доступе, отчёты без лишнего. На связи всегда. Работаем дальше.

VS
★★★★★ Google карты

Работаем с CCT studio по рекламе в Googl и Яндекс Директ в недвижимости. Ребята провели аналитику, всё настроили, звонки, сообщения, скрипты. За 4 месяца заявок стало почти в 2,5 раза больше, а стоимость расходов от первого месяца снизилась в 2,5 раза. Мы в технологиях не сильны, но результат увидели. Работой довольны.

Ann Blokhina
★★★★★ Google карты

С CCT studio мы сотрудничаем с 2016 года, и за это время удалось пройти впечатляющий путь — от “лежачего” сайта и хаотичных заявок до выстроенной, оцифрованной и эффективной системы привлечения и обработки лидов.

Совместно с командой мы полностью автоматизировали воронку, стабильно запускаем и оптимизируем рекламные кампании, растем в SEO и постоянно улучшаем работу с сайтом. Особенно ценю в работе с CCT четкость, прозрачность и высокий профессиональный уровень. Регулярно общаемся с Владимиром, Викторией, Владиславом — каждый из них демонстрирует глубокую экспертизу и действительно деловое, результативное отношение к делу. Без «воды», по делу и с фокусом на результат.

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

Когда мы пришли в CCT, сайт по сути просто “лежал” в поиске. Были статьи, какие-то заявки, что-то обновлялось, но системности и реального движения не было. Начали работать в сентябре — и честно, сначала переживали, что все затянется. Но результаты пришли быстрее, чем ожидали. Уже к весне мы увидели ощутимый рост трафика и заявок.

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

Victor G
★★★★★ Яндекс Карты

Хочу выразить благодарность CCT studio за профессиональную и результативную работу по разработке и продвижению сайта нашей фабрики. Специалисты полностью взяли на себя создание удобного и продающего сайта с продуманной структурой и качественной презентацией продукции. Отдельно хочу отметить грамотный подход к аналитике: была внедрена веб-аналитика и сквозная аналитика, что позволило нам видеть реальную картину по лидам, источникам и окупаемости рекламы. Команда также запустила и эффективно настроила рекламные кампании в директе, гугл и вконтакте. Мы получили стабильный поток целевых заявок и заметный рост продаж. Работа была организована: соблюдение сроков, прозрачная отчетность и регулярные совещания раз в неделю. Команда глубоко погружается в проект и заинтересована в результате. Рекомендую данную компанию как надежного партнера для разработки и продвижения сайтов.

НЗТО Нижний Новгород
★★★★★ Google карты

Работаем с CCT Studio уже больше двух лет. Они разработали для нас сайт и занимаются рекламными кампаниями и SEO‑продвижением по теплообменному оборудованию. Сайт получился современным и удобным, а заявки начали поступать сразу после запуска. Команда хорошо понимает специфику промышленного B2B, всегда на связи и быстро реагирует. Рекомендуем как надежного партнёра.

Иван Лелух
★★★★★ Google карты

Когда мы пришли в CCT, наш сайт по сути просто “лежал” в поиске.
Что-то обновлялось, статьи писались, но ничего не двигалось. Вроде были и
запросы, и метрика, и даже заявки шли, но все это было бессистемно. С
ребятами начали в сентябре, и честно, сначала боялись, что все затянется и
мы не доживем до результатов. Но все пошло быстрее, чем ожидали. Уже к
весне у нас был совсем другой трафик. Рост был виден даже по обычному
общению в офисе, менеджеры начали чаще говорить “клиент с сайта”.
Параллельно подключили сквозную аналитику, отслеживаем теперь и звонки, и
заявки, и чаты через Jivosite. До этого вообще не представляли, сколько
людей не доходят до оформления заявки. Очень круто, что нам объяснили всю
структуру продвижения по сезонам, весна и лето у нас пиковые, и план делали
с учетом этого. Некоторые статьи мы даже потом адаптировали в карточки,
потому что увидели, как они “вытаскивают” страницы в топ. Контакт с
командой всегда на связи, не теряются, все по делу. Если нужно что-то
поменять, сразу вносят, предлагают варианты. Поддержка сайта также на них.
Мы с ними уже прошли одну зиму, один сезон, и точно хотим продолжать
Рекомендуем ребят — они в этом реально шарят.

Елена Саленко
★★★★★ Google карты

Работаем с CCT studio больше года и это как раз тот случай, когда цифры говорят сами за себя. Видимость сайта выросла более чем на треть, трафик из Яндекса увеличился вдвое, лидов стало больше почти на 2/3. При этом не было хаоса и “сделаем-сделаем”, был четкий годовой план, этапы, прозрачная отчетность. Постоянно отслеживались данные из Метрики, звонки и заявки. Больше всего понравилось, что ребята глубоко копают. Подсказывали, какие доработки вне SEO повлияют на конверсию.
Через 8 месяцев стало очевидно, что продвигаемся не впустую, звонков и заявок стало больше. Особенно хорошо пошел Яндекс. Команда CCT studio не грузила лишним, все объясняли по делу. Мне было важно, чтобы можно было отследить, откуда приходят клиенты, и тут настроили все: звонки, формы, чаты, даже письма. Работают грамотно, по плану, видно, что есть система. Для моего бизнеса это сработало.

Ann B.
★★★★★ Яндекс Карты

С CCT studio мы сотрудничаем с 2016 года, и за это время удалось пройти впечатляющий путь — от “лежачего” сайта и хаотичных заявок до выстроенной, оцифрованной и эффективной системы привлечения и обработки лидов. Совместно с командой мы полностью автоматизировали воронку, стабильно запускаем и оптимизируем рекламные кампании, растем в SEO и постоянно улучшаем работу с сайтом. Особенно ценю в работе с CCT четкость, прозрачность и высокий профессиональный уровень. Регулярно общаемся с Владимиром, Викторией, Владиславом — каждый из них демонстрирует глубокую экспертизу и действительно деловое, результативное отношение к делу. Без «воды», по делу и с фокусом на результат. С самого начала взаимодействие строилось системно: еженедельные созвоны с анализом прошедшей недели, ежемесячные отчеты с внятной визуализацией и предложениями по корректировке стратегии. Мы всегда точно понимали, что делается и зачем. Когда мы пришли в CCT, сайт по сути просто “лежал” в поиске. Были статьи, какие-то заявки, что-то обновлялось, но системности и реального движения не было. Начали работать в сентябре — и честно, сначала переживали, что все затянется. Но результаты пришли быстрее, чем ожидали. Уже к весне мы увидели ощутимый рост трафика и заявок. Сейчас мы продолжаем сотрудничество: строим гипотезы для выхода в новые регионы, обсуждаем стратегию по B2B-сегменту. Уверена, что и дальше всё будет так же стабильно и результативно. CCT — это команда профессионалов, с которыми можно уверенно планировать рост. Анна Блохина, бренд-менеджер Завода Легких Конструкций "Декор" (ЗЛК "Декор")

Оксана С.
★★★★★ Яндекс Карты

Настоящие профессионалы, а это редкость! Знают свое дело "на отлично"!

Георгий Б.
★★★★★ Яндекс Карты

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

Иван Кузнецов
★★★★★ Яндекс Карты

Хороший сервис!
Все быстро и качественно сделано.

Давайте обсудим ваш проект

Заполните форму ниже, подберём удобное время и обсудим детально ваш проект.

1 из 2 шагов

связаться с нами
Оставаясь с нами, вы соглашаетесь на использование файлов куки.