Оптимизация 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, em2.h1-h6 & a href=…3.strong, b, em & a href=…
Заключение
Заглянув на страницы поисковых систем можно увидеть ряд ошибок, связанных с версткой сайта, в том числе ошибки валидации. Но здесь следует понимать, что они ставят перед собой совсем другие цели. SEO оптимизированная вёрстка требуется сайтам, одним из основных источников трафика которых — поисковые системы и какие бы крутые ссылки не ссылались на сайт, без хорошей оптимизации кода о первым позициях можно не мечтать.
