3,020 просмотра

Несмотря на то, что сайты воспринимаются нами внешне, их внешняя составляющая строится, как и в Человеке, исходя из внутреннего мира под действием специальных законов и правил. Эти законы и правила для сайтов определяются стандартами W3C. Внешней составляющей сайта являются его дизайн и структура, внутренней составляющей – HTML-код и CSS-стили (не учитывая отдельный функционал).

Разрабатывая сайт или добавляя на него контент, мы часто заботимся лишь о внешнем его представлении. Это здорово! Однако, следует уделять внимание и внутреннему представлению страниц в виде HTML кода, особенно если речь идёт о будущем привлечении поискового трафика. Эта статья посвящена вопросам оптимизации кода сайта для улучшения его видимости в поисковых системах и построена на основе доклада автора с конференции All in Top Conf 2012 “Понятие SEO оптимизированной вёрстки”.

Каким сайтам нужна оптимизация кода

Советы по оптимизации вёрстки для SEO При обсуждении вопросов о влиянии валидности HTML страниц на их ранжирование ряд оптимизаторов приводит в пример страницы популярных брендов, например, самих поисковых систем. И, действительно, главная страница Яндекса имеет порядка 30 ошибок и немного больше главная страница Google. Казалось бы, сами поисковые системы не заботятся о качестве HTML кода, подавая пример другим вебмастерам, и в нём можно найти много стилей и скриптов, не вынесенных во внешний файл, а также местами мусорный код.

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

SEO оптимизированная вёрстка требуется, прежде всего, сайтам, основной источник трафика которых — поисковые системы.

Почему код имеет значение?

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

Ниже перечислены ряд пунктов (своего рода факторов), которые, так или иначе, влияют на видимость сайта в поиске и относятся к качеству HTML-кода.

Лёгкость распознавания (анализа) кода роботами

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

Быстрый поиск важных элементов

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

Читайте также:

— О seo-вёрстке на blogto4ka.ru
— SEO оптимизированный логотип

Скорость загрузки страницы

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

Для ускорения загрузки страниц:

  • CSS и JS выносите во внешние файлы;
  • Элементы дизайна оформляйте в спрайты и выносите в листы стилей;
  • Используйте простой код.

Доступность важных элементов для поисковых роботов

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

Для улучшения доступности кода:

  • Проверьте код на валидацию с помощью validator.w3c.org
  • Старайтесь не использовать флеш и фреймы;
  • Всплывающую навигацию делайте открытой для индексации;
  • Для нестандартных шрифтов лучше использовать стили, а не изображения.

Показатель текстовой релевантности

Текстовая релевантность зависит не только от наличия ключевых слов, но и от их позиции в контенте и разнообразия тегов, в которых они используются.

Для повышения текстовой релевантности страницы:

  • Размещайте важный контент выше в коде;
  • Заголовки заключайте в теги <h1> — <h6>;
  • Прописывайте ALT к изображениям;
  • Используйте семантическую разметку текста (каждый тег форматирования по своему назначению);
  • Не используйте текстовые портянки, форматируйте и разнообразьте текст.

Читайте также:

— О семантической вёрстке на Пепелсбей.net
— Создаем аккуратную семантическую верстку

Заключение

Следует подходить ответственно не только к внешней составляющей сайта, но также и к её внутренней составляющей в виде HTML-кода. Для анализа кода используйте Web Developer Toolbar, плагин Firebug и seo-чеклист.

Отключите CSS, JavaScript и изображения на странице, посмотрите, можно ли найти основные элементы текста – заголовки, абзацы, ссылки и фразы? Примерно так видит страницу робот, убедитесь, что он правильно поймёт ваши цели и приоритеты.

Полезные ссылки:

— Пример 1 и пример 2 сайтов с хорошей вёрсткой.
— Поможем перевести старый сайт на новый движок

Версия для печати

  • 0 Нет
  • 16 Да
  • Мне понравилось!

Если вам понравилась статья, вы можете подписаться на RSS или E-mail рассылку. Для получения обновлений по электронной почте, введите ваш e-mail адрес в эту форму (Доставка от FeedBurner):