Правильная структура сайта html
Сегодня темой SEO блога будет самое начало пути продвижения сайта – правильная структура сайта html. Это важный этап, который называется технической оптимизацией. Неправильный код страницы не будет помощником при SEO.
Термины
Валидная страница – код html, отвечающий стандартам организации W3C
W3C – консорциум, который создает и принимает стандарты в области WEB разработки
Валидатор – программа проверки валидности сайта
Онлайн-валидатор – сервис, позволяющий организовать проверку в сети
HTML-тег – основная единица разметки веб-страниц
Классическая структура правильного HTML документа
Технически любая страница разделена на секции:
Правильная HTML структура сайта (фрагмент)
HTML уже давно перешел в разряд логической разметки, когда каждый элемент описывает свое содержание, но не оформление.
Объявление типа документа
Document Type Definition используется для указания стандарта, который соблюдался при верстке сайта. Последняя версия HTML – пятая. DTD для нее выглядит очень просто:
Если вы оптимизируете сайт, созданный до появления пятерки, используйте
Strict запрещает использовать теги для оформления, считая что это функция CSS.
Для очень старых сайтов применяется переходный синтаксис
Transitional допускает использование устаревших атрибутов и элементов, например , background и т.д.
указывает браузеру, какой режим отображения элементов выбрать. Если вы используете неправильный DTD, программа перейдет в режим показа страницы старыми браузерами и сайт, скорее всего, будет выглядеть совсем не так, как вы рассчитывали.
Определяются с типом DTD верстальщики, которые прекрасно ориентируются в стандарте и определяют используемый при верстке стандарт. Ссылки на оригинал ниже.
Заголовок
Не следует путать заголовок в коде с заголовком визуальным. Последний создается в теле с помощью элемента HTML5 < Header>или любого блока, например < div>. Настоящий заголовок документа необходим для обмена служебной информацией между браузером и сервером. Он включает:
- Тег < meta>, передающий самую разную информацию, например, сниппет, переадресацию, дату последнего обновления страницы и пр.
- Подключение сторонних файлов тегом < link>, чаще всего таблиц стилей css.
- Заголовок, который отображается на вкладке браузера с открытым документом. Его подключаем тегом < title>.
Подробно разбираться в сути тега meta мы не будем. Укажем только те значения, которые для продвижения имеют наибольшую важность:
Здесь указывается сниппет страницы – текст, который поисковая система отображает под ссылкой. Если упустить описание, сниппет будет формироваться автоматически из текста документа. А вы потеряете отличную возможность вставить ключ.
Раньше список ключевых слов имел большой вес при продвижении. Сейчас алгоритмы поисковых систем учитывают его только при полной релевантности содержимому страницы сайта, и вес этот тег имеет небольшой.
Через запятую перечисляются ключевые фразы, через пробел – слова, из которых робот сам строит ключи.
Обязательно необходимо включать в заголовок строку
Она нужна для правильного отображения адаптивной верстки, рассчитанной на устройства разных размеров – смартфон, планшет, монитор.
Важно указать кодировку сайта. В HTML 5 это делается так:
В четвертом все было немного сложнее:
Для указания роботам правил индексации страницы применяется следующий код:
- Noindex запрещает индексирование документа.
- Nofollow запрещает проход по ссылкам в документе.
- Index разрешает индексирование документа.
- Follow разрешает проход по ссылкам в документе.
Элемент link необходим для подключения внешних файлов, чаще всего таблиц стилей. Сейчас сложно найти сайт, сверстанный без использования технологии Cascading Style Sheets. Валидный сайт всегда использует внешние таблицы стилей.
Последний элемент, необходимый для продвижения – title. Именно в нем размещается главный ключ страницы:
Эта информация помогает пользователю идентифицировать сайт на вкладках, а для SEO имеет большой вес.
Обратите внимание на закрывающий тег . Такая конструкция присутствует не у всех элементов, у meta закрывающего тега нет.
Тело документа
Код страницы строится на усмотрение разработчика. Но при этом должны соблюдаться некоторые правила:
- Заголовок H1 присутствует на каждой странице сайта обязательно и только один раз
- Заголовки H нельзя вкладывать друг в друга
- Нельзя использовать заголовок нижнего уровня раньше заголовка верхнего уровня
- Элементы должны закрываться соответственно структуре контейнеров: вложенный раньше, чем родитель
- Элементы IMG обязательно содержат атрибут alt – прекрасный способ указать нужный вам ключ
Правильная html структура сайта в полном виде
Это базовые правила, на самом деле для каждого элемента в спецификации указаны собственные – перечислены запрещенные для версии разметки атрибуты, необходим ли закрывающий тег и т.д.
В заголовках размещаются ключи, поэтому на странице их обязательно надо использовать. Разумно брать один заголовок на каждые 3-4 абзаца текста.
Куда добавлять
В стандарте место подключения скриптов не регламентируется. Но правильный подход — с целью улучшения скорости загрузки все некритические сценарии подключать в конце документа, перед закрывающим тегом body.
Так как скорость загрузки сайта теперь не имеет такого значения как раньше, вы можете сами выбирать куда добавлять скрипты. Однако если в сценарии используется элемент веб-страницы, и он выполняется не по событию, а при загрузке, элемент должен быть описан ДО появления скрипта.
Валидаторы сайта
Для проверки соответствия кода структуры стандартам используются специальные программы –валидаторы. Самая известная онлайн-версия у разработчика стандартов W3C.
https://validator.w3.org/
Вы можете проверить по адресу страницы, если она уже размещена в сети.
Валидация по адресу сайта
Валидация по коду страницы
Либо загрузить файл с версткой.
Онлайн-валидатор выдаст много строк – ошибки (Errors) и предупреждения (Warnings). Их нужно внимательно проанализировать и при необходимости исправить.
Также проверку структуры выполняют сервисы продвижения и оптимизации.
PR-CY
Покажет наличие ошибок и много другой полезной информации. Конкретизировать недочеты кода в бесплатном варианте не получится – вам дадут ссылку на валидатор.
MEGAINDEX
Скриншот сервиса Megaindex
Авторизированным пользователям предоставляет огромный выбор инструментов, в том числе аудит сайта. Так детально, как W3C ошибки не ищет, но самые грубые распознает.
Заключение
Продвижение сайта начинается с оптимизации. Необходимо внимательно проверить структуру страницы на соответствие стандарту. Используйте валидатор, который выдаст подробную информацию о всех недочетах.
Без выполнения этого шага вы сможете продвинуть сайт, однако это будет сложнее и затратнее по времени.