SEO-оптимизированная верстка сайта

SEO-оптимизированная верстка сайта

SEO-верстка сайта – это фактически обычная верстка html документа с единственным отличием: при SEO-верстке текстовые поля в коде размещаются как можно выше

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

Примеры SEO-верстки html страниц

В стандартном варианте пример кода обычной страницы выглядит так:

<body>
<div id="wrapper">
<div id="header"></div>
<div id="sidebar"></div>
<div id="content">Тут расположен важный контент</div>
<div id="footer"></div>
</div>
</body>

Не прилагая особенных усилий, блок с контентом можно вынести выше сайдбара. Тогда пример СЕО-верстки будет выглядеть так:

<body>
<div id="wrapper">
<div id="header"></div>
<div id="content">Тут расположен важный контент</div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>

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

Важные для SEO элементы при верстке сайта

Ряд элементов html имеет ключевое значение при внутренней оптимизации сайта. При сео-верстке сайта стоит уделять внимание тегам:

  1. Title;
  2. H1-h3;
  3. Keywords;
  4. Description;
  5. Alt у изображений.

Эти теги используются для определения релевантности страницы сайта. Важно использовать из по назначению.

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

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

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

  1. Необходимо писать максимально оптимизированный код – чем короче, тем лучше.
  2. Стили и скрипты необходимо вынести в отдельные файлы. И здесь нужно стараться писать максимально кратко.
  3. Используйте на сайте навигационную цепочку.
  4. Постарайтесь не использовать в верстке страниц теги выделения текста: жирный, курсив. Эти теги лучше использовать в тексте, стиль прочих элементов сайта можно задать при помощи стилей.
  5. Теги заголовков должны использоваться только в заголовках. Не нужно применять их для оформления элементов сайта.
  6. Ссылки на сайте лучше оформлять контрастным цветом и подчеркиванием. Так точно ни у кого не возникнет сомнения, что это именно ссылка.
  7. Не нужно делать невидимых элементов на сайте.
  8. Старайтесь не создавать слишком длинных страниц – они долго индексируются, часто их никто не дочитывает до конца.

Основное правило, которому стоит следовать при SEO-верстке – это простота. Чем проще и короче при сохранении функциональности будет ваш код, тем выше будут позиции сайта.

Возможно, вам будет интересно

Закончена разработка сайта для компании "ГК Стим"
Закончена разработка сайта для компании «ГК Стим»

Сайт собран из комплекта посадочных страниц под каждую товарную позицию. Мы разработали 2 основных прототипа, внесли в них правки, ужаснулись таблице с сортаментом в несколько сотен наименований. Как такое размещать на лендинге? Ответ вы найдете на сайте «ГК Стим». Лендинг по продаже металлопроката оптом «ГК Стим» «Стим» реализует черный металлопрокат оптом. Это довольно крутые ребята: […]

Статьи и новости
Подробнее...
Яндекс.Аудитории - автоматическая загрузка данных из CRM
Яндекс.Аудитории — автоматическая загрузка данных из CRM

Интеграция Аудиторий с CRM позволит создавать рекламные кампании в контекстных сетях, которые будут буквально предугадывать интересы вашей целевой аудитории. Представьте, например, что пользователь, дошедший до определенной стадии сделки, но так и не заключивший договор, автоматически попадает в список ретаргетинга, и в интернете его настигает ваша реклама с уникальным предложением. Или что рекламные объявления сами собой начинают […]

Статьи и новости
Подробнее...
Вебвизор 2.0 от Яндекса вышел в открытую бету
Вебвизор 2.0 от Яндекса вышел в открытую бету

На данный момент, посетители обратили внимание на появление в Вебвизоре функции переключения на версию программы 2.0. До этого она тестировалась в закрытой бете. Поисковик Яндекс поделился основными «фишками» обновленного Вебвизора Поисковая система делится информацией что в самые ближайшие месяцы эта версия обновленного Вербизора будет во всеобщем доступе. Новым пользователям сервиса, Яндекс предлагает пройти онлайн-игру, чтобы […]

Статьи и новости
Подробнее...
Заказать консультацию
Оставьте ваш номер телефона, и мы вам перезвоним в ближайшее время