SEO-верстка сайта: в чем ее суть и как ее грамотно сделать?

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

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

За качественное наполнение сайта отвечает SEO-копирайтер. Но за правильное размещение на страницах сайта блоков с контентом ответственность несет SEO-верстальщик.

Верстка с SEO оптимизацией

Если сравнить два сайта, где на одном важная информация начинается на 25-й строке html-кода, а на другом - на 325-й, какой из них, по логике, будет лучше подавать информацию? Да, навороченный ресурс вполне может быть интересен пользователю, но первые пару секунд. Но затем человек начинает просматривать текст в поисках именно той информации, которая ему нужна. Лучше всего это видно на лендингах. Вот и поисковые машины не любят сотни страниц кода, которые нужно пройти, чтоб добраться до текстового наполнения. То есть чем дальше важный и полезный контент находится от начала страницы, тем менее он интересен поисковому роботу. То есть наиболее актуальная информация должна находиться как можно ближе к началу, иначе получается, что она попросту спрятана для поисковиков.

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

Примеры SEО-верстки

Рассмотрим все сказанное на практике. Так, для примера используем немного простого html-кода:

Итак, чтоб наша верстка смотрелась более дружелюбно с точки зрения SEO, переместим блок content по ближе к тегу body. Получился такой вот простой пример SEO-верстки:

Итак, что же мы получили в результате? Теперь сразу после хедера не будет длинного меню с кнопками репостов и других элементов, а сразу будет идти контент, и поисковик его быстрее найдет.

SEО-верстальщик и работа с элементами сайта

От работы SEO-верстальщика зависит очень многое. Если он не разместил в коде страницы нужные SEO-элементы, то оптимизация всего ресурса может оказаться не эффективной. Главный и самый первый элемент любой страницы - title страницы сайта. Он имеет важное значение для SEO. О нем забыть, конечно же, практически невозможно. Кроме того, не стоит упускать мета-теги meta keywords, а также meta description. Значение таких тегов часто недооценивается, многие и вовсе о них забывают. Обязательная часть html-страницы – это еще и теги H1, H2, H3. Если оформить заголовок материала или название чего-либо тегом H1, то это укажет поисковому роботу на первоочередную важность именно этого элементами. При этом теги H1, H2, H3 нужно уметь правильно использовать, ведь, как показывает практика, зачастую их применяют некорректно.

Оптимизация сайта включает и SEO оптимизацию изображений по конкретным запросам. Если верно применять атрибут ALT, это поможет изображениям попасть на первые позиции в Яндекс.Картинках либо Google Картинках. Не менее важен и атрибут title для ссылок. Также желательно, чтобы при верстке сайта ссылки имели нижнее подчеркивание.

Конечно же, грамотность SEO-верстки зависит от профессионализма верстальщика и понимания им необходимости наличия и всех важных для SEO тегов.

SEO-верстка и валидность

Главное, что надо помнить - SEO-верстка сайта должна быть кроссбраузерной для одинакового отображения элементов у всех пользователей, даже у тех, кто до сих пор использует Internet Explorer 6.

Кроме того, SEO-верстка обязательно должна соответствовать стандартам W3C, чтобы пройти проверку (валидацию). Для проверки валидности верстки сайта можно воспользоваться официальным валидатором W3C.

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

Советы по SEO-вестке

1. Верстку желательно оптимизировать, удаляя лишние блоки.
2. Важно оптимизировать html-код страниц.
3. Таблицы стилей css тоже важно оптимизировать и желательно выделить их в файл или даже в отдельную папку.
4. На сайте полезно разместить навигацию «хлебные крошки».
5. Не стоит слишком часто применять теги B и STRONG. Лучше применять только тег STRONG, и то в самом тексте, для других задач лучше использовать выделение при помощи стилей.
6. Тег H1 лучше использовать для заголовков и названий. Теги H2, H3 лучше не использовать при верстке, а применять в контенте.
7. Ссылки на сайте лучше делать с подчеркиванием (underline) и выделять их цветом.
8. Желательно делать весь контент сразу открытым, чтобы пользователю не довелось вручную активировать элементы для отображения частей контента.
9. Нежелательно делать страницы сайта очень длинными. Они не только плохо отображаются и долго грузятся, но и неохотно индексируются поисковыми машинами. А что говорить о пользователях, которые пролистав 5 раз, так и не увидят конец страницы. Они, скорее всего, покинут сайт и больше никогда не зайдут.
10. И не забывайте делать элементы сайта как можно проще. Ведь чем сложнее они, тем больше ошибок можно допустить. И помните, что контент на сайте – это самое важное. Ведь именно для контента и создана вся страница с точки зрения SEO-оптимизации.