Как настроить внешний вид турбостраниц в «Яндексе»

И вот настал момент очередного внедрения обновления от компании «Яндекс». На этот раз нововведения коснулись такого сервиса, как «Yandex.Webmaster».

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

Настройка CSS-стилей турбостраниц в «Яндекс. Вебмастер»

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

Нажимаем, и переходим для начала в «Настройки».

Изначально следует приступить к оформлению «Шапки страницы» и «Меню Турбо-страниц». Сложностей с этим возникнуть не должно, так как достаточно внести необходимую информацию в соответствующие поля и загрузить логотип, если посчитаете нужным это сделать.

Отображение внесенных изменений можно увидеть в специальном поле, находящемся в верхнем левом углу страницы «Настройки».

Чтобы приступить к дальнейшему оформлению, находим здесь вкладку под названием «CSS» и нажимаем на кнопку «Добавить».

В появившемся поле останется только вставить готовый код стилевого оформления и нажать на вкладку «Сохранить».

Где производить отладку отображения турбо-страниц в «Яндекс. Вебмастер»

Чтобы произвести корректировку файла стилей, посмотреть внешний вид турбо-страницы перед ее непосредственным размещением и проверить код на ошибки, достаточно зайти в так называемую «песочницу», которая была ранее представлена при бета-тесте. Сейчас этот пункт называется «Отладка» и находится в подменю пункта «Турбо-страницы».

После отладки отображения можно снова перейти в подпункт «Настройки» и разместить отлаженный код.

Что не рекомендуется прописывать в CSS-оформлении в Турбо-страницах

Несмотря на то, что новая возможность позволяет реализовать практически любую отображение элементов, с целью избежания возникновения критических ошибок рекомендуется выполнять следующие ограничения:

• отказаться от использования в css-файле подключения различных сторонних шрифтов;
• не производить размещение на турбо-странице низкокачественных и низкопроизводительных анимационных блоков;
• не использовать подгрузку картинок (в том числе и для заднего фона (бэкграунд) следующего типа: «.primer_stranitsi {background-image: url (…)}»;
• избегать применения селекторов внутри html-элементов следующего вида: «.a { color: #356896; }»

Остальные элементы и правила css-оформления можно использовать без ограничений.

Какие еще появились нововведения в «Турбо-страницах»

Кроме возможности самостоятельного оформления стилей и внешнего вида страниц, появились следующие новые возможности для открытого использования:

• «Счетчики» - позволяет добавить необходимый счетчик метрики путем прописывания только его id (идентификационного номера);

• «Реклама» - специализированный блок, позволяющий подключить к оформленной странице рекламный блок РСЯ или «AdFox»;

Как и в предыдущем случае, достаточно прописать ID блока или код для вставки (в случае с «ADFOX»).

Важно! В рекламном блоке можно добавить сразу несколько объявлений, что прекрасно отображено на скриншоте выше!

Заключение

И снова мы видим, что российская IT-компания «Яндекс» не только постоянно выпускает новые продукты и сервисы («Взгляд», «Алиса» «ОФД» («Оператор Фискальных Данных» или, другими словами, онлайн-касса)), «Yandex. Radar» «Телефония» и др.), но и постоянно дорабатывает уже давно существующие и активно использующиеся пользователями («Вебмастер», «Радио», «Дисплей», Аудитории, Директ, Метрика и т. д.)

Подобный подход российского IT-лидера является наиболее выгодным и оптимальным, как со стороны получения компанией новых клиентов и соответственно прибыли, так и со стороны повышения лояльности уже постоянных пользователей, а также учитывания их мнений.