Оптимизация html верстки сайта

Размер шрифта

Печать

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

Отсутствие тега <h1> на каждой странице;
Использование нескольких тегов <h1>;
Вставка в шаблон ссылок с редиректами (301, 302);
Использование тегов группы <h> для элементов верстки;
Добавление стилей и скриптов в тело html-документа;
Использование не тех тегов (например, кнопку сделать <div>, а не <button>).

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

Верстка vs оптимизация сайта: главные правила

Соблюдайте стандарты верстки, проверяйте код на валидность (общий свод правил). Закрывайте все html-теги, которые должны быть закрыты, для верстки можно использовать продвинутый блокнот Notepad++ или специальные программы, например, Sublime Text, которые поддерживают разные языки и визуально выделяют теги. Старейший редактор Adobe Dreamweaver идеально подходит для работы с html-шаблонами, поскольку позволяет тут же просматривать результат работы. Эти программы благодаря подсветке тегов позволяют отслеживать правильную вложенность.

Все стили нужно выносить в отдельный файл. Мало того, что использование атрибута style в теле html-документа усложняет редактирование стилей (их еще предстоит найти!), так еще такая конструкция утяжеляет шаблон. Отдельно следует выносить и js-скрипты в верстке. Для оптимизации сайта это крайне важно! Подключаемые файлы можно сжимать, уменьшая их размер, однако в корне сайта должны лежать и полные версии стилей для быстрой правки.

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

Оптимизация html сайта посредством сжатия

Бесплатный инструмент от Google Developers PageSpeed Insights позволяет быстро проводить аудит сайта и часто в рекомендациях можно встретить «Включите сжатие». Сжатие позволяет сократить размер используемых файлов. Обычно для этого применяется технология gzip. Сжатие включится непосредственно на веб-сервере. На Apache для этого применяется модуль mod_deflate, настройки прописываются в системном файле htaccess.

Главные теги для оптимизации html-сайта

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

<title> – заголовок страницы, должен быть свой у каждого URL;
<meta name="description" content="" /> – описание страницы, должно быть уникальным для каждого URL;
<h1> – заголовок первого уровня;
<img src="" alt="" title=""> – картинка с альтернативным текстом и заголовком;
<strong>, <b>, <em> – теги форматирования, выделяют главные мысли;
<p> – тег абзаца;
<noindex> – тег, который закрывает участок кода от индексации;
<a href="" rel="nofollow"> – ссылка, атрибут rel="nofollow" закрывает ее от индексации;
<meta name="robots" content="index/noindex, follow/nofollow"> – страница, закрытая от индексации.

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