SEO верстка сайта

SEO продвижение 842 13 марта 2017
seo верстка сайта

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

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

Что значит оптимизированная верстка

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

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

В этой публикации расскажу, за счет чего достигается оптимизация html-верстки.

Расположение html-элементов

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

Частой практикой при организации 3-колоночной верстки является расположение кода блока с контентом посередине (между двух сайдбаров). Однако расположив часть с важным содержимым перед сайдбарами, вы значительно повышаете привлекательность и релевантность веб-страницы в глазах поисковика.

Хороший верстальщик знает, как этого добиться, используя свойство float для элементов и прописав соответствующие стили для каждого блока.

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

Вывод один – чем выше в html-коде полезный контент, тем лучше.

Концепция разделения

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

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

С JavaScript следует поступать подобным образом, то есть выносить в отдельные файлы. Подключать js-файлы лучше в конце документа, прямо перед закрывающим тегом body. Это поможет ускорить загрузку страницы. Скорость загрузки страницы учитывается поисковиками при ранжировании.

Если у вас несколько css- или js-файлов, которые вы подключаете на одной веб-странице, попробуйте их объединить – это хороший способ увеличить скорость загрузки.

Важные теги SEO верстки сайта

На некоторые html-теги следует обратить особое внимание и использовать их с максимальной результативностью.

Самый значимый SEO-тег – это title. Содержит в себе название страницы и очень сильно влияет на ранжирование сайта. Должен содержать ключевые слова целевого запроса.

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

Keywords – ключевые слова. Сделайте его уникальным для каждой страницы.

Очень важные для верстки теги заголовков H1-H6. Использовать их нужно по назначению, для выделения заголовков и подзаголовков в теле статьи. H1 используйте только один раз на странице. Выделяйте с его помощью самое важное: название статьи, наименование товара, которому посвящена интернет-страница и т.д. Соблюдайте иерархию заголовков.

SEO-атрибуты

SEO верстка предполагает наличие атрибутов alt и title для картинок и ссылок.

При помощи атрибута alt мы даём возможность не только отобразить альтернативный текст, если картинка не загрузилась, но и попасть картинке в поиск. А оттуда придут новые посетители на сайт.

Атрибут title позволяет добавить описание для ссылки или картинки, что учитывается поисковыми машинами и дает больше информации посетителю.

Поисковик не может «прочесть» картинку, а атрибуты alt и title дают ему понять, что это за изображение и какому запросу оно лучше всего соответствует.

Корректность кода имеет значение

SEO верстка веб-сайта – это еще и валидная верстка, соответствующая W3C (World Wide Web Consortium) стандартам.

Объясним, почему это важно. Если в html-верстке есть ошибки или незакрытые теги, то поисковому роботу будет гораздо сложнее при ранжировании разбить контент на структурные части и добраться до сути. То, ради чего создавалась веб-страница может оказаться незамеченным из-за «поломанной» верстки. Результатом будут низкие позиции в выдаче.

К счастью проверить корректность верстки очень просто. В сети много W3C-валидаторов, которые покажут ошибки и предупреждения. Останется только исправить.

Кроссбраузерность и адаптивность

Поисковые машины все большее внимание обращают на поведенческий фактор. Если посетитель не сможет просматривать веб-сайт в своем любимом браузере (это может быть и старенький IE) или с мобильного устройства, то показатель отказов резко возрастает.

Вывод один – веб-сайт должен быть адаптивным и кроссбраузерным.

В сети можно найти сервисы, позволяющие тестировать отображение веб-страниц в разных браузерах. Некоторые из них специализируются только на версиях Internet Explorer. Практика показывает, что именно с ним возникает большинство проблем.

Адаптивность тоже несложно протестировать. Один из самых простых способов – это воспользоваться пунктом «Разработка» браузера Firefox. Выбрать подпункт «Адаптивный дизайн» и смотреть, как выглядит верстка на разных устройствах.

Важные рекомендации

  • Делайте верстку более структурированной и простой, не загромождайте лишними блоками.
  • Расположите основной контент как можно ближе к началу html-страницы.
  • Стили и скрипты размещайте в отдельных подключаемых файлах.
  • Используйте SEO-теги по назначению, повышая релевантность интернет-страницы.
  • Оптимизируйте картинки и ссылки, используя атрибуты alt и title.
  • Выделяйте гиперссылки нижним подчеркиванием и цветом, отличным от цвета основного содержимого.
  • Оптимизируйте css-код и изображения, стараясь уменьшить их вес – это нужно для быстрой загрузки веб-страниц.
  • Помните об удобстве пользователя. Сделайте так, чтобы просмотр вашего сайта с любого устройства и любым браузером был приятным.
  • Следите за корректностью верстки, не оставляйте незакрытых html-тегов, соблюдайте структуру и иерархию.

Итоговый совет будет таким: помните, проще учесть все детали сразу, чем переделывать в будущем.

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

На этой ноте буду заканчивать.

Делитесь постом с друзьями.

Подписывайтесь на обновления блога и будьте в курсе самых актуальных тем.

Андрей Ткаченко

Андрей Ткаченко

Директор по развитию Lead Flow Digital.

Дружить в: Facebook VK

Понравилась статья? Расскажите друзьям:

Комментарии:

  • Павел

    Когда у моей компании возникли проблемы с репутацией в интернете, я сразу обратился к ребятам из ваш-рейтинг.рф

    Они быстро провели мониторинг, выявили все источники с негативом и моментально его пофиксили.

  • Илья Нечаев

    Внимательно настраивайте КМС, регулярно проверяйте места размещения (все компании — компания — места размещения).

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

    в данной ситуации происходит неосознанный клик (по метрике видно как большое число отказов и малое время посещения).

    Вторая ситуация это скликивание в кмс, когда владельцы adsense площадок сами нажимают на свою рекламу, использует proxy, vpn и прочие методы накрутки кликов, clickfilter.io это сервис который мы разрабатываем сейчас для защиты от скликивания в подобных ситуациях.

    В этом случае рекомендую вручную отбирать площадки для рекламы и работать с аудиториями (возраст/пол/интересы).