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

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

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

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

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

• Title
• Description
• H1
• Canonical
• OGG title
• OGG description

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

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

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

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

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

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

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

https://www.ogp.me/ — ссылка на разметку

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

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

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

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

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

НЕОБХОДИМО: документ «Структура сайта» от 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.

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

Пояснение

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, на которой сделан сайт.

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

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