Наш блог
Показать рубрики

SEO-верстка сайта: оптимизация html, css и js кода под поисковые системы

Назад к списку статей
SEO-верстка сайта: оптимизация html, css и js кода под поисковые системы

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

Оптимизация js и css

Для начала разберемся из css и js. Для чего нужна оптимизация css и js?

Около 50% пользователей уходят из сайта, если он грузится больше 3 секунд и при каждой дополнительной секунде конверсия сайта падает на 7%. Также скорость загрузки сайта является одним из факторов ранжирования.

Первое из чего нужно начать, это послушаться рекомендаций Google. Css и js код не должен содержаться в html коде сайта, его нужно вынести в отдельные файлы. Исключением являются небольшие инлайновые стили с 1-2 значениями. Число подключаемых файлов нужно максимально уменьшить, в идеальном случае оставив по одному подключаемому css и js файле. Подключение файлов js следует перенести в конец страницы (перед отображением страницы, браузер должен выполнить ее синтаксический анализ и если при этом он обнаруживает внешний скрипт, он должен его загрузить, а это лишний цикл операций, который замедляет показ страницы.

Также для ускорения загрузки js, css файлов и картинок желательно использовать кеширование и сжатие в формат GZIP.

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

Для правильной будущей оптимизации html кода рассмотрим все теги и как они влияют на SEO.

Блок <head>:

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

<description>- позволяет задать описание страницы, которое появляется в поисковой выдаче под названием. Имеет значительно меньшее влияние на ранжирование, но помогает повысить CTR (отношение числа кликов кчислу показов) страницы. Если мета-тег description заполнен, это не гарантирует, что в выдаче будет показано именното, что там написано, так как поисковые системы могут взять описание из контента. Но все же лучше настроить генерацию тега и не думать, какую часть текста ПС возьмут для описания.

<keywords> - указывает поисковым системам, по каким запросам релевантная страница. После появления этого тега, ему придали большое влияние на ранжирование страниц. Оптимизаторы могли спокойно продвигать страницу слюбым товаром интернет-магазина, например, по запросу «скачать реферат по истории» или по другим темам, которые давали сайту посетителей, но не клиентов. Сейчас влияние данного тега на продвижение точно не известно иочень многие его просто игнорируют, в том числе чтоб не навредить странице.

<meta name="robots" content="index/noindex, follow/nofollow"> (берется одно из значений, index или noindex, follow или nofollow) — запрет на индексацию страницы (noindex) и запрет на индексацию исходящих ссылок на странице (nofollow) поисковыми системами. Значение index и follow используются вместе со значениями запрета индексации, так как по умолчанию индексация страниц и ссылок разрешена. Использовать данный тег следует осторожно, чтоб не увидеть через некоторое время нулевой трафик из поисковых систем.

<link rel="canonical" href="..." /> - позволяет привязать несколько одинаковых страниц по содержанию, но с разными URL, к одной странице, для улучшения ее рейтинга. В большинстве случаевиспользуется для динамических страниц, на которых размещен одинаковый контент, например, страницы сортировки вкаталоге товаров или при работе с блогом, где одна статья может находиться в разных разделах и иметь разные URL.

<link rel='prev' href='...' /> и <link rel='next' href='...'/> - теги позволяют указать на страницах пагинации предыдущую и следующую страницы для поисковых систем, если материал разбит на несколько частей и находится на разных урлах.

Блок <body>:

<h1> - <h6> - заголовки на странице. Тег <h1> следует использовать 1 раз, как и <title> он указывает основное содержание страницы, но имеет меньшее влияние на ранжирование в поисковой выдаче. Как правило, для интернет-магазинов в теге <h1> указывается на страницах категорий и товаров названия этих категорий итоваров, для информационных страниц — название, которое заинтересует читателя плюс, по возможности, ключевые слова.

Теги <h1> - <h6> должны соблюдать логическую структуру. Заголовок <h1> содержать заголовки <h2>,в которых заголовки <h3> и т.д. Использовать их желательно только в текстовом содержании страницы (например, для разбития основного контента на странице, но не для блоков, которые выводятся на всех страницах сайта). Если взять во внимание, что тег <h1> помогает повысить значение слов при ранжировании, заключить в него весь текстна сайте и поправить с помощью стилей, чтоб его можно было читать, то никакого преимущества это не даст, а только пойдет во вред такой странице.

<strong>, <b>, <em> - предназначены для акцентирования внимания на некоторых фразах исловах в описании страницы, статьи, новости и т.д. (в том числе повышают значимость этих слов при ранжировании). Не следует использовать их для верстки тех елементом страницы, которые повторяются, например, на всех товарах. Для этого лучше применять css. Хотя и точно не известно, имеет ли влияние повторяющейся на всех страницах сайта слово или фраза, внутри, например, тега <strong>, но лучше использовать теги по их назначению. Думаю ПС это оценят.

<table> - также предназначен в первую очередь для размещения в текстовом контенте страницы. Позволяет сделать текст более интересным для прочтения, чем повышает доверие ко всей странице от поисковые систем (такое же действие оказывают списки, картинки, видео).

<ul>, <li>, <ol>, <dl>, <dd>, <dt> - списки, которые используются для создания меню сайта и в основной части на странице для структурирования текстовой информации.

<img> - картинки на странице. Описание картинки нужно помещать в атрибуты alt=”...” иtitle=”...”, которые помогут при ранжировании в поиске по картинках. Также на позицию картинки в выдаче оказывает влияние, если название файла картинки соответствует ее описанию.

<noindex> - указывает ПС Яндекс содержимое документа, которое не нужно индексировать, например, служебная информация. Применять нужно очень осторожно и в достаточно редких случаях.

<div> - собственно тег для верстки сайта, на SEO не влияет.

<br> - тег для переноса текста, но не для изменения размещения блоков. Но это уже больше для валидности верстки, а не для оптимизации. На оптимизацию сайта не влияет.

<p> - задает текстовый абзац для основного контента на сайте (например, статьи или описания товара, категории в интернет-магазине). Желательно также применять в основном для главного содержания отдельной страницы.

<span> - строчный елемент, не оказывающий влияния на SEO. Удобен в многих случаях для использования вместе с css в не основном контенте страницы для замены тегов выделения и заголовков.

<header> - шапка сайта.

<footer> - подвал сайта.

<a> - тут нужна отдельная статья. И не одна.

Может какой-то тег и пропустил… но значит он менее важен. Также не были учтены часть новых тегов html5, такие как <article>, <aside>, <nav>, <section>.

Если расположить html теги по мере влияния на ревалентность ключевых слов, то выйдет где-то так: title, h1-h6,strong, description, b, em, p, keywords, ul->li & ol->li.

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

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Название страницы</title>
    <meta name="description" content="Описание страницы" />
    <meta name="robots" content="index, follow">
    <link type="text/css" rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <a href="/"><img src="internet-magazin.jpeg" alt="интернет-магазин" title=”интернет-магазин” class=”logo”></a>
      <ul>
          <li>Категория 1</li>
          <li>Категория 2</li>
            <ul>
              <li>Категория 2.1</li>
              <li>Категория 2.2</li>
            </ul>
          <li>Категория 3</li>
        </ul>
    </header>
    <div>
      <h1>Заголовок страницы</h1>
      <p>Основной контент с применением тегов <h2>-<h6>, <strong>, <b>, <em>, <br>, <table>.
      </p>
    </div>
    <div>
      <span>Боковой блок с дополнительной информацией.</span>
    <div>
    <footer>
      ...
    </footer>
    <script type="text/javascript" src="js.js"></script>
  </body>
</html>

Что еще нужно учесть при SEO-верстке сайта

  • Плохое влияние на страницу может оказать большое количество ошибок валидации. Не желательно использовать пустых тегов и css, js файлов, которые не используются на странице. Чем легче будет код, тем легче поисковым системам его проанализировать.
  • Не стоит использовать флеш и фреймы, которые очень не дружелюбны с поисковыми системами. Также поисковые системы не распознают текст, который нарисован с помощью картинки.
  • Кроссбраузерность сайта влияет на поведение пользователей и заставляет их покидать сайт не получив нужную информацию или не сделав покупку. Как следствие ухудшаются поведенческие факторы, которые сказываются на оптимизации всего сайта.
  • Наличие мобильной версии сайта или его адаптивность стала фактором ранжирования и, как и кроссбраузерность, позволяет уменьшить показатель отказов и увеличить конверсию сайта на мобильных устройствах. Google начал учитывать наличие мобильной версии в 2015, году (mobile-friendly), а Яндекс в 2016, назвав алгоритм ранжирования «Владивосток».
  • Основной контент на странице должен быть размещен в html коде ближе к началу, так он будет более ревалентный с точки зрения поисковой системы.
  • Контент не должен быть спрятан с помощью display:none.
  • Если с помощью тегов можно повысить значимость ключевого слова, то также можно и получить отрицательный эффект, если некоторые теги будут пересекаться, например
    1. h1-h6 & strong, b, em
    2. h1-h6 & a href=…
    3. strong, b, em & a href=…

Заключение

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

Назад к списку статей
Подпишись на наш блог:
ПОХОЖИЕ СТАТЬИ:
Как правильно писать статьи для блога - пошаговое руководство
SEO
02.03.2016

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