разработка

SEO на этапе разработки сайта и интернет-магазина: основные требования по внутренней оптимизации

Владимир
Аналитик
SEO на этапе разработки сайта и интернет-магазина
Создание интернет-магазина — трудоемкий процесс. Разработчику приходится соблюдать ряд технических правил и стандартов, чтобы получить функциональный сайт. Сайт, который будет отвечать требованиям поисковых систем и интересам пользователей.

Почему стоит сразу подключать SEO

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

Учет поискового спроса при формировании структуры обеспечивает:

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

Чек-лист по внутренней SEO-оптимизации сайта для разработчика

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

Что мы делаем на этапе разработки интернет-магазина:
Отправьте заявку на юзабилити-аудит сайта прямо сейчас и увеличьте конверсию минимум на 20%! Найдём точки роста конверсии и выявим барьеры на пути пользователей сайта.

1. Настраиваем robots.txt

Файл robots.txt — это текстовый файл в корневом каталоге сайта, содержащий правила для корректной индексации ресурса в поисковых системах.
SEO на этапе разработки сайта
1.1. Создаем только один файл robots.txt на сайте;
1.2. Файл располагаем в корне сайта по ссылке вида: https://site.ru/robots.txt;
1.3. Размер файла не превышает 32 KB;
1.4. Задаем отдельные User-agent для поисковых роботов Яндекс и Google;
1.5. Прописываем директивы Disallow (запрещает индексировать):
- закрываем от индексации служебные страницы (личный кабинет, корзина и др.);
- закрываем от индексации страницы с динамическими параметрами в URL;
- закрываем все ненужные для индексации страницы сайта.
1.6. Прописываем директивы Allow (разрешает индексировать):
- открываем для индексации файлы .css;
- открываем для индексации файлы .js;
- открываем для индексации изображения.
1.6. Для кириллических адресов страниц используем кодировку Punycode;
1.7. Указываем ссылку на карту сайта sitemap.xml.

2. Устраняем дубли сайта

Дубли или «зеркала» сайта — это точные или частичные копии ресурса, расположенные на разных доменах. На этапе разработки интернет-магазина тестовые ветки скрывают от индексации. Дубли могут негативно сказаться на ранжировании ресурса в будущем.
Требования по настройке копий сайтов:

  • на всех тестовых сайтах размещаем файл robots.txt;
  • закрываем сайты от индексации, прописав в robots.txt две строки:
User-agent: *
Disallow: /

3. Устраняем технические дубли страниц

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

  • редирект с/без слэша в конце URL: site.ru/cat или site.ru/cat/;
  • редирект с www или без: www.site.ru или site.ru;
  • редирект с index.html на без в конце url: site.ru/index.html;
  • редирект с index.php на без: site.ru/index.php;
  • редирект с лишних слэшей в url: site.ru/cat/// или site.ru///cat/;
  • редирект со строчных url на прописные: site.ru/CAT/, site.ru/Cat/ или site.ru/cat/;
  • редирект с HTTP или HTTPS.

4. Настраиваем кодировку сайта

Кодировка сайта — это набор связанных между собой символов кода и соответствующего визуального отображения элементов на экране. Самыми популярными кодировками считаются UTF-8 и Windows 1251. Для современных сайтов предпочтительнее UTF-8, так как его поддерживают все общепризнанные браузеры и поисковые системы.
Настраиваем кодировку сайта UTF-8
Где указывать корректную кодировку:

  • в мета теге html-документа в блоке head;
  • в текстовых html-файлах;
  • в файле .htaccess;
  • в базе данных MySQL.

5. Важный контент не выводим через javascript

Основная проблема сайтов, использующих javascript — плохая индексация. Хотя Google и заявляет, что при повторном и последующих заходах анализирует JS на странице, индексация проходит долго. А Яндекс до сих пор некорректно индексирует такой контент.
Чтобы не было проблем с индексацией страниц сайта, значимый контент отдаем поисковым системам в html-коде. Увидеть, содержится ли на странице важный для индексации контент, можно отключив в браузере javascript.

6. Настраиваем автогенерацию карты сайта sitemap.xml

Sitemap.xml — это текстовый файл в корневом каталоге сайта, сообщающий поисковым системам о необходимых страницах и увеличивающий тем самым вероятность попадания в индекс.
Настраиваем автогенерацию карты сайта sitemap.xml
Требования по настройке sitemap.xml:

  • создаем отдельные файлы sitemap.xml для интернет-магазина;
  • файл располагаем в корне сайта по ссылке вида: https://site.ru/sitemap.xml;
  • выводим не более 50 000 URL в одной карте сайта;
  • если XML-карта сайта содержит более 50 000 URL или размер превышает 10 MB, разбиваем ее на несколько XML-карт. Ссылки на все XML-карты сайта размещаем в sitemap.xml;
  • размер одного файла не более 10 MB;
  • настраиваем автогенерацию карты сайта;
  • ссылку на XML-карту сайта размещаем в файле robots.txt;
  • проверяем, чтобы все страницы отдавали код ответ сервера 200 OK;
  • после запуска сайта в эксплуатацию, добавляем ссылку на sitemap.xml в панель вебмастеров Яндекс и Google.

7. Оптимизируем URL-адреса (ЧПУ-адреса)

ЧПУ (человеко-понятный URL) — это адрес страницы, кратко отражающий содержание, простой и понятный для пользователя и поисковой системы. Правильная настройка URL-адресов положительно влияет на SEO-оптимизацию сайта.
Требования по настройке URL-адреса:

  • URL страниц пишем транслитом (не рекомендуем кириллицу);
  • адреса только в нижнем регистре;
  • для разделения слов в URL используем дефис (пробелы заменяем на дефис, не используем лишние символы);
  • URL должен заканчиваться правым слэшем «/» (без .html);
  • настраиваем автоматическую генерацию URL из названия страницы;
  • реализуем возможность ручной правки символьного кода URL;
  • не используем слишком длинные URL, чтобы глядя на ссылку, пользователь понимал, о чем страница (рекомендуемая длина 70-90 символов).
Получайте полезный контент от KISLOROD в любой из мессенджеров
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности

8. Настраиваем канонические ссылки

ЧПУ (человеко-понятный URL) — это адрес страницы, кратко отражающий содержание, простой и понятный для пользователя и поисковой системы. Правильная настройка URL-адресов положительно влияет на SEO-оптимизацию сайта.
Настраиваем канонические ссылки
Требования по настройке rel="canonical":

  • указываем одну абсолютную каноническую ссылку на все страницы сайта в разделе HEAD, кроме страниц пагинации. Пример кода: <link rel="canonical" href="https://site.com/page-1"/>
  • при наличии get-параметров в конце URL, страница должна содержать абсолютную каноническую ссылку. Пример: gclid, utm_medium, utm_source, utm_campaign;
  • при наличии одного товара в нескольких категориях, указываем каноническую ссылку на основной товар.

9. Устанавливаем SSL-сертификат

SSL — это протокол шифрования, который позволяет кодировать данные для безопасного обмена. После установки и настройки SSL-сертификата, данные будут передаваться по HTTPS-протоколу в зашифрованном виде.
Устанавливаем SSL-сертификат
Требования по установке SSL-сертификата:

  • устанавливаем сертификат на сайте в панели администрирования хостера;
  • изменяем внутренние ссылки на HTTPS (ссылки на внутренние страницы, CSS-стили, JavaScript-библиотеки, изображения, канонические ссылки и т. д.);
  • проверяем доступность сайта по HTTPS-протоколу. Для этого открываем страницы в разных браузерах — если настройки корректны, браузер сообщит о безопасном подключении.
Отправьте заявку на юзабилити-аудит сайта прямо сейчас и увеличьте конверсию минимум на 20%! Найдём точки роста конверсии и выявим барьеры на пути пользователей сайта.

10. Настраиваем обработку ошибки 404

Ошибка 404 — это код состояния сервера, указывающий, что страница не найдена. Причина — некорректная ссылка на страницу или страница удалена с сайта.
Настраиваем обработку ошибки 404
Требования по настройке ошибки 404:

  • настраиваем отдачу страницы ошибки 404 по запрашиваемому URL без переадресаций на другой URL;
  • при попадании на несуществующую страницу, сервер должен отдавать код ответа сервера «404 Not Found». Такие страницы поисковые системы не будут добавлять в индекс;
  • страницу ошибки 404 оформляем в стиле сайта, с ссылкой на главную страницу и страницы категории товаров, чтобы удержать пользователей в интернет-магазине.

11. Настраиваем HTTP-заголовки Last Modified и If-Modified-Since

Преимущества корректной настройки HTTP-заголовков:

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

  • Last-Modified отдает реальную дату последнего изменения текущей страницы сайта;
  • на запрос If-Modified-Since сервер возвращает код 200, если в Last-Modified указана более поздняя дата, чем отправлено в запросе If-Modified-Since. Если содержимое с указанной даты не менялось (дата в Last-Modified более ранняя), то сервер возвращает код ответа 304;
  • Cache-Control для страниц сайта отдает max-age=86400, для подключаемых ресурсов (CSS, JS, шрифты, изображения) — max-age=604800;
  • Expires отдает дату устаревания информации: для страниц сайта — текущая + 24 часа, для подключаемых ресурсов (CSS, JS, шрифты, изображения) — текущая + 168 часов;
  • ETag отдает идентификатор версии запрашиваемого объекта вместе со статическими объектами (html, текст, CSS, JS, шрифты, изображения);
  • Vary отдает сообщение браузеру, что вариант кода сайта зависит от браузера клиента;
  • Date отдает текущую дату загрузки страницы сайта или объекта.

Для настройки HTTP-заголовка рекомендуем использовать готовый модуль на 1С-Битрикс: https://marketplace.1c-bitrix.ru/solutions/abudagov.lastmodified/.

12. Выводим «хлебные крошки»

«Хлебные крошки» — это навигационная цепочка на страницах второго, третьего и более высокого уровня вложенности, визуально отображающая структуру сайта. Она упрощает для пользователей переход между страницами. Для раскрутки интернет-магазина, «хлебные крошки» — перелинковка страниц при распределении ссылочного веса.
Выводим «хлебные крошки»
Требования по настройке «хлебных крошек»:

  • выводим «хлебные крошки» на всех страницах интернет-магазина, кроме главной;
  • пункты навигационной цепочки, кроме последнего, реализуем в виде ссылок на соответствующие страницы;
  • страница, на которой находится пользователь, не должна быть ссылкой;
  • настраиваем микроразметку «хлебных крошек» на страницах сайта, используя схему BreadcrumbList библиотеки Schema.org.

13. Настраиваем микроразметку Shema.org

Микроразметка — это специальная семантическая разметка структурированных данных, которая облегчает поисковым системам обработку информации и увеличивает привлекательность сниппета в выдаче.
Настраиваем микроразметку Shema.org
Типы микроразметок для интернет-магазина:

  • «хлебные крошки»;
  • контакты организации;
  • отзывы и рейтинг;
  • карточки товаров.

Для проверки настроек структурированных данных используем валидатор микроразметки от Яндекс и инструмент проверки структурированных данных от Google.

14. Настраиваем разметку Open.graph

Разметка Open Graph позволяет любой странице сайта указать изображение, заголовок, описание и другие дополнительные метатеги, которые будут отображаться при публикации ссылки на сайт в социальных сетях.
Настраиваем разметку Open.graph
Для проверки разметки Open Graph используем сервис Open Graph Check.

15. Соблюдаем валидность HTML и CSS кода

Валидность кода — это соответствие html и css кода всем правилам и стандартам, разработанным Консорциумом Всемирной Паутины (World Wide Web Consortium). Соблюдение правил — гарантия кроссбраузерности, т.е. корректного отображения страниц сайта во всех браузерах.
Проверяем сайт на валидность HTML и CSS

Для проверка валидности HTML кода страницы используем сайт-валидатор «Markup Validation Service», расположенный по адресу: http://validator.w3.org. Cервис позволяет не только выявить ошибки в HTML, но и посмотреть рекомендации по исправлению.
Для проверки валидности кода CSS используем схожий сервис, доступный по ссылке: https://jigsaw.w3.org/css-validator/. Здесь также можно найти ошибки и получить советы по их исправлению.

16. Увеличиваем скорость загрузки сайта по Google Page Speed

Высокая скорость работы интернет-магазина как на desktop, так и на mobile — основа успешного продвижения сайта. Низкая скорость снижает конверсию, отрицательно влияет на удобство пользования и поведенческие показатели сайта (глубина просмотра, время на сайте, отказы). Более подробно читайте в статей "Как увеличить скорость сайта".
Увеличиваем скорость загрузки сайта по Google Page Speed
Оптимизируем скорость загрузки

Для проверки используем сервис PageSpeed Insights.

Оптимизацию проводим согласно требованиям Google:

  • оптимизируем изображения;
  • оптимизируем JavaScript и CSS;
  • используем кеширование браузера;
  • оптимизируем время ответа сервера.
Последние изменения в Google PageSpeed

Недавно Google изменил алгоритм индексации и ранжирования сайтов, сделав требования более жесткими. Раньше преимущественно оценивалась десктопная версия сайта, а теперь — мобильная. В результате, большинство сайтов просели по трафику и лишились «зелёной зоны» в Google PageSpeed.

В PageSpeed 5.0 страницы загружаются в браузер Chrome — оттуда считываются показатели оценки взаимодействия пользователя со страницей. По показателям присваиваются баллы, сумма которых определяет общую оценку производительности сайта.

17. Правильно формируем структуру заголовков H1-H6

Высокая скорость работы интернет-магазина как на desktop, так и на mobile — основа успешного продвижения сайта. Низкая скорость загрузки снижает конверсию, отрицательно влияет на удобство пользования и поведенческие показатели сайта (глубина просмотра, время на сайте, отказы).
Правильно формируем структуру заголовков H1-H6
Требования к заголовкам H1-H6:

  • на одной странице выводим только один тег H1;
  • реализуем функционал для ручного и шаблонного заполнения тега H1;
  • в рамках всего сайта формируем уникальный заголовок H1;
  • для формирования текстового контента используем теги H2-H6;
  • для выделения отдельных блоков или элементов меню не используем теги H1-H6.

18. Настраиваем тег Title и мета-тег Description страниц

Тег Title используется поисковыми системами для формирования заголовка сниппета (сниппет также может формироваться из h1, h2 и т.д.).
Настраиваем тег Title страниц
Мета-тег Description используется поисковыми роботами для формирования описания в сниппете. В отдельных случаях, описание формируется из контента сайта.
Настраиваем мета-тег Description страниц
Требования по настройке тегов Title и Description страниц:

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

19. Настраиваем атрибуты Alt и Title для изображений

Атрибут Alt изображений — это альтернативный источник информации для пользователей, выводится, если не отображается картинка на странице.
Настраиваем атрибуты Alt для изображений
Атрибут Title нужен для того, чтобы пользователю было проще понять, что изображено на картинке. Выводится при наведении курсора на изображение.
Настраиваем атрибуты Title для изображений
Требования к настройке тегов Alt и Title изображений:

  • реализуем возможность ручного заполнения атрибутов Alt и Title изображений;
  • реализуем возможность шаблонного заполнения атрибутов Alt и Title изображений.
Отправьте заявку на юзабилити-аудит сайта прямо сейчас и увеличьте конверсию минимум на 20%! Найдём точки роста конверсии и выявим барьеры на пути пользователей сайта.

20. Устанавливаем модуль SEO умного фильтра

Интеграция seo-модуля с 1С-Bitrix значительно увеличивает физическое количество страниц на сайте и в индексе поисковых систем. Чем больше качественно оптимизированных страниц, тем больше поискового трафика вы получите. Количество страниц зависит от специфики интернет-магазина, а конкретно от параметров и свойств товаров.
Подробнее о SEO-модуле написали в этой статье.

После корректной установки модуля, seo-специалист или контент-менеджер сможет создать уникальные страницы, полностью оптимизированные под низкочастотные запросы.

21. Устанавливаем Google Tag Manager

Google Tag Manager (GTM) — это диспетчер тегов, который значительно упрощает размещение счетчиков аналитики Яндекс Метрики, Google Analytics, пикселя Фейсбук и других маркетинговых инструментов. В дальнейшем это существенно упростит управление инструментами, модификацию под нужные и изменившиеся условия, мониторинг и контроль без изменения кода сайта.
Устанавливаем Google Tag Manager
Требование по установке GTM только одно:

код GTM устанавливаем на каждой странице сайта согласно документации Google.

Подводя итоги

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

На выходе вы получите интернет-магазин, готовый к успешному поисковому продвижению и эффективной работе с клиентами. Ресурс проиндексируется быстрее и получит высокий уровень доверия от поисковых систем. Это закономерно приведет к росту трафика. А деньги и время, сэкономленные за счет отсутствия дополнительных работ, можно вложить в контекстную рекламу и продвижение в соцсетях.
Получайте полезный контент от KISLOROD в любой из мессенджеров
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Спасибо, что дочитали до конца.
Если информация была полезна, поделитесь статьёй. Вам не сложно, нам приятно ;)

Рекомендованные статьи

Скачайте 17 точек роста и 100 + чекеров для роста конверсии и прибыли интернет-магазина
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Мы проанализировали ведущие интернет-магазины, результаты исследований, свой опыт и собрали важные моменты в одно руководство. Делаем e-commerce лучше, поэтому не только пользуемся сами, но и делимся с вами.
Выберите удобный мессенджер и получите чек-лист прямо сейчас: