Оптимизация html кода сайта

Наверняка, каждый уважающий себя оптимизатор, уделяет немало времени работе над html-кодом. Эти шаги имеют определенное практическое значения, в плане удобства для пользователей и анализа сайта поисковой машиной.

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

Даже самые минимальные работы по оптимизации html-кода предусматривает знания:

  1. Язык программирования html
  2. Систему управления сайтом CMS
  3. Знание CSS

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

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

Этапы оптимизации кода-html:

  1. Формирование файла CSS
  2. Удаление лишних тегов
  3. Применение глобальных блоков

Работа с CSS:

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

Пример:

1. Имеем следующий код: <table style="background: url(/style/backs.jpg); border: black 2px double">

2. Для создания класса, в таблице  css прописываем: .newstyle {background: url(/style/backs.jpg); border: black 1px double.}

3. Теперь, в таблицу можно вписать новый класс: <table class="newstyle">

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

Удаление лишних тегов:

Часто на странице можно встретить посторонние коды, ссылки на другие сайты, фреймы и прочее. Не стоит игнорировать этого.

1. В первую очередь, стоит удалять посторонние ссылки, а если это ссылки на источник, то желательно помещать их в тег <noindex>, а также, прописывать параметр rel="nofollow". Это делается для того, чтоб поисковые системы не считывали код из данного участка страницы.

2. Не игнорируйте различные теги типа <IFRAME>,  если Вы их не устанавливали.

3. Также, существенное значения имеют ошибки в коде. Среди наиболее распространенных: незакрытые теги, открытые стили. Пример: <table style="width:100px> , а правильно: <table style="width:100px">

Глобальные блоки:

В данном случае, имеется ввиду, что код должен иметь структуру:

<html>

<head>...</head>

<body>

$GLOBAL_HEAD$

$GLOBAL_CONTENT$

$GLOBAL_LEFT$

$GLOBAL_RIGHT$

$GLOBAL_FOOTER$

</body>

</html>

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

Таким образом, затратив немного времени - можно сэкономить его в будущем. Ведь оптимизация кода html - это не только залог успешного поискового продвижения, но и Ваш комфорт.

HTML ошибки - причина плохих позиций и даже бана

Различные ошибки HTML кода сайтов могут привести к значительному проседанию позиций в поиске. В некоторых случаях такие ресурсы могут оказаться под АГС или даже в бане. Безусловно, ошибки ошибкам рознь, ряд из них вообще не влияют на индексацию и позиции сайта. Рассмотрим наиболее опасные ошибки HTML кода страниц, которых нужно стараться избегать, чтобы не схлопотать санкции со стороны поисковиков.

Незакрытые HTML теги – крайне опасная ошибка. Чем выше данный не закрытый тег расположен в коде странички, тем более он опасен. Не закрытый тег META или LINK в секции HEAD существенно понижал позиции по всем запросам. Эта страница не была видна даже в топ-100.

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

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

Проверить наличие ошибок в HTML коде интернет-сайта можно с помощью одного надежного инструмента – валидатора кода validator.w3.org.В этом случае необходимо ввести в специальную форму URL ресурса или вставить текстовый вариант кода страницы.

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

Критерии анализа юзабилити сайта

При оценке юзабилити сайта необходимо учитывать такие факторы:

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

Быстро ли грузятся ваши странички. Предусмотрен ли метод пропуска используемой флеш заставки. Имеет ли сайт, сделанный на флеш, альтернативный HTML вариант.

2. Внешний вид.

Соблюден ли на всех страницах единый стиль оформления, особенно тут важны используемые шрифты, цвета и оформление ссылок. Гармоничны ли используемые для оформления цвета сайта. Не раздражают ли они посетителей. Не перегружены ли странички не нужной информацией. Не мешают ли яркие графические изображения нормально воспринимать контент. Насколько читабелен текст. Удобно ли просматривать сайт на экранах с разным разрешением, а также айфонах, айпадах и смартфонах. Корректно ли ваш сайт отображается в разных браузерах. Понятна ли с первого взгляда пользователям тематика сайта и его цель.

3. Структура и навигация.

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

Есть ли на веб-ресурсе тупиковые страницы. При использовании вместо текстовых ссылок изображений важно сделать всплывающие подсказки, объясняющие, куда они приведут. Можно ли вернуться на предыдущий уровень ресурса без использования функций браузера.

4. Внутреннее содержание (контент).

Соответствуют ли публикуемые материалы основной тематике сайта. Насколько полно и качественно изложен материал, отсутствуют ли грамматические ошибки. Достоверна ли информация на вашем проекте, подкреплена ли она авторитетными источниками, которым можно верить. Не слишком ли объемны ваши посты, не утомит ли их чтение пользователей. Имеют ли ваши статьи понятную структуру для более легкого их понимания.

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

Рекомендуем почитать другие полезные статьи по теме