Добавление изображений в Блок HTML в конструкторе Tilda
Только начала разбираться с конструктором Tilda и у меня возник вопрос. Как добавить изображения в блоке T123? Я хочу сделать полностью кастомный блок, сверстала его и тут встал вопрос изображений. Как их добавить, не используя другие блоки?
Отслеживать
51.6k 203 203 золотых знака 65 65 серебряных знаков 250 250 бронзовых знаков
задан 13 янв 2020 в 12:11
13 1 1 серебряный знак 2 2 бронзовых знака
каким боком конструктор Tilda имеет отношение к html ?
13 янв 2020 в 13:07
не совсем по теме, но мне помогло) спасибо
17 фев 2023 в 19:23
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Конкретно в блок 123 вы загрузить изображение не сможете, однако вы можете загрузить его в какой-нибудь другой блок (например галерею), сохранить и скопировать оттуда URL на изображение.
Ещё как вариант — загрузить изображение на сторонний сервер (например Vkontakte) и взять ссылку оттуда.
Дальше вы можете просто вставить в HTML блок код изображения.
Даст вам результат:
В том же ВК сохраняется не только обработанная и сжатая версия файла, но и оригинал (если требуется прикрепить его).
Как оптимизировать изображения для сайта
Половина проблем со скоростью загрузки сайта связаны с плохой подготовкой изображений для веба. Несколько советов, которые помогут сделать ваши сайты быстрее:
1. Для иконок и иллюстраций используйте векторный формат SVG. Он в десятки раз меньше png или jpg и не теряет в качестве при масштабировании.
2. Не делайте размер изображений «с запасом». Для полноэкранных обложек загружайте изображения шириной 1680px. Для картинок внутри контента рассчитайте ширину по формуле: *100 – 40px
3. Сжимайте картинки, но не увлекайтесь. Визульно изображение должно оставаться качественным. Используйте TinyPNG и Squoosh. Старайтесь добиться размера до 300 кб, идеально — до 100 кб.
4. Дайте изображениям нормальные названия файлов на латинице. Не оставляйте DC14353.jpg, а назовите файл my-company-office.jpg — Яндекс и Google учитывают то, как называется файл картинки. Это добавит баллов для SEO.
5. Задайте альтернативный текст изображениям (alt атрибут). Поисковики поймут, что вы структурируете контент для поисковых роботов и добавят баллов всей странице. А еще ваши изображения будут участвовать в поиске по картинкам и смогут принести дополнительные переходы.
Подробнее про Alt атрибуты
— Добавляйте alt-атрибуты к уникальным изображениям. Alt не нужно ставить на иконки, фоновые изображения, фотографии с фотостоков.
— Делайте alt длинной 70-250 символов. Без переизбытка ключевых слов.
— Для разных видов одного товара интернет-магазина можно использовать одинаковые alt, но добавьте в конце Вид1, Вид2 и т.п.
В Тильде вы можете задать alt-атрибуты почти в каждом блоке, где картинка не используется в качестве фона: http://help-ru.tilda.ws/search-engine#alt
В Zero Block можно задать alt в настройках элемента «Изображение». Если вы используйте элемент «shape» с картинкой на фоне, alt-атрибут задать не получится. Это элемент другого типа в HTML — к нему alt не применим.
Zero Block: список горячих клавиш
S; Переход в Select Tool D; Переход в Draw Tool B; Переход в Bend Tool E; Переход в Edit Tool ⇧ + H; Отразить объект по горизонтали в Select Tool ⇧ + V; Отразить объект по вертикали в Select Tool ⇧ при масштабировании; Пропорциональное масштабирование ⌥ при масштабировании; Свободное масштабирование из центра ⇧ + ⌥ при масштабировании; Пропорциональное масштабирование из центра ⌘/Ctrl + Z; Отменить действие ⌘/Ctrl + ⇧ + Z; Вернуть отмененные изменения ⌘/Ctrl + C; Копировать ⌘/Ctrl + V; Вставить ⌘/Ctrl + A; Выделить все элементы ⇧ при выделении точек или векторных элементов; Выделение нескольких элементов Стрелочки на клавиатуре; Движение элемента на 1 пиксель Стрелочки на клавиатуре с зажатым Shift; Движение элемента на 10 пикселей Backspace или Delete; Удалить элемент ⌘/Ctrl + I; Импортировать SVG [;Переместить элемент векторного изображения выше в слоях ];Переместить элемент векторного изображения ниже в слоях ⌥/Alt + [;Перенести элемент выше в слоях на один шаг ⌥/Alt + ];Перенести элемент ниже в слоях на один шаг ⌥/Alt + перетаскивание мышью в Select Tool; Сделать копию элемента в Select Tool ⌘/Ctrl + перетаскивание мышью в Edit Tool; Без отражения ⌥/Alt + перетаскивание мышью в Edit Tool; Отразить угол Двойной клик в Edit Tool; Переключить режим кривой
Поменять тип экрана
Спрятать сетку
Спрятать настройки
Спрятать управляющие элементы
Отмена последнего действия
Сохранить
Копировать элемент
Вставить элемент
Переместить элемент
Удалить элемент
Изменить прозрачность
Заблокировать элемент
Изменить размер шрифта
Изменить межстрочное расстояние
Изменить межбуквенное расстояние
Выделить все
Показать/спрятать слои
Добавить горизонт. направляющие
Добавить верт. направляющие
Атрибуты Alt и Title для картинок. Ответы на популярные вопросы
251
В сегодняшней статье я хочу рассмотреть, почему всё-таки стоит заполнять HTML-атрибут Alt у картинок, чем он отличается от атрибута Title. Материал рассчитан на новичков и начинающих веб-мастеров, которых интересует вопрос, зачем и почему нужно заполнять атрибут Alt. В конце статьи я подготовил ответы на популярные вопросы по этим атрибутам. Начнём с основ.
Что такое атрибут Alt?
Alt у картинки – это альтернативный источник информации для пользователей, у которых по какой-то причине (слабый интернет, отключено отображение картинок и т. д.) не выводятся изображения на странице. Выводится он в виде текста там, где должна быть картинка.
В HTML-коде атрибут прописывается следующим образом:
Рассмотрим на примере.
Для примера я взял фото с сайта обоев для рабочего стола. Основной контент страницы – изображения.
После того, как я отключил отображение картинок в браузере, вся графика на странице перестала отображаться и можно увидеть альтернативное описание изображения.
С его помощью мы понимаем, что находится на странице. Кроме того, этот атрибут полезен не только пользователю, он также помогает понять поисковому роботу, что изображено на картинке. И Google, и Яндекс используют Alt как один из критериев ранжирования при поиске по картинкам.
Появляется следующий вопрос: что же нужно добавлять в Alt, чтобы он был максимально полезным и для пользователя, и для поисковика?
Как правильно заполнить атрибут Alt для картинок
Что понять, как правильно заполнить атрибут Alt, рассмотрим следующий пример: у нас есть интернет-магазин зоотоваров, и мы хотим прописать Alt для карточки товара с «мячиком для собак».
Есть несколько вариантов заполнения атрибута:
Вариант 1. В качестве альтернативного текста используем «Фото №1», «Картинка 1» и т. д. Такой альтернативный текст не несёт никакой пользы, так как не даёт информации об изображении. Более того, как пишет Яндекс: «Картинки, у которых отсутствуют содержательные описания, не попадают в поиск, так как не могут быть найдены по запросам». Подробнее: «Индексирование картинок».
Вариант 2. Пишем в Alt «Собака с мячиком во рту». В этом случае мы описываем саму картинку, но нужно обратить внимание, что запрос «Собака с мячиком во рту» – информационный. Для описания изображения интернет-магазина он не подойдёт.
Вариант 3. Alt «Мячик для собак» – этот вариант нам больше подходит, но, так как мячиков в магазине может быть много, лучше уточнить запрос.
Вариант 4. Alt «Мячик для собак Humunga Chomp» – этот вариант оптимален для нас. Атрибут содержит название товара и его производителя. Если такого товара много, можно расширить Alt, используя цвет, название модели.
Вариант 5. Alt «Мячик для собак Humunga Chomp, игрушка Humunga Chomp, купить, недорого, Москва» – такой вариант может быть воспринят поисковой системой как спам и нужного результата не принесёт.
Из этих примеров следует, что атрибут Alt:
- должен быть содержательным и описывать картинку;
- состоять из 3–5 слов, но не больше 250 символов (сложно описать картинку двумя словами);
- по возможности содержать ключевой запрос;
- не должен быть спамным.
Зачем нужен атрибут Title?
Title у картинок даёт дополнительную информацию об изображении. Он нужен для того, чтобы пользователю было проще понять, что изображено на картинке. Атрибут выводится при наведении курсора на изображение.
На картинке выше видно, как отображается атрибут на странице.
В HTML-коде атрибут прописывается следующим образом:
.
Если картинка будет ссылкой, Яндекс рекомендует указывать Title в ссылке:
Рекомендуется заполнять Title. Он может положительно отразиться на поведенческих параметрах сайта. Когда пользователю сложно понять, что изображено на картинке, он машинально может навести на неё мышкой и подсказка Title поможет ему сориентироваться.
Основные требования к Title похожи на требования к Alt:
- должен быть содержательным и описывать изображение;
- состоять из 3–5 слов, но не больше 250 символов;
- не должен быть слишком большим, так как при наведении текст в 3–4 строчки может отпугнуть;
- по возможности содержать ключевой запрос;
- не должен быть спамным.
Зная это, перейдём к вопросам.
Ответы на популярные вопросы по Alt и Title
Alt это описания к изображениям?
Не совсем. Alt – это альтернативное описание, которое будет выводиться вместо картинки, если у пользователя не отображаются изображения.
Обязательно ли заполнять атрибуты Alt и Title для картинок?
Если Вас интересует трафик из поиска по картинкам, Alt обязательно нужно заполнять, Title – по желанию.
Alt и Title должны быть разными или одинаковыми?
Существует два основных мнения по этому поводу:
1) Alt и Title должны быть уникальными;
2) атрибуты должны быть одинаковыми.
Если посмотреть, как заполняют эти атрибуты сайты, изображения которых находятся в ТОПе поиска по картинкам, увидим оба варианта заполнения.
Яндекс по этому поводу пишет следующее:
Я считаю, что эти атрибуты могут быть одинаковыми. Главное, чтобы они давали чёткое структурированное описание вашей картинке.
Нужно ли прописывать возле атрибута Alt ещё и Title?
Необязательно, но учтите: атрибут Title в некоторых случаях помогает лучше понять, что изображено на картинке. Это может положительно отразиться на поведенческих показателях сайта.
В Alt картинки надо ставить те же ключевые слова, что и у статьи, или другие?
Желательно. Главное, чтобы Alt был содержательным и описывал картинку.
Нужно ли прописывать в этих атрибутах ключевые слова?
Если эти ключевые слова будут описывать картинку, то да.
Как правильно писать атрибут Alt: кириллицей или латиницей?
Если ваш сайт на русском, заполняйте кириллицей.
Как писать – с большой или маленькой буквы?
Не имеет значения.
А если статья уже проиндексирована поисковиками, можно внести описание в картинки или не стоит?
Можно. Когда поисковики переиндексируют вашу страницу, они учтут эти описания.
Где заполнять Alt и Title?
Всё зависит от того, на какой CMS сделан ваш сайт.
Если это чистый HTML, то:
Обычно поля для заполнения Alt и Title находятся в параметрах изображения. Например, если ваш сайт сделан на WordPress, открыв параметры изображения, вы увидите поле для заполнения атрибута Alt. В дополнительных настройках есть поле для атрибута Title.
Если же ваш сайт на 1С-Битрикс, в дополнительных настройках параметров изображения есть поле для атрибута Alt. Атрибут Title будет подтягиваться из поля «Заголовок».
Нужно понимать, что всё индивидуально. Многое зависит от того, на какой CMS сделан ваш сайт и как настроен.
Стоит ли и возможно ли прописывать Alt и Title для своих картинок в комментариях?
Не вижу в этом необходимости, да и вряд ли у кого-то в комментариях есть возможность оптимизировать изображения.
Когда к картинкам пишу тайтл и альт на русском, на сайте высвечиваются иероглифы, что делать?
Такое происходит из-за кодировки. Нужно преобразовать текущую кодировку в UTF-8.
Итоги
Ещё раз пробежимся по тому, какими же должны быть Alt и Title.
Основные требования к атрибуту Alt:
- содержательный, описывает изображение;
- длиной около 3–5 слов (до 250 символов);
- по возможности должен включать ключевой запрос;
- не должен быть спамным.
Почему стоит заполнять Alt:
1. учитывается поисковыми системами при ранжировании картинок, а значит, если ваша картинка попадёт в ТОП, – это источник дополнительного трафика;
2. будет полезен пользователю, у которого отключены изображения на сайте.
- содержательный и описывает изображение;
- длиной около 3–5 слов или до 250 символов;
- по возможности должен содержать ключевой запрос;
- без спама.
Почему стоит заполнять Title:
1. будет полезен пользователю, которому сложно разобраться, что изображено на картинке;
2. подсказки Title могут положительно отразиться на поведенческих показателях сайта.
Рекомендую к ознакомлению:
Подписаться на рассылку
- Как и зачем оптимизировать страницу контактов? Внимание! У нас вышла новая статья с актуальными данными по страницам контактов, прочитать её можно по ссылке Оформляя страницу контактов, многие считают, что достаточно указать адрес.
- Структура интернет-магазина: основное меню, сквозные блоки, перелинковка и навигация 1. Структура интернет-магазина 1.1. Анализируем структуру конкурентов и берём лучшее 1.2. Структура на основе ассортимента магазина 1.3. Структура на основе семантики и спроса 1.4. Оставляйте.
- Автогенерация метаописаний title и description Оптимизация метаописаний Title, Description и Keywords — это первое, на что должен обращать внимание SEO-специалист, начиная работу с проектом. Для тех, кто не знает, поясню.
- Добавлять ли тексты на коммерческие категории сайта, если у конкурентов таких текстов нет? Решили размещать на категориях сайта тексты. Заметили, что на некоторых категориях у конкурентов есть тексты, а на некоторых нет. Что делать, повторять за конкурентами или.
- 5 важных нюансов продвижения сайтов с помощью поддоменов Читатели нашего блога часто задают вопросы о создании поддоменов для продвижения. Например, в каких случаях целесообразно создавать поддомен, стоит ли дублировать на поддомене служебные страницы.
Всегда знал, что моя работа будет связана с интернетом и компьютером. Начал самостоятельно учить HTML и пробовать себя в верстке. HTML давался легко, но верстать сайты было скучно. Тогда я и узнал о SEO.
С отличием завершил мастер-класс по обучению и управлению персоналом. Сдал письменный тест по английскому языку в Лондонской школе на 98%. Написал более десятка развивающих статей по SEО.
Работаю SEO-специалистом в компании SiteClinic, пишу статьи для блога. В свободное время хожу в походы.