Article title
15 февраля 2016

Как разработать SEO friendly сайт?

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

В этой статье мы рассмотрим, что должно быть на сайте, готовом к оптимизации. И дадим рекомендации, как все это реализовать.
Кодировка
Не нужно изобретать велосипед. Для текстовых файлов используйте кодировку utf-8 без BOM, для баз данных — utf8_general_ci.

Если кодировка неверная, то текст страницы будет выглядит так:
Структура
Не усложняйте структуру. Руководствуйтесь простой схемой: родитель – дочерний элемент. Избегайте необоснованно большой вложенности или псевдородителей.

Рассмотрим на примере 2-х сайтов.

Перейдем в магазине «М.Видео» в карточку товара — http://www.mvideo.ru/products/televizor-lg-55eg910v-10008564. На странице есть описание телевизора. Но если мы захотим перейти в общий раздел товаров — products, то потерпим неудачу — нас встретит 404 страница.
То же самое — в интернет-магазине DNS. На странице http://www.dns-shop.ru/catalog/17aa72ab16404e77/noutbuki-i-planshety/ мы можем выбрать интересующую категорию товаров. Однако если мы захотим узнать, что находится в таинственном разделе с набором цифр и букв, и сократим URL до предыдущего слеша — http://www.dns-shop.ru/catalog/17aa72ab16404e77/, нас переправит обратно в раздел «Ноутбуки и планшеты».


В нашем случае products и 17aa72ab16404e77/ являются лишними структурными вложениями и не несут для пользователя никакой пользы. От таких страниц следует избавляться.
URL
URL-адреса должны быть приведены к виду SEF (или ЧПУ — «человеко-понятный урл»). Это аксиома — следовать ей нужно обязательно, если хотите добиться успехов в продвижении.

Сравните 2 адреса:
Приведен к виду SEF
Как считаете, к какому URL более лояльны пользователи и поисковые роботы?
Дублирование
Дублирование всегда являлось негативным фактором ранжирования. Избегайте любых повторов на сайте — это касается как самих страниц, так и частичного копирования контента.
Метатеги и заголовки
Метатеги — элементы, содержащие емкое описание страницы, которое отображается посетителям в поисковой выдаче. Они в обязательном порядке должны быть прописаны для каждой страницы. В коде метатеги размещаются сразу после открывающего тега "<head>" в следующем порядке:

  1. <title>[Заголовок страницы]</title>
  2. <meta name="description" content="[Описание страницы]"/>
  3. <meta name="keywords" content="[Ключевые слова страницы]"/>

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

Возьмем к примеру страницу site.ru/news. Если мы поменяем Title этой страницы, то на всех дочерних элементах раздела «Новости» скорее всего будет точно такой же Title. Налицо очевидная недоработка программистов. Устраняется она легко, главное — вовремя ее обнаружить.
Канонические ссылки
Такие ссылки следует размещать на всех страницах с get-параметрами. Они позволяют избежать недопонимания со стороны поисковых систем при индексации сайта.

Канонические ссылки следует указывать на страницах:

  1. фильтров;
  2. сортировки;
  3. печати;
  4. пагинации;
  5. страницах с get-параметрами.

Так выглядит код страницы, если канонические URL заданы:
Навигационные ссылки
Придерживайтесь рекомендаций:

1. Следите за тем, чтобы каждый документ был доступен по обычной ссылке, обозначенной в HTML-коде страницы тегом <a href="[Адрес ссылки]"[Другие атрибуты ссылки]>[Текст ссылки]</a>.
2. Все ссылки на внешние сайты должны открываться в новом окне. Для этого добавьте к ссылке атрибут target="_blank".
3. Пагинация в каталоге должна быть без использования технологии ajax.
4. Активный пункт меню не должен являться ссылкой.
5. Ссылка на главную страницу должна быть неактивной на главной странице.
6. Хлебные крошки на всех страницах должны быть глубже, чем на главной странице. При этом текущий элемент должен всегда оставаться неактивным.
Микроразметка
При разработке сайта следует внедрить микроразметку. За основу лучше взять schema.org и дополнить другими микроформатами. Актуальный список поддерживаемых поисковыми системами форматов можно посмотреть в панели вебмастеров в разделе «Помощь» (Яндекс Вебмастер и Google Webmasters).

Списки поддерживаемых схем постоянно обновляются. Важно, чтобы микроразметка не содержала ошибок и передавала нужные данные. Посмотреть, как считываются микроданные со страницы, можно с помощью валидаторов — Валидатора микроразметки от Яндекс и Google Structured Data Testing Tool.

Если валидатор не выдает ошибок, это еще не значит, что все верно. Проверьте иерархию типов по классификатору. Русифицированный справочник и классификатор по schema.org — на ruschema.org.
Кеширование и сжатие
Включение механизма кэширования существеннно увеличивает скорость загрузки страниц сайта. Условно можно выделить 2 уровня кеширования:

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

  1. Uptime должен стремиться к 100%.
  2. Измерьте минимальное время ответа сервера.
  3. Узнайте «запас» лимитов — физическую, оперативную память и т.д.
  4. Доступные страницы должны отдавать код 200.
  5. Недоступные или неправильные страницы — код 404.
  6. Для перенаправлений должен применяться 301 редирект (302 не подходит).
  7. Должна присутствовать возможность принудительной установки кода 503, а также ручной установки кода 410 для несуществующих страниц.
Карта сайта sitemap.xml
На сайте должна быть предусмотрена система автоматической генерации xml-карты по адресу example.ru/sitemap.xml.

Есть несколько требований:

  1. В каждом файле должно содержаться не более 50000 URL. Учтите, что размер файла до сжатия не может быть больше 10 Mб. Если лимиты превышаются, файл следует разделить на несколько элементов и указать ссылки на них в главном файле карты сайта.
  2. В файле необходимо использовать кодировку UTF-8. При этом нет необходимости использовать Punycode для кириллических URL — робот Яндекса распознает их как в закодированном, так и в оригинальном виде.
  3. Файл Sitemap должен находиться на том же домене, что и сайт, для которого он составлен.
  4. При обращении к файлу сервер должен возвращать код ответа 200, а также указание на mime тип данных xml. Пример заголовка ответа сервера — «Content-type: application/xml».

Так выглядит xml-карта сайта:
Карта сайта HTML
На сайте должна иметься возможность создать HTML-страницу карты сайта. Карта представляет собой древовидно-распределенные ссылки на документы (страницы) ресурса.

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

Так выглядит карта сайта HTML:
Верстка
Принципы верстки сайта должны соответствовать концепции минификации, а также современным стандартам (html5/css3).

Важно соблюдать иерархию DOM-дерева в исходном коде. Все теги должны быть закрыты. Обязательно проведите проверку на валидность.
Конкатенация
Соблюдение этой технологии носит рекомендательный характер. Принцип конкатенации предполагает слияние отдельных файлов в один. Это касается набора *.js и *.css файлов.

Рассмотрим пример, типичный для Bitrix. На страницу подключаются файлы (и это еще не все):

<link href="/bitrix/js/main/core/css/core.css?14158906708964" type="text/css" />
<link href="/bitrix/js/socialservices/css/ss.css?14170868004465" type="text/css" />
<link href="/bitrix/js/main/core/css/core_popup.css?141708664628664" type="text/css" />
<link href="/bitrix/templates/verda/components/bitrix/news.list/colors/style.css?1415890663108" type="text/css" />
<link href="/bitrix/panel/main/popup.css?141708637822773" type="text/css" data-template-style="true" rel="stylesheet" />
<link href="/bitrix/templates/verda/components/bitrix/news.list/slider_main_page/style.css?1415890663108" type="text/css" data-template-style="true" rel="stylesheet" />
<link href="/bitrix/templates/verda/components/bitrix/news.list/left_aside/style.css?1415890663108" type="text/css" data-template-style="true" rel="stylesheet" />
<link href="/bitrix/templates/verda/components/bitrix/catalog.section.list/footer_menu/style.css?14158906647305" type="text/css" data-template-style="true" rel="stylesheet" />
<link href="/bitrix/templates/verda/template_styles.css?14158906643600" type="text/css" data-template-style="true" rel="stylesheet" />


При использовании конкатенации код принимает следующий вид:

<link href="/bitrix/templates/verda/styles.css?14158906643600" type="text/css" />

Количество запросов к серверу снижается на порядок. Тем самым мы ускоряем загрузку страницы.
Минификация
Минификация так же носит рекомендательный характер. Суть технологии проста: объем загружаемых файлов уменьшается путем удаления пробелов, табуляций и символов перевода строк в файлах css. Если вы используете минификацию, сделайте две версии одного файла: например, main_css.min.css — минифицированный файл, подгружающийся на странице, и main_css.css — исходный файл, необходимый для удобной правки, корректировки, а также дальнейшей минификации.
Изображения
Все изображения на сайте следует загружать в формате jpeg. Следите за общим объемом изображений, чтобы не перегружать страницы. В противном случае может увеличиться скорость открытия страниц, что негативно скажется на поведении посетителей на сайте.
Спрайты
Спрайт — несколько изображений, объединенных в одном файле. Спрайты снижают количество запросов пользователя к странице и уменьшают общий размер изображений. В итоге страницы грузятся быстрее.

Сегодня спрайты используются при разработке всех проектов, поскольку позволяют сократить количество запросов к серверу за счет того, что все элементы находятся в одном файле. Основная область применения спрайтов — элементы интерфейса (UI).

Выборка нужного участка элемента задается с помощью правил в файле css:

css: background-position: [по оси x]px [по оси y]px;

Значение указывается отрицательным, например, –128px.
Base64
Base64 — кодирование, которое используется для снижения количества запросов к серверу. Им можно закодировать любое содержимое. Однако имеется небольшой ньюанс: закодированное изображение имеет довольно большой объем, поэтому в base64 обрабатывают только относительно небольшие элементы, либо спрайты.
Шрифты
Обратите внимание на 3 вещи:

1. Размер файла шрифтов
Нужно следить, чтобы файлы шрифтов не были слишком большими по объему занимаемого пространства. Приветствуется использование шрифтов из Google Fonts. Интерфейс позволяет выяснить, насколько быстро будет загружаться шрифт.

2. Рендеринг в браузере
Шрифт в макете и браузере отображается по-разному. Поэтому при выборе шрифта ориентируйтесь в том числе на то, как он выглядит непосредственно в браузере — не слипаются ли буквы и т.д.

3. Способ подключения
При подключении файлов шрифтов нескольких начертаний через @font-face нужно использовать свойства, характеризующие начертание font-weight при одинаковом font-family.

Пример:

@font-face {
font-family: Intro;
src: url(./font/Intro-Regular.otf);
font-weight:normal;
}
@font-face {
font-family: Intro;
src: url(./font/Intro-Light.otf);
font-weight:light;
}
@font-face {
font-family: Intro;
src: url(./font/Intro-Bold.otf);
font-weight:bold;
Стили
Лучше отказаться от использования стилей, указанных через атрибут style (inline стилей). Если имеются несколько селекторов одного рода, у которых есть одинаковые свойства, то лучше объедините их в один общий селектор.
Интерфейс
При создании элементов интерфейса придерживайтесь рекомендаций:


  1. Если можно создать элемент с помощью правил css, а не графического файла, сделайте это. Каждое отдельное изображение — это один запрос на сервер, а нам необходимо снизить общее количество запросов.
  2. Что касается интерактивных элементов (выпадающего меню и т.д.), то лучше задать их поведение с помощью правил ccs-анимации, а не сценариев javascript.
  3. Использование векторных элементов интерфейса предпочтительнее, т.к. их внешний вид не зависит от разрешения экрана. Они одинаково хорошо будут выглядеть на всех устройствах. Удачный пример — библиотека Font Awesome.
  4. Сделайте так, чтобы все интерактивные элементы (кнопки, формы и т.д.) можно было выбрать/нажать/заполнить/отметить с помощью кнопок клавиатуры (tab, стрелок, enter, пробела).
Javascript
Отдельные фрагменты кода javascript лучше не вставлять на страницы, а объединить в отдельный подключаемый внешний файл. Скрипты, которые не особо важны для работы страницы, следует подгружать асинхронно — с помощью атрибута async: <script type="text/javascript" async src="..."></script>. Не стоит забывать про унификацию кода — одинаковые куски лучше выделять в функции.
Подведем итог
Если вы до сих пор делаете сайты без упора на дальнейшее продвижение, но хотите все исправить, смело берите наши рекомендации.

В будущем они помогут избежать многих проблем:

  1. «Косяков» в работе сайта.
  2. Плохой индексации ресурса.
  3. Лишней траты времени программистов.
  4. Увеличения стоимости проекта.
  5. Низких позиций сайта.

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

Читатайте, как мы разработывали интернет-магазин межкомнатных дверей с SEO friendly структурой
3505

Поделитесь материалом с друзьями и коллегами

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

+7 499 653 78 83