Как за 10 шагов превратить стандартную Турбо-страницу в страницу, которая выглядит как ваш обычный сайт
Что именно можно поменять: перечень встроенных настроек и CSS-свойств, которые реально работают
Что можно кастомизировать: логотип, фирменные цвета, заголовки, оглавление, ссылки. Ограничения: поддерживаются только форматы PNG и SVG, не более 100 КБ. CSS-свойства, работающие в Турбостраницах: font-weight, font-size, color, background-color, margin, padding. Они позволяют полностью изменить внешний вид страницы, но не работают в режиме «Инлайн CSS».
Раздел «Кастомизация» в Яндекс Вебмастере позволяет указать домен страницы, стили (возможно, например, загрузить и прописать цвета через код в RSS 2.0), изменить логотип (если есть домен).
Примечание: css-стили, указанные в атрибутах и СSS-файле, должны быть загружены раз и навсегда в Яндекс.Вебмастер. Турбостраницы не поддерживают динамическое обновление стилей.
Также можно использовать следующие классы в CSS-файле: .ss #CPO1, .ss. #CPO2, .ss .ssMenu, .ss .SSmenu, .ss .SSmenu li, .ss #CPL, .ss. #CPL li, .ss. #CPL li a, .ss. #CPL li, .ss. #CPL li a:focus, .ss ;ssB, .ss .ssL, .ss .ssR,.
Где искать настройки в Яндекс.Вебмастере и как подготовить CSS-файл, чтобы он принялся системой с первого разаПри подготовке CSS-файла используйте классы .page, .header, .footer, .logo для базовых элементов. Система игнорирует селекторы с id и сложные комбинации, например .menu > li > a. Ограничьтесь простыми стилями: цвета, отступы, шрифты. Проверьте, чтобы в коде не было свойств, связанных с анимацией или позиционированием (position: fixed).
Для логотипа загрузите изображение в форматах PNG или SVG, размером до 100 КБ. Укажите прямой путь к файлу в RSS-канале через тег
Сохраняйте стили в Вебмастере или Конструкторе Директа, чтобы избежать потери данных при обновлении RSS. Если стили конфликтуют с настройками в интерфейсе Вебмастера, приоритет имеют последние. Зафиксируйте важные параметры через !important в CSS или отключите дублирующие настройки в разделе «Кастомизация».
После загрузки проверьте результат через мобильный просмотр Яндекс.Турбо. Используйте инструменты Google DevTools для тестирования адаптивности. Если стили не применяются, убедитесь, что файл не содержит ошибок синтаксиса и соответствует ограничениям Яндекса. Для повторной проверки очистите кэш системы через «Инструменты → Обновить данные».
Как загрузить свой логотип в два клика: допустимые форматы PNG, SVG, размеры до 100 КБ и прямой путь к изображению через RSS
Чтобы загрузить логотип, перейдите в раздел «Дизайн» в Яндекс.Вебмастере. Нажмите на кнопку «Загрузить логотип» и выберите файл в формате PNG или SVG. Убедитесь, что размер файла не превышает 100 КБ.
После загрузки логотипа укажите прямой путь к изображению через RSS-канал. Для этого используйте тег
Обратите внимание, что логотип должен быть статичным, без прозрачного фона или сложных градиентов. Рекомендуем использовать простой дизайн, который будет хорошо отображаться на разных устройствах.
Если у вас возникли проблемы с загрузкой логотипа, проверьте, что файл соответствует требованиям Яндекса; Убедитесь, что у вас есть права на управление сайтом и что RSS-канал правильно настроен.
После загрузки логотипа проверьте, как он отображается на Турбо-странице. Если логотип не отображается или отображается некорректно, проверьте, что файл был загружен правильно и что путь к изображению был указан верно.
Загрузка логотипа — это простой процесс, который займет всего два клика. Следуйте инструкциям и убедитесь, что ваш логотип соответствует требованиям Яндекса.
Какие классы и id можно использовать в CSS, а какие система отрежет без предупреждения (список, подтвержденный отчетами партнеров Яндекса)
При создании CSS-стилей для Турбо-страниц важно знать, какие классы и id можно использовать, а какие система отрежет без предупреждения. Согласно отчетам партнеров Яндекса, следующие классы и id разрешены:
Классы: .page, .header, .footer, .logo, .menu, .content, .sidebar, .widget. Эти классы можно использовать для стилизации основных элементов страницы.
Id: #header, #footer, #logo, #menu, #content, #sidebar, #widget. Эти id можно использовать для стилизации конкретных элементов страницы.
Однако, следующие классы и id запрещены и будут отрезаны системой без предупреждения:
Классы: .ads, .advert, .banner, .commercial, .promo. Эти классы не разрешены, так как они могут быть использованы для размещения рекламы.
Id: #ads, #advert, #banner, #commercial, #promo. Эти id не разрешены по той же причине.
Также, система отрежет любые стили, которые содержат JavaScript-код или ссылки на внешние ресурсы. Поэтому, важно использовать только разрешенные классы и id, и избегать использования запрещенных элементов.
Следуя этим правилам, вы сможете создать эффективные и безопасные CSS-стили для ваших Турбо-страниц.
Пример структуры:
Для долгосрочного хранения стилей сохраняйте CSS-файл в Вебмастере («Дизайн → Стили»). Это защитит от потери данных при обновлении RSS. Приоритет стилей задается через !important в коде. Избегайте дублирования настроек в интерфейсе Вебмастера, чтобы предотвратить конфликты.
Где хранить стили, чтобы они не пропали после следующего импорта RSS-канала: практические способы в Вебмастере и Конструкторе Директа
Загрузите один раз — CSS останется навсегда. Перейдите в «Дизайн → Стили → Загрузить файл» и выберите ваш .css объемом до 100 КБ: система сохраняет его под вашим доменом, а импорт свежего RSS не затрагивает стили. Если в RSS нет class, дизайн всё равно применится, потому что файл лежит внутри Вебмастера.
Параллельный способ — Конструктор Директа. Когда создаёте страницу, зайдите в «Оформление» и перетащите свой CSS-файл в поле «Дополнительные стили». Данные сохраняются в личном кабинете Директа, и новые итерации RSS-фида к ним не прикасаются. Такой подход защищает от перезаписи при включении тумблера «Автообновление».
Чтобы задокументировать текущие стили, добавьте в конец CSS-комментарий с датой версии: /* v2026-02-16 */. Это позволит быстро найти нужный набор стилей в списке файлов. Когда обновляете тестовую страницу, пользуйтесь кнопкой «Обновить кэш» в разделе «Турбостраницы → Контрольная проверка» и убедитесь, что стили остаются нетронутыми.
Если работаете в команде, разместьте CSS на корневом домене в виде статического файла /css/turbo-style.css и подключайте через @import в дополнительном файле длительностью 1 КБ. Он всего один раз ссылается на полный стиль, и при импорте RSS меняются только ссылки, а не содержимое стиля. При удалении прав через «Сброс стилей» файл останется в папке «Дизайн» и после публикации.
Для бэкапа используйте экспорт: в Вебмастере нажмите «Скачать CSS» или в Директе кликните «Скачать архив проекта». Так вы получите копию стилей в zip-файле, который можно хранить в облаке и восстанавливать за 30 секунд после любой чистки.
Что делать в случае конфликта стилей: почему кастомизация в Вебмастере может отменить CSS и как зафиксировать приоритет без удаления заголовков
Если после обновления RSS Турбо-страница вернулась к белому фону, значит кастомизация в Вебмастере перекрыла CSS. Система применяет селекторы интерфейса последней, поэтому ваш стиль с background:#2d2d2d исчезает. Чтобы вернуть управление, оставьте поле «Цвет фона» пустым: пустое поле не генерирует !important.
Следующий шаг — добавьте к каждому правилу в файле тег !important. Пример: .page{background:#2d2d2d!important; font-family:Arial,sans-serif!important;}. Это поднимает приоритет вашего CSS над инлайн-стилями интерфейса и оставляет заголовки на месте без ручного удаления.
Окончательный контроль. После внесения изменений зайдите в «Инструменты → Показать страницу» и нажмите «Обновить». Если фон появился, значит приоритет зафиксирован. Повторите процедуру после любого изменения RSS: система сохранит вашу стилизацию без лишних действий с заголовками.
Как проверить, что логотип и стили отображаются на телефонах: ссылка на мобильный просмотр в Яндекс.Турбо плюс инструктменты проверки от Google
Перейдите в Яндекс.Вебмастер → «Инструменты» → «Турбостраницы» и нажмите «Мобильный просмотр». URL формируется автоматически: https://yandex.ru/turbo?text=[ваш домен][?test=1 для очереди]. Откройте ссылку на смартфоне. Проверьте, что логотип PNG или SVG ≤100 КБ загружается за 1,3 с, а ваш CSS применён к .page и прижимается к шапке 60 px.
Совместимость с Android и iOS проверьте через Google Lighthouse. Откройте Chrome DevTools → «Lighthouse» → «Mobile» → «Generate report». Цель: оценка CLS ≤0,1 и LCP ≤2,5 с для файла стилей в 8 КБ и логотипа в 65 КБ. Если логотип обрезается, уменьшите до 60 px по ширине и сохраните без прозрачных областей.
Для быстрой проверки отошлите ссылку через Google PageSpeed Insights. Запишите показатели: поле «Largest Contentful Paint» для логотипа и «Cumulative Layout Shift» для меню. Данные считываются на 3G и Wi-Fi смартфона в режиме экрана 390×844 px. При CLS >0,25 уменьшите margin у .logo с 16 px до 8 px.
Дополнительный тест: откройте страницу в режиме Turbo на iPhone SE 2-го поколения. Если логотип различается для Safari 15 и Chrome 109, добавьте класс .logo {width: 60px; height: auto;} без запасных медиазапросов. Используйте отладку в инструментах разработчика Safari iOS 15.3, чтобы подтвердить размер 60 × 20 px и отсутствие обрезки в горизонтальном режиме.
FAQ: Вопрос-Ответ
Вопрос: Сколько весит CSS-файл, который точно примут в Яндекс Вебмастере?
Ответ: Лимит 100 КБ. Уменьшите до 95 КБ, оставив запас на байты маршрута HTTP. Если файл весит 101 КБ, система выдаст ошибку «превышен размер».
Вопрос: Почему логотип PNG вставился, а SVG нет?
Ответ: В SVG нельзя использовать inline-base64 и внешние шрифты. Очистите код через конвертер SVGO. Или загрузите PNG, что гарантирует отображение.
Ответ: Без этого атрибута атрибуты class и id вырезаются. Добавьте строку xmlns:turbo=»http://turbo.yandex.ru» и turbo:extendedHtml=»true» в заголовок RSS, иначе CSS станет бесполезным.
Вопрос: Где гарантировать, что стили не исчезнут при следующем импорте?
Ответ: Загрузите CSS через раздел «Дизайн → Стили» в Вебмастере. Файл сохраняется под доменом. При импорте RSS он не стирается. Дополнительно можно хранить стили во «Встраиваемом блоке» в Конструкторе Директа.
Вопрос: Как увидеть страницу на телефоне без публикации?
Ответ: Откройте в Вебмастере «Просмотр» → «Мобильный просмотр». Ссылка формируется по шаблону https://yandex.ru/turbo?text=https://site.ru/page. Добавьте ?test=1, чтобы увидеть обновления без кэша.
Вопрос: Почему белый фон снова появляется после часа?
Ответ: Кастомизация через интерфейс выдаёт !important. Удалите настройки интерфейса, оставьте только файл CSS. Один пустой параметр в «Кастомизации» уже перегрузит ваши правила.
Вопрос: Можно ли использовать две таблицы стилей?
Вопрос: Где найти список разрешенных классов и id?
Ответ: В документации Яндекса есть перечень: .page, .header, .footer, .logo, .menu, .content, #header, #footer, #logo, #menu, #content. Вне этого списка селекторы будут отсечены без предупреждения.
Вопрос: Что делать при ошибке «Ресурс не доступен» при загрузке логотипа?
Ответ: Проверьте путь в RSS на https и убедитесь, что пиксель 1×1 не закрыт robots.txt. Прямая ссылка должна возвращать код 200.
Вопрос: Можно ли менять стили без нового импорта RSS?
Ответ: Да. Нажмите «Обновить» во «Вебмастере → Турбостраницы». CSS перечитывается через минуту. RSS при этом не трогается.
