Советы по оптимизации HTML-кода сайта
Несмотря на то, что сайты воспринимаются нами внешне, их внешняя составляющая строится, как и в Человеке, исходя из внутреннего мира под действием специальных законов и правил. Эти законы и правила для сайтов определяются стандартами W3C. Внешней составляющей сайта являются его дизайн и структура, внутренней составляющей – HTML -код и CSS -стили (не учитывая отдельный функционал).
Разрабатывая сайт или добавляя на него контент, мы часто заботимся лишь о внешнем его представлении. Это здорово! Однако, следует уделять внимание и внутреннему представлению страниц в виде HTML кода, особенно если речь идёт о будущем привлечении поискового трафика. Эта статья посвящена вопросам оптимизации кода сайта для улучшения его видимости в поисковых системах и построена на основе доклада автора с конференции All in Top Conf 2012 “Понятие SEO оптимизированной вёрстки”.
к содержанию ↑Каким сайтам нужна оптимизация кода
При обсуждении вопросов о влиянии валидности HTML страниц на их ранжирование ряд оптимизаторов приводит в пример страницы популярных брендов, например, самих поисковых систем. И, действительно, главная страница Яндекса имеет порядка 30 ошибок и немного больше главная страница Google. Казалось бы, сами поисковые системы не заботятся о качестве HTML кода, подавая пример другим вебмастерам, и в нём можно найти много стилей и скриптов, не вынесенных во внешний файл, а также местами мусорный код.
Здесь следует понимать, что у подобных сервисов другие задачи, источники их входящего трафика это далеко не поисковые системы, а чаще постоянная аудитория. На них не следует равняться. Такие сервисы, как поисковики, социальные сети и ряд крупных порталов не нуждаются в SEO оптимизированной вёрстке, они оптимизируют код для других целей.
SEO оптимизированная вёрстка требуется, прежде всего, сайтам, основной источник трафика которых — поисковые системы.
к содержанию ↑Почему код имеет значение?
Оптимизация вёрстки является одним из элементов внутренней оптимизации сайта, которому, к сожалению, уделяют меньше внимания чем, например, редактированию заголовков страниц или их текстов. Часто это происходит из-за того, что клиент не предоставляет полный доступ к проекту или не имеет желания/возможностей переверстать свой сайт.
Ниже перечислены ряд пунктов (своего рода факторов), которые, так или иначе, влияют на видимость сайта в поиске и относятся к качеству HTML -кода.
Лёгкость распознавания (анализа) кода роботами
Чем проще код, тем легче его проанализировать и верно определить структуру страницы. Часто поисковые системы справляются с анализом сложного и невалидного кода, однако, для упрощения решения их задачи и уверенности, что поисковик поймёт вас правильно, лучше избавиться от ошибок, найденных валидатором и стараться делать код лёгким.
Быстрый поиск важных элементов
Какие важные элементы можно выделить на странице? Прежде всего, это заголовки, навигационные блоки, основной и вспомогательный контент. Если поисковик быстро найдёт важные элементы страницы, он лучше справится с задачей её индексации и последующего ранжирования.
В последнее время поисковики любят быстрые страницы, также как и пользователи. Улучшая этот показатель, можно иметь приоритет у своих конкурентов. В большей степени, скорость отдачи страницы будет зависеть от хостинга и используемой CMS , однако, также большую роль здесь играет и объем кода.
Вынося всё лишнее из кода во внешние файлы и оптимизируя графику, можно существенно улучшить этот важный показатель.
Для ускорения загрузки страниц:
- CSS и JS выносите во внешние файлы;
- Элементы дизайна оформляйте в спрайты и выносите в листы стилей;
- Используйте простой код.
Доступность важных элементов для поисковых роботов
Все важные элементы сайта должны быть легкодоступны. Затрудняют доступность робота к контенту использование флеша (в навигации или важном контенте) или яваскрипта, фреймов, некорректной кодировки и текстов в виде изображений.
Для улучшения доступности кода:
- Проверьте код на валидацию с помощью validator.w3c.org
- Старайтесь не использовать флеш и фреймы;
- Всплывающую навигацию делайте открытой для индексации;
- Для нестандартных шрифтов лучше использовать стили, а не изображения.
Показатель текстовой релевантности
Текстовая релевантность зависит не только от наличия ключевых слов, но и от их позиции в контенте и разнообразия тегов, в которых они используются.
Для повышения текстовой релевантности страницы:
- Размещайте важный контент выше в коде;
- Заголовки заключайте в теги — ;
- Прописывайте ALT к изображениям;
- Используйте семантическую разметку текста (каждый тег форматирования по своему назначению);
- Не используйте текстовые портянки, форматируйте и разнообразьте текст.