Seo оптимизация страницы html. Выбираем лучший онлайн-сервис по сжатию CSS. Уменьшение объема кода и оптимизация CSS

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

Мероприятия, которые направлены на адаптацию кода страницы под требования поисковых систем, именуются оптимизацией html-кода .

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

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

5 важных правил оптимизации HTML-кода

1. Стилизация;
2. Удаление лишних тегов;
3. Устранение ошибок;
4. Структура кода;
5. Закрытие внешних ссылок.

Стилизация html-кода

После верстки или в процессе создания сайта, часто сталкиваешься с проблемой: таблицы переполнены стилями.

Это выглядит так:

...

В этом случае для очищения кода, необходимо перенести стили в cтилевые таблицы – CSS. Эти таблицы (точнее ссылка на файл css), как правило, находятся между тегами head. Стили, которые находятся в различных тегах сайта, необходимо конвертировать в классы.

...

Для перемещения в стилевые таблицы, копируем содержимое стиля в CSS, предавая ему класс с названием “newclass”.

Newclass {width:10px; border:10px;}

В итоге, для переноса нового класса из CSS в таблицу:

....

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

Удаление тегов

Порой встречаются такие сайты, которые содержат теги, скопированные вторично, после установки дизайна.

Чаще всего негативное воздействие на сайт оказывают теги:

Устраняем ошибки html-кода

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

Фрагмент незакрытого кода:

Закрытие внешних ссылок:

Внешние ссылки – это процесс качественного взаимодействия между ресурсами. Вместе с комментариями пользователей, вследствие нелегальных действий или установки сторонних скриптов, Вы поневоле можете добавить внешние ссылки. Это особенно опасно, если сайт несет вредную информацию. Лучший способом устранения неполадки – удалить внешнюю ссылку. Другим вариантом является заключение ссылки в тег “noindex”, а также прописать параметр “nofollow”. Например:

Структура html-кода

Очень действенный способ, который поможет быстро редактировать различные отделы сайта одномоментно. Этот способ предусматривает создания структуры по типу глобальных блоков. При этом код сайта разделяется на разделы: верхний, тело, боковые (1 и более), низ. Каждый раздел может редактироваться независимо от других.

К примеру, глобальный левый блок сайта будет именоваться:

"$GlOBAL_BLEFT$"

следовательно, этот блок можно встроить в корневую структуру кода, а также удалить точечно:

"$GLOBAL_BLEFT$"

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

В статье приведены лишь основные примеры, для начала проверьте свой код с помощью онлайн анализаторов, которых очень много в сети Интернет.

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

Прочитано раз: 5 352

SEO-специалистам уже давно известно, что наряду с внешними и внутренними факторами ранжирования сайтов в поисковых системах на позиции в SERP’е влияют и т.н. поведенческие (пользовательские) факторы. Несмотря на это последним уделяют недостаточное внимание. Причин этому множество. Во-первых, не все SEO-компании, особенно занимающиеся «конвейерным» клиентским продвижением, могут выделить ресурсы на анализ влияния поведенческих факторов, мониторинг показателей отказов и количество просмотров страниц, анализ трафика, идущего на сайт и т.д. Во-вторых, специалисты среднего уровня до сих пор работают по принципу «сделал — купил ссылки — жду позиции». В третьих, некоторые оптимизаторы не уделяют внимание пользовательским факторам по той причине, что не считают это нужным, ленятся или просто не знают о них.

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

Зачем это нужно?

Ответ прост. Оптимизация кода не только ускорит загрузку страниц, но и сделает сайт более дружелюбным к поисковым системам — код станет чистым и красивым, а его элементы будут располагаться в нужных местах. Кроме того, изначально скептически воспринятое оптимизаторами в ноябре 2009 заявление Google о том, что скорость загрузки web-документа является одним из факторов ранжирования, только подтверждает тот факт, что оптимизацией кода страниц следует заниматься. Тем более, что на этот фактор оптимизатор может влиять сам.

Составляющие оптимизации кода

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

1. Title, Description и Keywords — располагаем сразу после тега < head>.

На поведенческие факторы существенное влияние может оказать некроссбраузерная верстка. Сайт должен одинаково хорошо отображаться во всех современных браузерах при разных разрешениях. Довольно часто можно увидеть, когда браузер Internet Explorer некорректно отображает содержимое сайта, причем отличия с Firefox и Opera кардинальные. Если на таком сайте процент пользователей IE составит 20%, то вероятность того, что показатель отказов значительно увеличится, возрастает. Пользователь не проведет много времени на таком сайте, вероятно, сразу же закроет вкладку и никогда не вернется на сайт повторно. Верстку сайта следует поручать профессионалам, для которых понятия «валидность» и «кроссбраузерность» — не пустые звуки.

8. Оптимизация картинок под web.

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

Выяснялось, что дело не в не самой быстрой скорости подключения к интернету, а в том, что кажущиеся мини-картинки на самом деле имеют огромные разрешения, но вместо того, чтобы сжать изображение в графическом редакторе, верстальщик в коде страницы прописал атрибутам картинок «width» и «height» значения, в 15 раз, меньшие, чем реальное разрешение фотографий. Иногда доходит до того, что в веб-документе используют изображения в формате.bmp, как известно, имеющие гораздо большие объёмы в сравнении с идентичными изображениями в форматах.jpg или.gif. В качестве примера можно привести страницу о популярном сейчас биатлоне — http://magdalena-neuner.narod.ru/nowfoto.html . Чтобы посмотреть в подгружаемом все фотографии, пользователь вынужден будет скачать порядка 20 Мб трафика, поскольку 90% изображений там выполнено в bmp-формате.

Как быть и что делать в нынешних условиях?

В большинстве случаев, на практике выходит так, что клиент заказывал создание сайта в одной веб-студии или у фрилансеров (к сожалению, данные категории не всегда имеют правильное и современное представление о SEO-верстке), а продвигать решил в одной из SEO-компаний, которые, как правило, такие проблемы не решают и продвигают то, что есть своими «конвейерными» методами. В успешной SEO-кампании в Яндексе в нынешних реалиях мелочей не бывает. Поэтому специалисты, оказывающие профессиональные услуги продвижения сайтов по высококонкурентным запросам обязательно должны иметь в своём арсенале отдел программистов и верстальщиков, а также оказывать и услуги по созданию сайтов. Заказчикам, в свою очередь, желательно ориентироваться на подрядчиков, успешно занимающихся и созданием, и продвижением сайтов одновременно или, как минимум, имеющих хорошую техническую поддержку.

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

Оптимизация HTML кода для поисковиков..
Зачем это нужно и как это делать, я попытаюсь объяснить наиболее доступно. Если Вы чувствуете, что не понимаете хотя бы 20% этой статьи, то могу посоветовать скачать учебник по HTML. За последние 3-4 года поисковые системы очень сильно изменились. Причина этого - резкий рост количества web-сайтов. Прежние методы ранжирования результатов поиска не дают возможности расставить ресурсы в правильном порядке, необходим более точный инструмент для определения релевантности страницы. Что такое релевантность? Говоря простым языком - это соответствие найденной web-страницы введенному запросу. Каждая поисковая система имеет несколько роботов, которые постоянно ходят по Сети, переходя со страницы на страницу по ссылкам, за это их и называют пауками. По сути дела это просто программа, которая сохраняет в базы данных поисковой системы части HTML кода страниц.
Далее полученная информация обрабатывается(индексируется), согласно алгоритмам расчета релевантности и становится доступной для поиска. Естественно у каждой системы свои уникальные алгоритмы, которые к сожалению держатся в секрете. Основываясь на личном опыте, я попытаюсь рассказать на что нужно обращать внимание при оптимизации HTML кода. Но сначала хочу заметить, что существует еще один критерий, влияющий на выдачу результатов поиска - индекс цитирования.
Теперь к делу. Первое, что ищет робот, прейдя на сайт - это файл robots.txt, расположенный в корневом каталоге общедоступных документов. Если он его там не найдет - ничего страшного не случится.

Содержание robots.txt:
1. Строка "User-Agent:" после двоеточия перечисляется список роботов, к которым вы хотите обратиться.
2. Строка "Disallow:" - собственно обращение, вернее запрет на индексацию указанных после двоеточия директорий или
документов. Нужно указывать абсолютный путь, например: если надо запретить индексацию директории http://site.ru/secret/ ,
то строка будет выглядеть так -
Disallow: /secret/
Пока сайт не оптимизирован или полностью не готов, следует запретить его индексацию всем роботам. Соответственно robots.txt будет выглядеть так -

User-Agent: *
Disallow: /

Далее робот индексирует главную страницу и все остальные, на которые нашел ссылки (но не более 500 страниц за один раз).
Теперь рассмотрим сам HTML код. Прежде всего - это заголовок (то что между тегами ). Ему надо уделить много внимания, так как поисковые системы придают заголовкам большое значение при подсчете релевантности (особенно Яndex). Не
стоит здесь писать url вашего сайта - для этого есть адресная строка. Необходимо коротко и ясно отразить тему страницы, только не надо повторять одно и тоже много раз во всех падежах.
Допустим вы продаёте холодильники. Во многих магазинах я видел следующий заголовок .::Super Shop::. Интернет магазин. Любые товары - на любой вкус.
Неужели, люди ищущие это средство будут искать интернет магазин, а не само средство. Более разумным был бы такой заголовок: Холодильники. Большой выбор.

Тег "description" - очень важный тег. Именно его увидят пользователи в результатах поиска и решат, посещать ли ваш сайт. В данном случае я бы написал: "Холодильники из европы по низким ценам. Бесплатная доставка."

Тег "keywords" - сильно влияет на релевантность страницы. В него нужно включать 7 - 10 слов (не больше) по которым пользователи ищут в поисковых системах информацию, аналогичную вашей. Не надо повторять одни и те же слова по нескольку раз - это не повлияет на релевантность. Слова пишите без запятых - через пробел, чтобы поисковая система могла сама
составить из них словосочетания. В тоже время старайтесь слова, составляющие наиболее популярные поисковые запросы, ставить рядом. И самое главное! в "keywords" не должно быть слов, которые не встречаются нигде на странице - это очень распространенная ошибка, которая приводит к снижению релевантности страницы.

В теге "revisit-after" не указывайте меньше 9 дней, это может не понравиться роботу.

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

. Если
такой громоздкий заголовок не вписывается в концепцию дизайна, то его размер и цвет можно изменить в таблице стилей (CSS), главное чтобы заголовок оставался заголовком и выделялся на странице.

Если CSS расположить в отдельном файле то h1 можно придать любой внешний вид, вплоть до невидимости на странице. Паук не заметит подмены свойств (по крайней мере пока он этого делать не научился), но ходят упорные слухи что Google скоро прикроет и эту халяву:)) В любом случае не стесняйтесь использовать CSS, если надо придать заголовку более компактный вид
- это не будет считаться спамом. Но и не переборщите с количеством заголовков: 2-3 максимум, иначе вас исключат из базы данных поисковой системы. Если слово не из списка ключевых, не заключайте его в теги или , используйте их только при выделении ключевых слов. А как тогда выделять заголовки или пункты меню, не содержащие keywords ? Ответ простой
- используйте CSS. Старайтесь придерживаться частоты ключевых слов в 2%-7% и располагайте их как можно выше. Большую страницу, разбивайте на более мелкие (поисковым системам это нравится). Хотя общее количество страниц сайта, соответствующих запросу не сильно влияет на его положение в результатах поиска, все же лучше много небольших страниц, чем мало больших:). Не используйте фреймы - роботы их не "видят". Если без фреймов не обойтись, то описание сайта поместите в тег