код для курсора тильда
Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода
1) Создаем в редакторе zero блока элемент и настраиваем ему анимацию с настройкой EVENT: On click.
2) Создаем элемент, при наведении на который будет происходить анимация на первом элементе.
3) Добавляем код 1 в блок T123.
4) Добавляем код 2 в блок T123 и указываем в нем:
Класс элемента, на котором задали анимацию в шаге 1;
Класс элемента, при наведение на который будет происходить анимация;
Суммарное время анимации в секундах, которое указали в редакторе анимации.
5) Если нужно добавить еще одну зависимую анимацию, нужно копировать только код 2.
Зависимая анимация при наведении
Зависимая анимация нужна когда при нажатии или наведении на один элемент, запускается анимация других элементов на экране. Например, при наведении на кнопку, позади неё происходит анимация.
При наведении курсора на элемент происходит анимация, а когда курсор покидает область элемента, анимация проигрывается в исходное положение. В мобильной версии работает не по наведению, а по нажатию.
time в коде указывает когда элемент может начать проигрывать анимацию обратно. В некоторых случаях, например, при наведении на кнопку рядом с ней происходит анимация нескольких элементов с разным временем, лучше в коде выставить всем время максимальной анимации. Пример:
Шейп 1 — Время анимации 0.7
Шейп 2 — Время анимации 0.4
Шейп 3 — Время анимации 1
Тут лучше выставить всем time = 1;
Инструкция
1) Создаем в редакторе zero блока элемент и настраиваем ему анимацию с настройкой EVENT: On click.
2) Создаем элемент, при наведении на который будет происходить анимация на первом элементе.
3) Добавляем код 1 в блок T123.
4) Добавляем код 2 в блок T123 и указываем в нем:
Класс элемента, на котором задали анимацию в шаге 1;
Класс элемента, при клике на который будет происходить анимация;
Суммарное время анимации в секундах, которое указали в редакторе анимации.
5) Если нужно добавить еще одну зависимую анимацию, нужно копировать только код 2.
Зависимая анимация нужна когда при клике или наведении на один элемент, запускается анимация других элементов на экране. Например, при наведении на кнопку, позади неё происходит анимация.
При клике на элемент происходит анимация, и при повторном клике, анимация проигрывается в исходное положение.
time в коде указывает когда элемент может начать проигрывать анимацию обратно. В некоторых случаях, например, при наведении на кнопку рядом с ней происходит анимация нескольких элементов с разным временем, лучше в коде выставить всем время максимальной анимации. Пример:
Шейп 1 — Время анимации 0.7
Шейп 2 — Время анимации 0.4
Шейп 3 — Время анимации 1
Тут лучше выставить всем time = 1;
Seo-оптимизация сайта на Тильде — полное руководство
В этой статье я постараюсь максимально подробно описать вам все возможности, которые предоставляет конструктор Тильда для реализации seo-оптимизации сайта.
Всем скептикам и тем, кто считает, что Тильду нельзя вывести в топ, скажу так:
В моем запасе на момент написания статьи есть кейс вывода в топ мультиязычного сайта, лендинга!, интернет-магазина и блого-статейного сайта по Блокчейну на американский рынок.
Кейсы постараюсь в ближайшее время описать и выставить на сайте, чтоб у вас была возможность ознакомиться с цифрами и результатами.
Статья подготовлена для тех наших читателей, которые уже понимают и знают, что такое мета-теги, альты и прочие seo-примочки. Если все же для начала вам нужно разобраться с понятиями SEO и узнать, зачем оно вообще нужно, то предлагаю вам ознакомиться с подробнейшей статьей от Владимира Самойлова под названием «SEO оптимизация для новичков — Подробный гайд: что важно, что нет, с чего начать».
О всех важных моментах оптимизации сайтов на Тильде поговорим далее.
Настройка мета-тегов в Тильде
Настройка мета-данных — это вообще самое важное, что вы должны сделать для каждой страницы. Заголовок и описание страницы дают понять поисковым роботам короткую суть вашей страницы, чем вы занимаетесь или что вы продаете. Это именно та часть, которая выводится в поиске :
Заходим в настройки страницы, у которой хотите поменять мета-данные:
Можно сразу задать значения для meta-заголовка и описания в открывшейся вкладке, но я рекомендую перейти на вкладку «Facebook and Seo»:
На этой вкладке вы сможете задать заголовки и описания отдельно для Facebook и для Seo. Опускаемся вниз и видим кнопку «Задать специальные meta-данные»:
Meta-title
Заказать ремонт квартиры в Киеве от 550 грн./кв.м.
Meta-description
Ремонт квартиры под ключ в Киеве и Киевской области. Отличные отзывы. Расчет стоимости. Получить скидку
Рекомендую использовать инструмент для проверки длины meta-данных по этой ссылке или любой другой.
Ключевые слова
Сюда необходимо вставить ключевые слова из вашего семантического ядра. Добавляйте не более 5 слов на страницу. В моем случае я добавлю такое:
Ремонт квартиры, киев, киевская область, цена, отзывы
Канонический адрес страницы
Индексация и ссылки
Вы можете поставить галочку и запретить поисковым системам индексировать данную страницу, т.е. как-то выводить ее в результатах поисковой выдачи.
Вы также сможете запретить поисковым роботам переходить по ссылкам на этой странице.
Сохраняем все изменения, которые мы проделали.
Какие мета-данные вы получите
В итоге вы получите следующее:
Для Facebook вы можете продублировать мета-данные, а можете что-то подкорректировать.
[blognotice text=»Помните, что мета-данные должны быть уникальными для каждой страницы»]
Заголовки H1-H6 в Тильде
У каждой страницы сайта должен быть как минимум заголовок H1. Рекомендую вам также задействовать H2 и H3. В некоторых сложных случаях можно использовать остальные заголовки H4, H5 и H6. Чем качественнее будет ваша разбивка информации на странице, тем лучше ее будут воспринимать посетители и поисковые системы.
Назначить заголовки вы можете как в стандартном, так и в zero блоках.
Заголовки в стандартных блоках
Не во всех стандартных блоках есть такая настройка, так как не все блоки нуждаются в ней. К примеру, в блоке с галереей изображений вставить текстовый заголовок попросту негде.
А вот в блоках, где есть текстовая часть, эта настройка вполне реализуема. Например, обложка — самый популярный вариант начала страницы, куда как раз лучше всего вставлять заголовок H1.
Заходим в настройки блока, прокручиваем вниз и видим свойство «SEO: ТЕГ ДЛЯ ЗАГОЛОВКА»:
Выбираем нужный нам заголовок H1 и сохраняем. После этого, в моем случае, текст «Ремонт квартир в Киеве» станет заголовком H1.
Заголовки в ZERO блоках
В Zero блоках все еще намного проще. Заходим в Zero, находим нужный нам текстовый элемент и ищем в его свойствах «TAG»:
Выбираем нужный нам заголовок.
Свойство ALT для изображений в Тильде
Довольно важное свойство для Seo, которое также может вам помочь попасть в специальную подборку Картинок в поиске. Это также может привлечь дополнительный трафик на сайт.
ALT в стандартных блоках
Заходим в КОНТЕНТ стандартного блока. Находим интересующую нас картинку. Справа напротив изображения вы увидите многоточие.
После клика на многоточие под фото появится дополнительное поле «SEO: АЛЬТ-ТЕКСТ ДЛЯ ИЗОБРАЖЕНИЯ», куда вы можете вставить подпись картинки:
ALT в ZERO блоках
Дела обстоят просто и в zero блоках. Переходим в Zero? находим нужную картинку и открываем ее свойства. Ищем раздел ALT:
Подключение инструментов индексации Google и Яндекс к сайту на Тильде
Речь пойдет о подключении Google Search Console и Яндекс Вебмастера. Это важные инструменты продвижения, без которых будет сложно анализировать выдачу, поведение страниц, поисковые запросы и многое другое.
Подключение Google Search Console
Если ваш сайт еще не добавлялся в Search Console
Для начала нужно его туда добавить. Перейдите на сайт https://search.google.com/search-console/welcome
Введите адрес сайта и нажмите кнопку Продолжить:
Дальше открывается окно «Подтверждение права собственности» на ваш сайт. Найдите там раздел «Тег HTML» и нажмите кнопку «копировать»:
Дальше переходим в настройки сайта на Тильде и ищем вкладу ЕЩЕ. Опускаемся в самый низ и находим раздел «Подтверждение прав»:
Теперь вспоминаем, что мы скопировали тег в Search Console. Нам он нужен не весь, а только его содержимое внутри кавычек после content=
В моем случае я скопировал следующее
Значит вставлю в настройки Тильды только это:
Сохраняем изменения и переходим на страницу Search Console. Нажимаем кнопку «Подтвердить»:
Права подтверждены, и с этого момента вы можете остлеживать и анализировать состояние сайта в Google.
Если ваш сайт уже был добавлен в Google Search Console
Зайдите в настройки сайта в Тильде. Перейдите во вкладку SEO/ Вам нужен раздел «GOOGLE SEARCH CONSOLE». Нажмите на кнопку «Редактировать»:
После этого нажимайте кнопку «подключить». Откроется окно с выбором аккаунтов Google. Вам нужно предоставить доступ Тильде к тому аккаунте, где находится ваш сайт в Search Console.
Подключение Яндекс Вебмастер
Если сайт еще не был добавлен в Яндекс Вебмастер.
Мы пойдем по тому же пути, как и в случае с Google Search Console — подтвердим права через мета-тег.
Вводим адрес сайта и нажимаем кнопку «Добавить»:
После этого открывается окно подтверждения прав на сайт, в котором сразу предлагается нужный нам вариант подтверждения через мета-тег. Копируем только часть кода между кавычками после content=
В моем случае это будет такой код:
Далее переходим в Тильду. Откройте настройки сайта. Нужна вкладка «Еще». В самом низу ищите раздел «Подтверждение прав»
Вставляем сюда наше значение и сохраняем изменения.
Возвращаемся в интерфейс Яндекс Вебмастера и нажимаем кнопку «Проверить»:
Вы подтвердили права на сайт успешно.
Если ваш сайт уже был добавлен в Яндекс Вебмастер
Зайдите в настройки сайта на Тильде. Вам нужна вкладка «Seo». Там вам нужен раздел «Яндекс Вебмастер». Нажимайте кнопку «Редактировать»:
В открывшемся окне нажимайте кнопку «подключить». Откроется окно с выбором аккаунтов Яндекс. Вам нужно Разрешить доступ Тильде к тому аккаунте, где находится ваш сайт в Вебмастере.
SEO-рекомендации Тильды
У Тильды есть свой неплохой инструмент для отслеживания технических проблем с сайтом. Он всегда вам подскажет, где не хватает заголовков, где не проставлены мета-данные или дублируются их значения.
Заходим в настройки сайта, во вкладку SEO. Ищем там раздел SEO-рекомендации и нажимаем кнопку «Посмотреть»:
Появляется вот такое окно (у меня всего одно замечание, так как сделал вам страницу для примера, а не полноценный сайт):
Тильда подскажет, на какой странице и что конкретно вам нужно исправить.
Так что, не забывайте про этот инструмент.
Подключение аналитики к Tilda
Подключение Google Analytics
Переходим на сайт https://analytics.google.com/ и регистрируем ваш новый счетчик.
После прохождения регистрации вам необходимо зайти в пункт меню «Администратор»:
Находим пункт «Отслеживание» и нажимаем на него Потом кликаем по «Код отслеживания»:
В открывшейся странице ищем «Идентификатор отслеживания» и копируем его:
Переходим в настройки сайта Тильды на вкладку «Аналитика»:
Кликаем «вручную» и вставляем скопированный идентификатор.
Гугл аналитика подключена к Тильде.
Подключение Яндекс Метрики
Вверху слева будет кнопка «Добавить счетчик»:
Жмем и переходим дальше. Заполняем поля имени счетчика, адрес сайта, читаем и соглашаемся с условиями пользовательского соглашения и нажимаем кнопку «Создать счетчик»
Опускаемся в самый низ страницы и жмем «Начать пользоваться»
На новой странице вы увидите свой новый счетчик в списке всех счетчиков (или только одного). Вам нужно скопировать его идентификатор:
Теперь переходите в настройки Тильды на вкладку «Аналитика». Вам нужен раздел Яндекс Метрики. Кликаем на «вручную» и вставляем идентификатор:
ВАЖНО!
На вкладке «Аналитика» в настройках сайта Тильды внизу есть специальное поле «Выключить отложенную инициализацию счетчиков и пикселей»:
По умолчанию галочка снята. Зачем это нужно? Ответ прост — таким образом скорость загрузки сайта существенно улучшается. А это в свою очередь хорошо влияет на оценку поисковикам технической стороны сайта. Есть только один минус — статистическая погрешность в эти 2 отложенных секунды. Если же для вас это существенная погрешность, то поставьте галочку.
Скорость загрузки сайта на Тильде
По умолчанию показатели скорости загрузки сайтов, сделанных на Тильде, довольно высокие. Разработчики Тильды использовали всё возможное и невозможное, чтоб ваш сайт стал максимально быстрым.
В Тильде реализованы:
Все это работает как часы. Главное придерживаться 2 важных моментов:
Подключение SSL-сертификата https
Я рассказывал в другой статье о том, как правильно подключить домен к сайту Тильду. После подключения у вас появится возможность бесплатно включить SSL-сертификат. Заходим в настройки сайта на вкладку SEO:
Нажимаем кнопку «Редактировать» в настройках HTTPS. На новой странице вам нужно включить HTTPS легким движением переключателя:
После этого через 5-30 минут сайт уже будет доступен по безопасному соединению.
Как только сайт стал открываться по https:// рекомендую в той же вкладке настроек сайта SEO опуститься вниз страницы и выбрать такую схему:
Далей, найдите раздел «РЕДИРЕКТЫ ДЛЯ WWW, HTTPS» и перейдите в него:
Рекомендую выбрать такие же настройки и сохранить:
Страница 404 на Тильде
Эта страница позволяет задержать пользователя на сайте даже если он перешел на несуществующую страницу. Важность такой страницы, думаю, вы понимаете.
Кстати, подробности о том, как правильно создать страницу 404 я описал в этой статье. Создали? Тогда идем дальше. Заходим в настройки сайта — вкладка «Еще». Вам нужен раздел «СТРАНИЦА: 404 ОШИБКА». Выберите вашу страницу 404 среди всех:
Сохраните изменения и переопубликуйте все страницы сайта. Страница 404 готова.
Добавление микроразметки в Тильду
Микроразметка помогает прежде всего выделиться сайту среди остальных в поисковой выдаче.
Для генерирования микроразметки можно воспользоваться простым и понятным инструментом на сайте https://webcode.tools/json-ld-generator:
Выбираем наиболее подходящий раздел для вашей страницы.Затем заполняем требуемые поля и копируем код:
Переходим в настройки страницы во вкладку «Дополнительно»:
Опускаемся вниз и ищем раздел «HTML-КОД ДЛЯ ВСТАВКИ ВНУТРЬ HEAD». Нижимаем кнопку «Редактировать» и вставляем скопированный код:
Теперь сохраним изменения и опубликуем страницу.
ВЫВОДЫ о SEO для ТИЛЬДЫ
Как вы видите, seo оптимизация сайта Тильды довольна проста. А главное, в интерфейсе можно реализовать абсолютно все необходимые настройки.
Для вас мы записали Видео, возможно оно будет более наглядным примером:
3 комментариев к записи « Seo-оптимизация сайта на Тильде — полное руководство »
Спасибо, не хватало такого объемного материала. Почти все вопросы закрыты))
Скажите, влияет ли количество страниц на сайте на успешное продвижение? То есть, чем больше страниц тем лучше..
Все верно. чем больше страниц, тем больше охват и тем больше посещаемость. В выбранной вами нише вы можете посмотреть на топ-10 конкурентов. Там вы вряд ли найдете одностраничный сайт. Но если у вас одностраничник, способный исчерпывающе закрыть потребность пользователя и слабая конкуренция, то шансы покорить топ довольно высоки!
Как сделать кастомный курсор Tilda Zero Block (анимированный)
Для просмотра онлайн кликните на видео ⤵
Любой кастомный курсор БЕСПЛАТНО в Tilda Zero BlockПодробнее
Tilda. Как сделать кастомный таймер в zero blockПодробнее
Сложная анимация в Zero Block: мастер-классПодробнее
Мастер-класс «Анимация в Zero Block»Подробнее
КАК СДЕЛАТЬ СВОЙ КАСТОМНЫЙ КУРСОР МЫШИ НА ТИЛЬДА? Рисуем собственные курсоры и загружаем на сайт!Подробнее
Пошаговая анимация в Tilda PublishingПодробнее
Продвинутая пошаговая анимация в Zero Block: мастер-классПодробнее
7 Нескучных кнопок для сайта в тильде | Tilda Zero Block, FigmaПодробнее
Как сделать свой курсор на сайте TildaПодробнее
Как настроить ховер эффект | Пошаговая анимация в Tilda PublishingПодробнее
Как сделать необычную смену фона при скролле | Пошаговая анимация в Tilda PublishingПодробнее
11-й ВЫПУСК. АНИМИРОВАННЫЙ КУРСОР ДЛЯ ТИЛЬДЫ ⚯ CUSTOM CURSOR ANIMATION TO WEB-SITEПодробнее
Эффект «Летающие птицы» для Tilda в Zero BlockПодробнее
Делаем свои курсоры в ТильдеПодробнее
5 нереальных эффектов в Tilda которые ты точно захочешь попробовать | Zero Block в ТильдеПодробнее
ПРИМЕРЫ АНИМИРОВАННОГО ZERO-BLOCK МЕНЮ ДЛЯ ТИЛЬДЫ ⚯ CREATE ANIMATION MENU FOR WEB-SITE TILDA 💲💲💲Подробнее
Кастомный курсор Tilda | Кастомный курсор мыши для сайтаПодробнее
Эффект бегущей строки в редакторе Zero blockПодробнее
4-й ВЫПУСК. АНИМАЦИЯ КОТОРАЯ СМОТРИТ НА КУРСОР В ТИЛЬДЕ ⚯ CREATE ANIMATION FOR WEB-SITE TILDAПодробнее