Как вставить код в Тильду: HTML-блок, код в head и что может сломать сайт

Куда вставлять код в Тильде

По справке Тильды о вставке HTML-кода, вариантов четыре:

Что поддерживается: HTML, JavaScript в тегах <script>, CSS в тегах <style>. PHP не поддерживается — серверный код на Тильде не выполнить.

Что важно из той же справки:

• в редакторе и предпросмотре код выводится текстом. Чтобы он заработал, страницу нужно опубликовать;
• поддержка Тильды не консультирует по коду, который вы добавили сами. Если виджет сломался, разбираться вам или подрядчику;
• после изменения кода в head сайта переопубликуйте все страницы, иначе на старых страницах останется старый код.

На каком тарифе можно вставить код

По справке о бесплатном тарифе, на Free отключается код в блоках T123 и T868 и нет возможности редактировать содержимое тега head. Значит, любой сторонний код — виджеты, пиксели, микроразметка — требует тарифа Personal или Business.

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

Примеры: какой код куда ставить

Виджет онлайн-записи

Сервисы записи для салонов, клиник, автосервисов дают два вида кода: кнопку, которая открывает окно записи, и встроенную форму записи прямо на странице.

• Встроенная форма — в блок T123 в том месте страницы, где она должна стоять.
• Скрипт окна записи — сервисы часто просят вставить общий скрипт в head или в конец страницы, а на кнопку поставить специальную ссылку. Скрипт ставьте в head только тех страниц, где есть запись, а не всего сайта.

Проверьте на телефоне: окно записи открывается, не обрезается, закрывается. Это самая частая проблема виджетов на мобильных. Подробнее про запись на сайте — в статье онлайн-запись на сайт.

Пиксель рекламы

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

Исключение — Яндекс Метрика. Её счётчик подключайте не кодом, а через настройки сайта, раздел аналитики, вводом номера счётчика. Тогда Тильда сама передаёт в Метрику события форм, кнопок и попапов. Если поставить Метрику кодом в head, цели на формы работать как задумано не будут, а если и кодом, и через настройки — визиты могут считаться дважды. Подробно — в статье Яндекс Метрика на Тильде.

Микроразметка

Микроразметка — описание организации, услуг, отзывов или вопросов-ответов на языке, понятном поисковику. По справке Тильды о микроразметке, удобнее всего формат JSON-LD: код целиком вставляется в head страницы через её настройки, без правки каждого элемента. Для товаров каталога Тильда добавляет разметку сама.

Порядок:

1. Сгенерируйте код разметки для нужного типа — например, организация с адресом и телефоном.
2. Вставьте его в поле head той страницы, к которой он относится. Разметку организации — на главную и страницу контактов.
3. Переопубликуйте страницу.
4. Проверьте опубликованную страницу валидатором микроразметки Яндекса или Google.

Что именно размечать на сайте малого бизнеса и что даёт разметка в выдаче, — в статье микроразметка Schema.org.

Свой CSS

Иногда нужно поправить то, чего нет в настройках блока: отступ, цвет ссылки при наведении, скрыть элемент на телефоне. CSS вставляют в тегах <style> в блок T123 на странице или в head сайта, если правка нужна везде.

Предупреждение из справки Тильды: не используйте универсальные селекторы и общие теги вроде div или a без уточнения. Иначе правка заденет весь сайт, а иногда и интерфейс редактора. Используйте уникальные классы или идентификатор конкретного блока.

Наше правило: каждую CSS-правку подписывайте комментарием — что делает и зачем. Через год никто не вспомнит, почему на странице услуг кнопка серая, а не оранжевая.

Как вставить код в Zero Block и чем это отличается от T123

По справке Тильды, HTML-элемент внутри Zero Block работает так же, как блок T123. Разница в том, где он живёт и как ведёт себя на разных экранах.

Когда нужен HTML-элемент в Zero Block. Виджет должен стоять внутри вашего дизайна: например, кнопка записи рядом с фотографией мастера или карта в рамке, которую нарисовал дизайнер. В T123 виджет занимает всю ширину отдельного блока, а в Zero Block его можно поставить в нужную точку.

Чем за это платите. Zero Block настраивается отдельно под каждую ширину экрана. HTML-элемент тоже: на компьютере он стоит справа от фото, а на телефоне его нужно переставить и задать размер вручную. Если виджет сам меняет высоту — например, окно записи раскрывается на весь список услуг, — внутри Zero Block он может обрезаться или наехать на соседние элементы.

Практическое правило:

• виджет фиксированного размера — кнопка, иконка, небольшой счётчик — можно в Zero Block;
• виджет, который меняет высоту, — форма записи, калькулятор, лента отзывов, — ставьте в T123 отдельным блоком;
• после вставки проверьте все ширины Zero Block, а не только компьютер и телефон.

Как устроен сам Zero Block и почему каждый экран в нём дороже в правке, — в статье Zero Block в Тильде.

Что может сломать вставленный код

Самые частые проблемы, которые мы находим при разборе сайтов на Тильде:

Отдельная история — «мёртвый» код. Пиксели систем, которыми давно не пользуются, верификации старых сервисов, скрипты чата, от которого отказались год назад. Каждый из них загружается на каждой странице. Мы регулярно находим в head сайтов по 5–7 таких фрагментов, которые никто не может опознать.

Если на сайте много вставленного кода и никто не помнит, что за что отвечает, — разобрать это быстрее со стороны.

Как проверить, что скрипт не замедлил страницу

1. Замер до. Откройте PageSpeed Insights, вкладка «Мобильные». Прогоните страницу три раза и запишите средние: общую оценку, LCP — время отрисовки главного элемента первого экрана, и TBT — время, пока страница не реагирует на нажатия.
2. Вставьте код и опубликуйте страницу.
3. Замер после. Тем же способом, три раза.
4. Сравните средние. Если LCP вырос заметнее, чем на полсекунды, или TBT вырос в разы, скрипт тяжёлый.
5. Посмотрите диагностику PageSpeed. В разделе диагностики есть пункты о стороннем коде и неиспользуемом JavaScript — там видно, какой домен сколько грузит.
6. Проверьте с реального телефона. Откройте страницу, пролистайте, нажмите на форму. Если страница реагирует с задержкой — это видно сразу.
7. Решите, стоит ли оно того. Виджет записи, через который приходят клиенты, — стоит. Счётчик сервиса, в который никто не заходит, — нет.

Почему по три прогона: результат PageSpeed скачет от запуска к запуску, один замер ничего не доказывает. Остальные причины медленной загрузки и что на Тильде можно ускорить, — в статье медленный сайт на Тильде.

Условный пример: ревизия head

Пример условный, цифры для иллюстрации. Сайт клиники на Тильде, 25 страниц. В head сайта:

После ревизии на главной осталось два скрипта вместо шести. Допустим, LCP на мобильном снизился с 4,1 до 3,0 секунды, а TBT — вдвое. Ничего нового не делали — просто убрали лишнее.

Порядок работы с кодом на Тильде

Чтобы код не превращался в хаос, мы ведём простой порядок:

1. Перед вставкой — замер скорости страницы.
2. Код, нужный на одной странице, ставим в head этой страницы или в T123, а не в head сайта.
3. Каждый фрагмент подписываем комментарием: что это, кто поставил, когда.
4. После вставки — тест на телефоне и тестовая заявка через формы страницы.
5. Ведём список всех вставленных скриптов в отдельном документе: сервис, страницы, ответственный.
6. Раз в квартал проходим список и удаляем то, чем не пользуемся.

Если вставка кода — ваш регулярный сценарий, а программиста под рукой нет, мелкие правки можно поручить ИИ-агенту: мы делаем таких агентов для правок сайта голосом.

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