Блог Яндекса для вебмастеров

Внешний вид Турбо-страниц теперь можно настраивать через CSS

Пост в архиве.

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

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

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

  • не использовать сторонние шрифты;
  • не добавлять низкопроизводительную анимацию;
  • не работать с селекторами по названиям HTML-элементов (например,.a { color:     #307896; });
  • не добавлять подгрузку данных с внешних для Яндекса ресурсов (Например, не нужно использовать подобную подгрузку картинок
    .page { background-image: url («») }).

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

Команда Вебмастера

P. S. Подписывайтесь на наши каналы
Блог Яндекса для Вебмастеров
Канал Яндекса о продвижении сайтов на YouTube
Канал для владельцев сайтов в Яндекс.Дзен

65 комментариев
В турбо страницы можно добавлять другую рекламу, кроме РСЯ?
Владимир
5 июня 2018, 17:02
vadimkalasnik7,
Не будет этого, яндексу же не выгодно это. Я сам бы использовал турбо с удовольствием, если бы поддерживался адсенс.
Елена Першина
Сотрудник Яндекса5 июня 2018, 17:22
Владимир,
вот зачем отвечаете, когда не знаете и в теме не разбираетесь? Это можно было делать с самого начала. 
Владимир
5 июня 2018, 22:17
Елена Першина,
Ага, можно, вот только огромное количество людей (и я до вашего сообщения) не знали об этом. А знаете почему? В этом адфоксе нереально разобраться, человеческих инструкций нет, интерфейс - запутанный, копался одно время в нем, как раз пытался адсенс подключить - через полчаса бросил попытки. На форуме searchengines кучу тем видел, люди спрашивали как адфоксом пользоваться. Вот скажите, сложно сделать простое поле в вебмастере для вставки кода адсенс? 
По факту, вы сделали все настолько сложно и запутанно, что многим проще плюнуть и РСЯ подключить. А Адсенс - "у нас есть поддержка, просто вебмастера криворукие".
Елена Першина
Сотрудник Яндекса5 июня 2018, 17:22
vadimkalasnik7,
да, можно, через ADFOX. Можно и свою рекламу, и рекламу ADSENSE. 
Елена Першина,
ADFOX не очень удобен в использовании и это мягко говоря. Почему Вы не сделаете это напрямую?
Елена Першина
Сотрудник Яндекса5 июня 2018, 20:03
vadimkalasnik7,
а можно чуть подробнее - чем?
Обновлено 5 июня 2018, 20:03
Ник Алекс
6 июня 2018, 00:25
Елена Першина,
Всем. Я поддерживаю коллег. Тут вставь, там сгенерируй, отсюда возьми и туда подключи. И в конечном счёте Адфокс - прокладка, непонятно зачем усложняющее взаимодействие.
Почему нельзя было взять открытый стандарт amp и - если нужно - добавить туда свои фишки?
Зачем нужно было выдумывать своё кастрированное решение?
Почему теперь вебмастеру нужно поддерживать 2-3 версии сайта, да ещё и rss для Яндекса, потому что Яндекс придумывает свои костыли?
Елена Першина
Сотрудник Яндекса6 июня 2018, 13:55
Ник Алекс,
сделайте своё отличное решение, никто вас не заставляет использовать чужие. Просто вероятность того, что по качеству оно будет близко к разработкам Яндекса, как вы понимаете, не очень велика. 
Дмитрий Горкун
26 июня 2018, 19:12
Елена Першина,
так ответили, будто у Яндекса разработчики Боги и пишут исключительно высокий по качеству код и выпускают продукты без косяков. 
Елена Першина
Сотрудник Яндекса26 июня 2018, 19:38
Дмитрий Горкун,
"косяки" могут быть у каждого, вопрос в их вероятности. 
Обновлено 1 октября 2018, 13:56
Елена Першина,
нормально вы так с людьми разговариваете
Елена Першина
Сотрудник Яндекса1 октября 2018, 13:58
igordata,
ну, давайте возьму в кавычки, ибо это цитата из комментария выше: "пишут исключительно высокий по качеству код и выпускают продукты без косяков".
АльбертычЪ
5 июня 2018, 17:33
Урааа! )
Написал даже не читая - увидев аббривиатуру "CSS" - ща прочитаю, чё там... )


Прочитал. Спасибо, пока то, что я и хотел )
Обновлено 5 июня 2018, 17:38
Елена Першина
Сотрудник Яндекса5 июня 2018, 17:59
АльбертычЪ,
вам спасибо! Если что еще нужно - пишите! 
только в вебмастере? в rss передавать css нельзя?
Елена Першина
Сотрудник Яндекса5 июня 2018, 20:01
Flector,
пока только через Вебмастер. 
Apple-iPhone(точка)ru
6 июня 2018, 11:49
Елена Першина,


То, что вы сделали возможность менять стиль CSS для Turbo-страниц отличный шаг и за него спасибо. Также присоединяюсь к господину @flector - автору знаменитого плагина "RSS for Yandex Zen" для WordPress: https://wordpress.org/plugins/rss-for-yandex-zen/ с просьбой сделать возможным передавать настройки CSS через RSS. Тогда огромное количество сайтов на WordPress, которые используют этот плагин смогут прямо из панели управления WordPress менять стили для Turbo-страниц!
Елена Першина
Сотрудник Яндекса6 июня 2018, 16:59
Apple-iPhone(точка)ru,
да, хотим очень это сделать, просто руки ещё не дошли. 
надо бы api - для задания css из внешней системы
Елена Першина
Сотрудник Яндекса5 июня 2018, 20:02
hcdev,
API есть, но пока для RSS-фида. А стиль один раз просто задайте в Вебмастере, и он автоматически применится ко всем страницам в фиде. 
Елена Першина,
есть ли документация как в RSS фиде указать CSS?
Елена Першина
Сотрудник Яндекса5 июня 2018, 20:27
CB9TOIIIA,
пока никак, но мы хотим это доработать. Пока только через Вебмастер CSS настраивается. 
Елена Першина,
спасибо! В CSS поддерживается before | after аттрибуты?  base64 image ?
Елена Першина
Сотрудник Яндекса6 июня 2018, 15:39
CB9TOIIIA,
да, можно.
Елена Першина
Сотрудник Яндекса5 июня 2018, 20:02
hcdev,
вот новость про API: https://yandex.ru/blog/webmaster/u-turbo-stranits-poyavilos-api 
Руслан Филонов
5 июня 2018, 20:11
Это как-то повлияет на ранжирование турбо-страниц в поисковой выдаче?
Елена Першина
Сотрудник Яндекса5 июня 2018, 20:26
Руслан Филонов,
прям боль в вопросе видна, представьте хотя бы на минуту, что вы это не для поиска делаете, а для пользователей. 
Юрий Кудренко
6 июня 2018, 07:01
Елена Першина,
Елена, правильно ли я понял, что сейчас турбо-страницы ранжируются не сами по себе, как отдельные страницы, а по основной странице? 
Елена Першина,
Какая боль Елена?У вас половину рунета забанина..все парятся что бы не получить бан за рекламу..за неправильное слово..неправильный текст..посмотрите внимательно Яндекс постепенно преврощается в мусорку.. Вы возможно даже не предстволяете о тех схемах которые предумывают веб мастера...для обхода ваших банов..Так что не до жиру.. 
Елена Першина
Сотрудник Яндекса6 июня 2018, 15:07
Юрий Кудренко,
ранжируются страницы сайта, Турбо-страницы - это варианты их представления. 
Юрий Кудренко
6 июня 2018, 06:56
Отлично. Спасибо. 
Елена, в турбо-страницах нет возможности делать списки статей никак иначе, кроме как через yandex:related.
Например, хочу в меню на турбо-странице сделать раздел "Статьи" и чтобы при переходе на него был список статей. Сейчас я страницу со списком статей должен оформлять как yandex:related, но он ведь не для этого предназначен. Да и в нем всего 30 элементов. 

Еще галерея в турбо-страницах недоработана. Фотки нельзя увеличивать, кликнув по ним.  Маленькая фотка на мобильном экране, часто не имеет смысла т.к. на ней ничего не видно, например в той же инфографике. Да даже в модном луке, без увеличения картинки не рассмотреть в чем одета модель. 
Надо чтобы фото можно было делать кликабельными и они могли открываться увеличенными. Совсем хорошо, если это будет не только в галерее, но и по обычным фоткам в тексте можно будет делать клик и смотреть в увеличенном размере.
Елена Першина
Сотрудник Яндекса6 июня 2018, 14:22
Юрий Кудренко,
спасибо, забрали в команду на обсуждение доработок. 
Гоголь стоит в сторонке;) Круто!
Не знаю куда писать. Я отписан от рассылки, а мне все равно приходят уведомления о новых постах. Даже в настройках написано что я отписан ото всех рассылок. Хватит слать мне письма "Новый пост в блоге Блог Яндекса для вебмастеров". Нажимаю кнопку отписаться и там написано  "Вы отписаны от всех уведомлений.". Уже отписывался, сделайте что-нибудь. Я сам слежу за новыми постами.
Елена Першина
Сотрудник Яндекса7 июня 2018, 13:56
SkyWeb IT,
добрый день! Мы сейчас проверяем. На всякий случай можете еще раз убедиться, что вот тут подписка отключена по всем пунктам: https://yandex.ru/blog/webmaster/settings 
serebrennickov.andrei
7 июня 2018, 09:48
Как узнать, почему сайт ,  стоявший в первых строках поиска, совсем из поиска выбросили.
Елена Першина
Сотрудник Яндекса7 июня 2018, 13:55
serebrennickov.andrei,
написать в поддержку, у нас была небольшая бага на днях, есть вероятность, что подобные показатели с ней связаны. Но не факт, лучше перепроверить. 
Добрый день! Загружаем rss, пробуем применить стили, но они не работают! В коде удаляются все span. Даже классы не работают. Может стоило написать более подробную инструкцию? Или же новость про подключение css просто новость, а сама функция безумно сырая? Ау, у кого получилось прикрепить css с сайта своего!
Елена Першина
Сотрудник Яндекса7 июня 2018, 13:58
implant-bukina,
работает, я лично игралась с этой функцией для наших тестовых сайтов. Если в поддержку Вебмастере пришлете код CSS, сможем точнее сказать, бага там или фича. 
serebrennickov.andrei
7 июня 2018, 15:24
https://www.iarky.com/         - мой сайт.Как узнать, почему его выбросили ?
Елена Першина
Сотрудник Яндекса9 июня 2018, 13:51
serebrennickov.andrei,
начните со статуса в Вебмастере. 
Елена, если можно, рассмотрите пожалуйста вопрос о внедрении кликабельных картинок. Благодарю!
Елена Першина
Сотрудник Яндекса9 июня 2018, 13:50
dsnicron,
да, это в пожелании есть и значимость этой штуки понимаем. 
Здравствуйте! Скажите если, веб мастер отказывается настраивать турбо страницы на этом сайте https://ultrazaim.su/ - мотивируя тем, что никакой пользы от этого не будет - как быть? Можно ли их настроить самому, без навыков в кодировании? Может быть есть визуальный редактор или что-то вроде этого? Может ли поддержка Яндекса это сделать - при обращении?
Обновлено 9 июня 2018, 11:03
Елена Першина
Сотрудник Яндекса9 июня 2018, 13:52
araks85,
для начала, пусть он обоснует свою мотивацию. А то так обсалютно любую доработку для сайта можно отклонить.  Далее предложите эксперимент - и сравните. Не будет профита - отключите. 
Все доброго времени суток! Ребята, подскажите пожалуйста, как изменить шрифт h2, h3, h4 в css для турбо-страниц? Уже перебрал кучу комбинаций в отладке, но шрифт на примере так и не изменился. У меня не сработало: h2, title_level_2 и другие.Но шрифт так и не меняется - ни размер, ни цвет. Благодарю!
Елена Першина
Сотрудник Яндекса13 июня 2018, 10:04
dsnicron,
вообще должно работать, можете написать нам в поддержку со скриншотами? Будем внимательно разбираться.
хотел задать отдельный фон для части контента записи (скажем, для "подписи" с телефонами). не вышло. парсер вырезал разметку и обратиться именно к нужной части записи не получилось. 
я правильно понимаю - с помощью этого инструмента можно раскрасить только служебные части турбо-страниц?
Хотелось бы иметь хотя бы один конкретный пример возможности оформления турбо страницы. Желательно такой, в котором использовались все имеющиеся на данный момент возможности.


Что имеется в виду - не только минимальная декларация, а подробная инструкция. Так сказать для «чайников». Пример по мере увеличения возможностей должен обновляться.


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


[Ticket#14060814211015757]
К сожалению, возможности создавать собственные классы и применять их к элементам на данный момент нет. Я передам Ваше пожелание менеджерам сервиса и мы постараемся сделать такую возможность в будущем.
Елена Першина
Сотрудник Яндекса17 сентября 2018, 11:56
rexmid,
в Помощи такое как раз постарались создать такое. Чего там не хватает? 
> не работать с селекторами по названиям HTML-элементов (например, .a { color: #307896; });


В данном примере указан селектор по классу, а не по названию элемента, это опечатка?
Селектор по названию элемента не имеет точки в начале...
Елена Першина
Сотрудник Яндекса19 ноября 2018, 12:33
homskiy,
да, нельзя ни по названию элементов (без точки), ни кастомные классы. А можете уточнить, где вы это нашли, чтобы мы поправили? 
а ссылки-картинки как сделать на турбо-страницах?

Вместо ссылки-картинки, только картинка получается на турбо-странице.
Елена Першина
Сотрудник Яндекса19 ноября 2018, 09:54
druzumaki,
Должны работать ссылки вида: <a href="/URL-адрес ссылки" ><img src="/Путь к картинке" ></a> . Если не работают, то ждем в поддержке у нас. 
Елена Першина,
Не работают ссылки такого вида. как написано выше, только картинка отображается.
Вот пример ссылки:

<a href="https://***ta.info/asp2/pay_wm.asp?id_d=15****2&lang=ru-RU" target="_blank"><img src="{e_IMAGE}button_mts.gif" alt="ulock" width="110" height="45" border="0" /></a>
Обновлено 3 января 2019, 23:41
Почему я не могу использовать ссылку на турбостраницу в "быстрых ссылках" в директе?
Елена Першина
Сотрудник Яндекса17 декабря 2018, 15:50
Alexander Zaytsev,
ссылку не нужно использовать. при создании/редактировании объявления достаточно лишь подключить Турбо-страницу к быстрой ссылке.
Вот тут: https://yadi.sk/i/8nS8cfAx6zBR7w 
а почему не сделать подгрузку фона в css как и в случае с картинками. Это очень неудобно и куча ограничений на css делают сложными некоторые очень простые вещи
platon
Сотрудник Яндекса28 февраля 2019, 09:37
ran-studio,
турбо-страницы — это специфический формат отображения контента на мобильных устройствах, который сильно отличается от обычных веб-страниц. Они весят в среднем в 10 раз меньше и могут загружаться в 15 раз быстрее. Чтобы достичь таких результатов, нам пришлось немного ограничить возможности.
скажите как в турбо странице изменить цвет иконки меню (горизонтальные полосочки)?
platon
Сотрудник Яндекса21 мая 2019, 00:52
autocarreg,
Можно, например, вот так:

.sandwich-menu__handler{
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Cpath d='M0 0h16v2H0V0zm0 5h16v2H0V5zm0 5h16v2H0v-2z' fill='magenta'/%3E%3C/svg%3E")
}
platon,
Спасибо!
тогда и у меня вопрос, на сайте есть логотип, иллюстрации и иконки, как этим трем видам изображений задать разные стили, классы одни и те же генерируются(
schriftarten123.com@gmail.com
12 августа 2022, 04:33
Thank you so much for sharing your valuable information with us. Your informative article has really helped me a lot. I have also seen some other great fonts at schriftarten instagram zum kopieren. I am really impressed with the quality of the fonts and the variety of choices available. I will definitely be using these fonts in my future projects. Thanks again for your help!