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

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

5 июня, 16:37

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

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

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

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

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

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

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

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


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


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

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


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


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


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


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

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