Техническое задание на разработку нового сайта для SEO-продвижения

Именно поэтому на этапе рисования, проектирования и верстки нужно привлечь SEO-специалиста. Он сможет увидеть недочеты сайта и в дизайне, и в структуре, и в коде, составит подробное ТЗ технической оптимизации сайта До выкатки в интернет.

Когда мы планируем делать сайт, мы хотим получить от него конкретную пользу: переходы посетителей и продажи.

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

Сегодня мы поговорим об основных технических SEO моментах, которые должны быть учтены при программировании любого сайта для продвижения его в интернете. Расскажем, что может быть, когда какие-то правила не учтены и почему это плохо или хорошо.

Система администрирования сайта (CMS, ЦМС, админка): важный момент при создании. Систем существует большое количество, есть даже «самописные», то есть программисты могут создать что-то свое. Но нужно понимать, что не все админки могут быть хорошо, удобно и понятно редактируемыми. Какие-то могут иметь ограниченный функционал: если вдруг мы захотим что-то добавить на сайте, система может не поддерживать такую возможно. В этом случае могут быть два варианта:

• либо делать «костыль» на сайте, то есть программист дописывает и внедряет дополнительный программный код, что может быть дорого и сложно,
• либо сайт переносится на другую систему администрирования, которая поддерживает те функции, которые вам нужны. А это опять затраты сил и денег.

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

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

Обзор хороших систем администрирования сайта, которые мы рекомендуем:

1. 1С-Битрикс. Платная CMS. Многофункциональная система, подходит для больших сайтов, в частности для интернет-магазинов с большим каталогом товаров и интеграцией с 1С. Высокая надежность, безопасность, стабильное обновление.
2. MODx (МОДикс). Бесплатная система администрирования сайта. Хорошо подходит для сайтов услуг и небольших интернет-магазинов.
3. UMI.CMS. Удобный конструктор сайтов. На этой системе можно делать сайты любого направления: от небольших сайтов услуг до огромных интернет магазинов. Очень удобна в администрировании.
4. WordPress (Вордпресс). Бесплатная CMS, популярна в рунете. Русифицированная система, легко устанавливается. Наполнение сайта информацией не требует дополнительных знаний. Часто используется как движок для блогов. Не рекомендуем для коммерческих сайтов, особенно интернет-магазинов.

Особняком стоят фреймоворки, например Yii, Laravel и другие — это гибкие системы, на которых можно реализовать что угодно под нужды бизнеса. Успешность функционирования зависит от квалификации разработчиков, как программистов, так и проектировщиков.

Файл роботс (правильное название robots.txt) — это текстовый файл, который располагается в корневой папке сайта (по адреcу site.ru/robots.txt) и необходим в первую очередь для поисковых роботов. В нем содержится перечень правил, каждое из которых запрещает или разрешает тому или иному поисковому роботу доступ к определенному пути на сайте.

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

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

User-agent: *
Disallow: /

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

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

Файл robots после релиза должен учитывать основные моменты:

• Свой набор правил для каждой ПС, если они отличаются. Если правила одинаковые, можно использовать все правила по User-agent: *.
• Если для разных поисковых систем мы хотим применять разные правила, например какие-то страницы сайта индексировать только для Google, а какие-то только для Яндекса, то необходимо использовать соответствующие юзер-агенты (User-agent: Yandex, User-agent: Google и пр.).
• Должны быть закрыты служебные папки и параметры, которые мы не хотим индексировать.
• Должна быть корректная ссылка на карту сайта (сайтмап).

Шаблоны страниц должны строиться по правилам HTML с правильным синтаксисом. Код должен быть валидным. Валидность — это соответствие кода существующим стандартам HTML.

Шаблон страницы строится по правилам:

• Все открывающиеся теги должны иметь закрывающиеся.
• Вложенность должна быть логичная и конечная.
• Если не будет каких-то важных тегов или закрывающих — может поехать верстка. Могут быть проблемы валидации кода, могут не читаться какие-то важные моменты типа микроразметки.
  Например, недавно на одном сайте нашлось, что нет открывающегося тега body, который является обязательным в HTML шаблоне — и у нас не читалась из-за этого микроразметка.
  На другом сайте нашли, что вообще нет открывающегося тега html — что тоже плохо.
• Все основные теги — html, head, body должны быть в каждом шаблоне.
• Необходимо убирать все ненужные блоки html кода, которые не несут полезной нагрузки для страниц.
• Скрипты нужно подгружать из отдельных js-файлов (за исключением скриптов метрики).
• Не оставлять больших кусков закомментированного кода в верстке (оптимально – удалять все комментарии на этапе вывода html-кода).
• Не использовать теги визуального и логического выделения (strong, b, i, em) для оформления в блоках дизайна.
• Не использовать теги заголовков H1-H6 для визуального оформления в дизайне.
• Отказаться от рopup, clickup, bodyclick и popunder (всплывающие, выпрыгивающие окна).
• Все CSS стили должны быть вынесены из тела страницы в отдельные файлы.
• Размер страницы: контент, файлы стилей CSS, графика и изображения, файлы JavaScrip — не должны в сумме превышать 10 Mб т.к. в противном случае страница может быть не проиндексированна.

Тег <base> задается в контейнере <head> и указывает браузеру правильный полный базовый адрес сайта. Обычно этот тег используют для сайтов, где используется относительный адрес (без домена в начале, то есть /catalog/stoli/). Браузер ищет этот тег, определяет полный адрес сайта и корректно загружает его.

Например, если адрес документа указан как <base href="http://www.site/">, то при добавлении рисунков достаточно использовать относительный адрес <img src="images/kartinka.jpg">. При этом полный путь к фотографии будет http://www.site/images/kartinka.jpg, что позволит браузеру всегда находить нужный файл.

При настройке тега base нужно всегда указывать полный домен с правильным протоколом и www. Если сайт индексируется без www и по протоколу https, то так его пишем в бейсе https://site.ru/

Необходимо уделить внимание формированию ЧПУ (человекопонятный урл, URL) страниц. ЧПУ – это уникальный адрес сайта или его отдельной страницы, который дает пользователю описание их содержания.

Основные моменты при формировании чпу:

1. адрес страниц не должен быть длинным;
2. ЧПУ должен состоять либо только из латинских букв, символов и цифр, либо должен быть написан русскими словами;
3. слова в адресе разделять дефисом. Пробелы и нижние подчеркивания (_) не использовать, так как поисковые системы могут плохо читать такие урлы (в частности, Google может игнорировать написание через нижнее подчеркивание);
4. не использовать символы ! % ( ) " ';
5. использовать ключевые запросы в ЧПУ;
6. однотипные ЧПУ с параметрами нужно писать по маске, например параметры типа «290х95х82» можно представлять как: 290х95х82 или 290-95-82.

Общие требования к адресам страниц (URL):

• Единый формат для всех адресов сайта;
• Транслитерация кириллического текста.

Сайт должен открываться либо с www, либо без www. Соответственно, домен нужно склеить 301 редиректом в какую-либо одну сторону.

Кроме того, главная страница сайта не должна открываться с дополнительными параметрами через ? или /, когда цепляется индексовский файл index.php (или с другими расширениями типа html), такое тоже склеиваем 301 редиректом, либо отдаем в 404 ошибку.

Внутренние страницы должны открываться только по одному адресу, либо со / на конце, либо без /. Предпочтительный вариант со / на конце. Клеим 301 редиректами в нужную сторону.

Кроме того, если страницы кроме слеша на конце, могут открываться с разными расширениями на конце типа php, html, htm — такое тоже клеим в сторону однозначного урла со / на конце.

Новый сайт нужно сразу подключать на HTTPS протокол. Сегодня это является важным фактором продвижения. Наличие у сайта SSL-сертификата говорит о его безопасности. Настраиваем редирект с http на https. Если основной домен без www, то http://www также редиректим 301 на https. И, конечно, проверяем настройку прямых редиректов со всех вариантов домена в сторону единственного правильного. Проверку делать можно в вебмастере Яндекса, а также в других независимых сервисах.

Для проверки ответа сервера страниц сайта мы используем сервис bertal.ru.

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

Внутренняя ошибка сервера 500 — это общий код состояния HTTP, который означает, что «что-то пошло не так» на сервере веб-сайта и страница недоступна. Иногда на сломанные страницы программисты навешивают вместо 404 ошибки код 500. Необходимо проверить сайт на наличии ошибки 500 — Internal Server Error. Такая ошибка означает, что сервер не отвечает, но при этом страницы с такой ошибкой часто попадают в индекс поисковых систем. Страницы с такими ошибками не должны формироваться на сайте. Нужно ошибку 500 заменить на 404, но только в том случае, если страница реально не существует. 500 ошибки на сайте все же нужны, если это просто временные проблемы с сервером (хостингом), то есть после исчезновения этой проблемы страница по урлу должна открываться.

Все ссылки на внутренние страницы сайта по всему коду должны формироваться по одному правилу и правильному единообразному формату:

• Если у нас ссылки со / на конце, то в коде они и должны быть прописаны именно так.
• Если мы пишем полный адрес каждой ссылки, то это также должно быть у каждой ссылки.
• Если адрес относительный (то есть без основного домена), начинаться она должна со / впереди, если вы не используете тег base в шаблонах сайта.

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

Сайтмап — важный элемент сайта. Это карта сайта в формате XML, которая показывается поисковым системам и говорит им, какие «работающие» страницы есть на сайте, и мы их рекомендуем индексировать. Тех страниц, которых в сайтмапе нет, индексировать мы не хотим. Сайтмап должен лежать в корне сайта. Путь к нему прописывается в файле роботс.

Сайтмап:

• должен содержать список URL-адресов страниц сайта в иерархическом порядке;
• должен информировать о приоритетности страницы;
• должен показывать данные о внесении последних изменений документов и регулярности их обновлений.

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

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

Практически на любом сайте встречаются ссылки на сторонние ресурсы — это могут быть ссылки на сайты разработчиков и продвиженцев, ссылки на соцсети, а также ссылки на любые другие сайты из контента. Такие ссылки называются внешними. Как и входящие, они бывают анкорными и безанкорными, размечаются с помощью тега A. И тут возникает вопрос — хорошо это или плохо. Ведь по ссылкам передается вес на другие сайты.

Мы рекомендуем:

• Ссылки на свои соцсети оставлять открытыми.
• Ссылки на разработчиков и продвиженцев можем тоже оставлять открытыми (это на усмотрение и договоренности), но лучше закрывать nofollow.
• Ссылки на авторитетные сайты типа Яндекса, Google, Википедии и аналогичных из контентной части можно не закрывать, если они дополняют контент (и при этом не сквозные), так как считается, что это может «хорошо» влиять на ранжирование самой страницы, если вы ссылаетесь на авторитетные ресурсы.
• Другие внешние ссылки закрывать в noindex nofollow: <a href="http://site.ru" rel="nofollow"><noindex>Анкор</noindex></a> (<!-- noindex --><!--/ noindex --> — валидный код)
• Все ссылки на сторонние сайты должны открываться в новом окне.

Важно! При закрытии ссылки в rel=nofollow донор все равно теряет ссылочный вес, хоть он и не передается сайту-акцептору.

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

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

Поэтому думать нужно об это уже на этапе дизайна: рисуем адаптивы для планшетов и мобилок.

Сайт должен быть с мобильной версией на этом же домене. Поддомен для мобильной версии не делаем.

На новый сайт обязательно нужно добавить коды счетчиков основных поисковых систем. Зачем они нужны?

• Чтобы собирать статистику посещений и действий пользователей на сайте.
• Понимать, какие страницы интересны и полезны, какие нет.
• Они нужны для информирования поисковиков о новых страницах и о посетителях сайта. Эта информация дает основание индексировать содержимое сайта своевременно. Что, в свою очередь, позволяет быстрее и качественнее попадать в поисковую выдачу.
• Также мы можем найти через счетчики «плохие» страницы сайта и кучу другой полезной информации.

Заводим новые счетчики для нового сайта в Яндексе и Google. Размещаем их как можно выше к верху шаблона сайта в блоке head.

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

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

Закрывать можно несколькими способами:

• через rel Canonical — но теперь это работает только в Google (Google такие страницы не индексирует, а Яндекс часто Canonical игнорирует, поэтому в индекс такие страницы попадают),
• через файл роботс с помощью оператора Disallow,
• через мета тег роботс noindex nofollow.

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

Если мы закроем страницы от индексирования «жестко», то товары могут быть поисковыми роботами не найдены. Поэтому закрывать нужно так, чтобы поисковые роботы могли ходить по страницам пагинации, но не индексировать их и не передавать им вес. Обычно так делают с помощью Canonical. Но так как в последнее время Canonical Яндексом игнорируются, пагинацию мы настраиваем следующим образом:

• настраиваем свои мета теги на страницах пагинации;
• не передаем текст с основной страницы каталога;
• не делаем страницу №1, так как она будет полным дублем: то есть настраиваем 301 редирект со страницы с параметром page=1 на основной раздел;
• настраиваем Canonical на страницах пагинации в сторону главного соответствующего раздела каталога;
• если все же страницы пагинации начнут попадать в индекс, навешиваем в код мета роботс noindex follow.

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

Для редактирования должны использоваться простые основные чистые теги p, ul, ol, h2, h3..., a, без стилей.

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

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

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

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

Скорость загрузки страниц сайта не должна превышать 2-3 секунд.

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

Поисковые системы напрямую замеряют скорость загрузки, повышая приоритет быстрых сайтов.

Поисковики следят за поведением людей: если страницы реже посещают и чаще закрывают — рейтинг понижается.

Сервисы проверки скорости сайтов:

• https://developers.google.com/
• https://gtmetrix.com/

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

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

Проверить настройку можно тут: https://last-modified.com/ru/.

Функцией заголовка служит информирование клиента о дате последней модификации web-страницы. Исходя из спецификации rfc 2616, клиент может «спросить» у веб сервера, не изменилась ли страница с определенного числа, послав серверу заголовок «If-Modified-Since». Если страница не изменилась, сервер возвращает только заголовок «304 Not Modified», в противном случае – сервер возвращает заголовок «200 OK» и тело страницы. Браузер не будет грузить одну и ту же страницу снова и снова, а веб сервер будет отдавать меньше данных.

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

Назначение:

• Для улучшения юзабилити сайта.
• Отображают структуру сайта.
• Создают перелинковку на сайте.
• Могут влиять на сниппет в выдаче.

При формировании крошек нужно учесть следующее:

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

Формы обратной связи — это элементы сайта для взаимодействия с пользователем. Чтобы он мог не только читать контент на сайте, но и что-то на нем делать: складывать товары в корзину и оформлять заказ, задавать вопросы и общаться в чате, звонить, писать.

Поэтому формы нужно добавлять максимально, где возможно, но при этом не навязчиво. Делать их заметными, удобными и понятными, не сложными, чтобы пользователь хотел ими пользоваться. Использовать в формах минимум обязательных полей. Делать проверку полей (на телефон, почту), чтобы получать максимально правильную информацию.

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

Формы помогают:

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

На этапе разработки сайта важно учесть создание полей для основных мета параметров сайта. Так как часто бывает, что не все эти поля могут быть учтены. Кроме того, все значения полей должны быть разными, то есть H1 например не должен совпадать с title, а title с description.

Поля в админке, которые нужно делать:

• Название страницы для админки
• Поле для title
• Для description
• Для keywords
• Для H1
• Для текстов (если интернет-магазин — до и после листинга товаров)
• Поле для ЧПУ
• Поле для 301 редиректа
• Поле для названия крошки
• Поле для пункта меню

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

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

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