разработка

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

Владимир Родионов

Аналитик

SEO на этапе разработки сайта и интернет-магазина

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

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

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

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

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

Читать статью:

Почему проводить анализ поискового спроса до создания интернет-магазина, а не после — это хорошая идея?

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

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

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

Что мы делаем на этапе разработки интернет-магазина:

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

Отправить заявку

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

Файл robots.txt — это текстовый файл в корневом каталоге сайта, содержащий правила для корректной индексации ресурса в поисковых системах.

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, так как его поддерживают все общепризнанные браузеры и поисковые системы.

Где указывать корректную кодировку:

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

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

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

6. Настраиваем автогенерацию карты сайта 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. Настраиваем канонические ссылки

Требования по настройке 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-сертификата:

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

Отправить заявку

10. Настраиваем обработку ошибки 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

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

Типы микроразметок для интернет-магазина:

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

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

14. Настраиваем разметку 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 — основа успешного продвижения сайта. Низкая скорость снижает конверсию, отрицательно влияет на удобство пользования и поведенческие показатели сайта (глубина просмотра, время на сайте, отказы). Более подробно читайте в статей "Как увеличить скорость сайта".

Оптимизируем скорость загрузки

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

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

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

Последние изменения в Google PageSpeed

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

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

Читать статью:

Как оптимизировать интернет-магазин на Битрикс по рекомендациям Google PageSpeed Insights?

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

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

Требования к заголовкам H1-H6:

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

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

Тег Title используется поисковыми системами для формирования заголовка сниппета (сниппет также может формироваться из h1, h2 и т.д.).

Мета-тег Description используется поисковыми роботами для формирования описания в сниппете. В отдельных случаях, описание формируется из контента сайта.

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

Требования по настройке тегов Title и Description страниц:

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

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

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

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

Атрибут Title нужен для того, чтобы пользователю было проще понять, что изображено на картинке. Выводится при наведении курсора на изображение.

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

Требования к настройке тегов Alt и Title изображений:

реализуем возможность ручного заполнения атрибутов Alt и Title изображений;
реализуем возможность шаблонного заполнения атрибутов Alt и Title изображений.

Отправить заявку

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

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

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

Читать статью:

SEO-модуль: пошаговое внедрение умного фильтра

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

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

Требование по установке GTM только одно:

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

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

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

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

Получайте полезный контент от KISLOROD в любой из мессенджеров

Спасибо, что дочитали до конца.

Если информация была полезна, поделитесь статьёй. Вам не сложно, нам приятно ;)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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