30 SEO требований при разработке нового сайта

SEO требования актуальны в первую очередь под Google, однако большая их часть подойдет и для Яндекса.

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

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

Должна быть настроена отдача корректных кодов HTTP ответа сервера: 200, 301, 404, 503.

Должны быть настроены шаблонные 301 редиректы

• без слеша на конце на со слешем на конце https://site.com/catalog -> https://site.com/catalog/,
• несколько слешей в один слеш https://site.com/catalog//// -> https://site.com/catalog/,
• www. на без него https://www.site.com/ -> https://site.com/,
• с http на https http://site.com/ -> https://site.com/,
• с символов в верхнем регистре в нижний https://site.com/cATalOG/ -> https://site.com/catalog/,

Следует также проверить, чтобы страницы вида https://site.com/index, https://site.com/catalog/index.html и т.п. были недоступны (404) или редиректили на страницы с корректным url.

Страница 404 ошибки должна отдавать код 404 и быть сделана в шаблоне сайта со ссылками на основные страницы, а также содержать текстовую информацию об ошибке.

На каждой странице сайта необходимо настроить атрибут rel="canonical". Он определяет каноническую страницу для поисковых систем.

Технические требования

• URL в canonical указывается в абсолютном виде, т.е. https://site.com/catalog/.
• Для страниц с get-параметрами (https://site.com/catalog/?utm-source=abc) в url в качестве каноничной указывается страница без него.
• Для страниц с пагинацией в качестве каноничной указывается эта же страница с пагинацией, даже если используется get-параметр (!!!).
• Для страниц с полностью одинаковым контентом, но разным url обязательно должна быть указана только одна каноничная страница.

Необходима возможность добавлять мета-тег <meta name="robots" content="..." /> для всех страниц сайта, а также шаблонно для разделов. По умолчанию значение тега должно быть <meta name="robots" content="index, follow" />.

На время разработки сайта на его тестовой версии размещаем в корневом каталоге сайта вариант robots.txt запрещающий его обход ботами поисковых систем:

User-agent: *
Disallow: /

В robots.txt запрещаем обход страниц с вводом персональных данных, авторизации, поиска информации, сортировок, фильтров и т.п. Добавляем ссылку на карту сайта. Пример:

User-agent: *
Disallow: /cart/
Disallow: /profile/
Disallow: /user/
Disallow: /payment/
Disallow: *sort=
Disallow: *filter=

Sitemap: https://site.com/sitemap.xml

Sitemap.xml рекомендуется для всех сайтов, у которых более 100 страниц.

Технические требования к sitemap.xml:

• Xml разметка.
• Должен содержать только URL, отдающие код 200.
• Должен содержать только URL, доступные для индексации в поисковых системах.
• Максимальное количество URL - 50 000.
• Если на сайте более 50 000 Url, то создается индексный файл карт и дочерние карты сайта.
• Размер каждого файла - до 10 Мб.
• Не должно быть пустых полей.
• Обновление файла минимум 1 раз в сутки, лучше сразу после создания или удаления страниц с сайта.
• Кодировка - UTF-8.
• Упоминанием url sitemap в robots.txt

Теги к заполнению:

• <loc> - URL страницы в абсолютном виде,
• <lastmod> - дата последнего обновления контента страницы (можно пропустить этот тег, но желательно передавать в него актуальную дату создания / правки контента).

Если на сайте более 50000 url доступных для индексирования в поисковых системах, то создается индексный файл карты сайта и дочерние. Также можно создавать отдельную карту сайта для видео, картинок и новостей. Документация от Google по ссылке

https://support.google.com/webmasters/answer/183668?hl=ru&ref_topic=4581190

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

• https://domain.com/ru/,
• https://domain.com/fr/,
• https://domain.com/de/.

Для корректного ранжирования таких сайтов в различных регионах обязательно добавить атрибуты hreflang на страницы у которых есть альтернативы на других языках. Пример:

Технические требования:

• Hreflang должны быть на всех страницах сайта, у которых есть альтернативы на других языках.
• URL внутри тега должен быть абсолютный.
• Все ссылки hreflang должны быть взаимными.
• Возможно также указание пар “язык-страна”.

Подробности см. в рекомендациях Google https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites?hl=ru

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

Частая ошибка в переключателе - ссылки стоят на главные страницы языковых папок, либо гиперссылки вообще отсутствуют.

Если сайт планируется создать на JS-фреймворках таких как React, Vue и т.п. то обязательно рекомендуется подключить серверный рендеринг страниц в статический html-код для ботов поисковых систем. Это типичная рекомендация для SPA / PWA сайтов. Для React используется Next.js, для Vue - Nuxt.js. Подробнее о видах рендеринга можно прочитать здесь https://web.dev/articles/rendering-on-the-web?hl=ru

В статическом коде должны быть:

• Мета-теги и h1.
• Meta robots, canonical, hreflang.
• Микроразметка и OpenGraph разметка.
• Все элементы перелинковки: футер, меню, пагинация и т.п.
• Все тексты и картинки.
• Товары (хотя бы 20-30 шт.), их названия, цены если это листинг.

После внедрения на тесте проверям все ли корректно работает по методике вот этой статьи https://vc.ru/seo/1131353-pochemu-google-ne-vidit-kontent-vashego-sayta-i-kak-eto-ispravit

Даже на не SPA / PWA сайтах часть контента страницы может подгружаться после загрузки html-кода. Поэтому важно чтобы:

• Весь текстовый контент должен быть в статичном html-коде.
• Lazy-load для товаров и картинок рекомендуется настраивать только с 3 экрана, но точно не с первого.
• Визуальное скрытие контента, если оно требуется, делаем при помощи CSS (а не подгружаем его по нажатию на кнопку). Вариантов много: https://habr.com/ru/companies/ruvds/articles/485640/ .

Технические требования к страницам пагинации:

• Должны быть доступны для обхода поисковыми ботами и индексации.
• На страницах не выводим SEO-текст и не выводим оптимизированные мета-теги.
• Для мета-тегов и H1 рекомендуется использовать шаблон: %Название раздела% - Страница %page-number%.
• Первая страница пагинации т.е. /catalog/page-1 или /catalog/?page=1 должна редиректить на основную страницу листинга /catalog/.
• Несуществующие страницы пагинации должны отдавать 404 код, например, ?page=0, ?page=9999.
• Каноничной должна быть сама страница пагинации (!!!), а не страница листинга.

Open Graph разметка нужна для корректного отображения ссылок на сайт в соцсетях и мессенджерах.

Обязательные элементы:

• og:title — название страницы.
• og:description — описание страницы.
• og:type — тип объекта.
• og:image — URL изображения, описывающего объект.
• og:url — канонический URL страницы.

Справочная информация: https://habr.com/ru/companies/click/articles/492258/

Рекомендуется размещать разметку Schema.org в виде кода JSON-LD в разделе <head> html-кода страницы. Какую разметку применяем:

• Organization https://schema.org/Organization для Главной, Контактов, О компании.
• LocalBusiness https://schema.org/LocalBusiness аналогичный вариант, если вы предоставляете сервис только в одном или нескольких регионах, а не по всей стране.
• Webpage https://schema.org/WebPage или другой контейнер с информацией о компании, контактах, странице, сайте, соцсетях и т.п. Применяем на всех страницах.
• BreadcrumbList https://schema.org/BreadcrumbList на всех страницах, где есть хлебные крошки.
• ItemList https://schema.org/ItemList с вложенным типом Product https://schema.org/Product для листингов с продукцией.
• Product https://schema.org/Product с вложенным типом AggregateOffer https://schema.org/AggregateOffer для страницы с одним товаром или офером, т.е. если есть предложения от разных продавцов.
• Product https://schema.org/Product и если есть функционал (!!!) рейтинга товара или отзывы, то с типом AggregateRating https://schema.org/AggregateRating - для страниц товаров
• Article https://schema.org/Article, https://developers.google.com/search/docs/appearance/structured-data/article?hl=ru , с сущностью “author” с типом “Person” (с указанием автора, ссылкой на его профиль на сайте и соцсети).
• FAQPage https://schema.org/FAQPage для блока вопросов и ответов после статьи.
• NewsArticle https://schema.org/NewsArticle для новостей.

Обязательно валидируем разметку тут https://validator.schema.org/

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

• Http-авторизации.
• Отдачи 404, 403 кода по всем страницам.
• Запрета индексации в meta robots и обхода в robots.txt (только в robots.txt закрыть недостаточно).

Обязательно проверяем не закрыли ли от индексации основной домен!

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

Рекомендуется для внешних ссылок (ссылок на сторонние сайты со страниц вашего сайта) использовать атрибуты rel="nofollow" и target="_blank". Гиперссылки из комментариев и со страницы профиля пользователя (если этот функционал есть) недопустимы.

Общие рекомендации по структуре URL посадочных страниц:

• Использовать ЧПУ (человеко понятные url).
• Использовать в url тематические и ключевые слова, но не более 2х раз если это однокоренные слова.
• Избегать использования динамических параметров в url.
• Не использовать в адресе параметров id-сессии.
• В качестве разделителя слов использовать “-”.
• Все символы, кроме латиницы и цифр в символьном коде адреса страницы заменять на “-”.
• Использовать только символы в нижнем регистре.

Для сайтов под различные языки возможно использование символов локального языка в url. Пример:

Рекомендуется использовать следующие структурные элементы в коде:

• <header>,
• <nav>,
• <article>,
• <section>,
• <footer>,
• <main>.

Подробнее https://htmlacademy.ru/blog/html/semantics.

Заголовки контента оформляем в теги <H1>…<H4>. Меню и прочие элементы в шаблоне сайта оформляем при помощи CSS, не используем для этого теги H.

Меню

В меню необходимо разместить ссылки на все основные разделы и подразделы сайта.

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

Футер

В футере рекомендуется вывести:

• Логотип, название бренда и контактную информацию.
• Ссылки на мобильные приложения в сторах и группы в соцсетях.
• Ссылки на онлайн чат / службу поддержки.
• Ссылки о компании и услугах: Контакты, О компании, FAQ, Помощь.
• Ссылки на политики: Политика конфиденциальности, Политика об обработке cookies и т.п.
• Ссылки на важные для SEO страницы, которые не влезли в меню.

Хлебные крошки

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

Дополнительные блоки перелинковки для SEO

Для каждой страницы используем минимум 2-3 дополнительных блока для перелинковки. Идеи для блоков берем на основе конкурентов.

Нужна возможность задавать вручную для каждой страницы: Title, Description, H1. Также нужна возможность настраивать шаблоны тегов по разделам сайта, т.е. для всех страниц одного вида.

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

Оптимальный вариант: одной поле на небольшой текст 100-150 слов вверху страницы и второе поле внизу страницы.

При верстке абзацев внутри текста используем <p>, но не <div> или <span>.

Гиперссылки должны быть оформлены в виде <a href="/catalog/page/">anchor</a>, другие варианты недопустимы. При оформлении ссылки в виде кнопки button или любым другим способом дублируем ее также ссылкой <a href=””>.

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

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

Технические требования к картинкам:

• Настроить ресайз и сжатие картинок при загрузке через CMS.
• Использовать ключевые слова в названии файла картинки.
• Для ускорения загрузки картинок можно использовать CDN.
• Использовать адаптивные изображения и указывать путь к ним в теге srcset.
• Путь к изображению с максимальным разрешением указывать в теге src.
• Нужна возможность заполнять alt изображения вручную, он должен быть тематичным изображению и абзацу, в котором он расположен.
• Не использовать CSS для показа важных картинок.

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

Само-собой разумеется также надо помнить про принцип mobile-first.

Можно проверить в https://validator.w3.org/, однако для SEO специалиста достаточно сложно понять какие ошибки критичные, а какие нет.

Корректность работы сертификата можно проверить в одном из чекеров, например, в https://www.leaderssl.ru/tools/ssl_checker.

• Для большинства сайтов подойдут сертификаты подтверждающие домен (DV SSL).
• Для сайтов коммерческих компаний и сайтов с онлайн-платежами и авторизацией лучше использовать сертификаты подтверждающие организацию (OV SSL).
• Для крупных финансовых компаний, е-комов и т.п. лучше использовать сертификаты с расширенной проверкой (EV SSL).

Для JS, CSS, шрифтов и прочих статических ресурсов должно использоваться сжатие, например, GZIP. Также следует включать сжатие текста.

Задайте правила кэширования для статических объектов. Для неизменяемых объектов имеет смысл выбрать срок кэширования от месяца и более.

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

• X-Frame-Options
• Strict-Transport-Security
• X-Content-Type-Options
• Referrer-Policy
• Content-Security-Policy

Проверяем Security Headers тут https://securityheaders.com/

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