Атрибуты Alt и Title для картинок: как прописать, что это и зачем нужно
Alt и Title – SEO-параметры фото, которые помогают в раскрутке страниц сайта. Далеко не все сеошники тратят время на такие нюансы, как оптимизация иллюстраций. Но именно от подобных мелочей и зависит успешное продвижение сайта. Обратив внимание на этот момент, вы обойдёте своих конкурентов. Тем более что сделать это совсем несложно.
В сегодняшней статье вы узнаете, что такое атрибуты Alt и Title изображений, где их добавлять и как использовать для максимального эффекта.
Реклама: 2VtzqxH87n9Читайте также: 10 курсов для SEO-специалистов
Что такое атрибуты Alt и Title в теге img
Оптимизация иллюстраций подразумевает три этапа:
- создание уникальной иллюстрации;
- сжатие для быстрой загрузки;
- заполнение текстовых атрибутов.
Сегодня мы остановимся именно на последнем этапе. Готовы увеличить посещаемость своего сайта за счёт правильного использования Alt и Title? Тогда читайте дальше!
Итак, Alt – это альтернативный текст
В принципе атрибут Alt имеет значение и в глазах посетителей, особенно тех, кто пользуется мобильными устройствами. Некоторые из них отключают показ графики для экономии трафика, и благодаря Альту они, по крайней мере, смогут узнать, что в каком месте отрисовано.
В коде Alt виден так:
<img src="Путь к картинке" alt="Альтернативное описание изображения" />
Теперь поговорим о Title. С английского языка слово переводится как «заголовок», в этом и заключается его основная функция. Если атрибут заполнен, то при наведении на картинку, появится надпись (название изображения).
Тайтл нужен, прежде всего, для улучшения поведенческих факторов. Когда посетителю сайта сложно понять, что демонстрируется на фото, он машинально может навести на него курсор – Тайтл станет для него желанной подсказкой. Хотя поисковики не придают особого значения этому атрибуту, благодаря ему вы сумеете косвенно повлиять на SEO.
Как и в случае с Alt, Тайтл можно указать в настройках изображения или прописать в HTML-коде:
<img src="Путь к картинке" alt="Альтернативное описание изображения" /> title=”Заголовок фото”>
Вот как это выглядит в административной части сайта на «Вордпресс»:
Статья в тему: Оптимизация изображений на сайте
Как использовать Альт и Тайтл у изображений
Сначала рассмотрим вопрос: должен ли Тайтл быть с Alt одинаковым? По поводу этого на различных форумах существуют спорные точки зрения. Большинство сеошников выступает за отличие атрибутов, но саппорт Яндекса не так категоричен.
Поиск по изображениям включает в себя оба варианта.
Alt и Title могут быть идентичными. Гораздо важнее – предельно чёткое, точное описание изображения.
Необходимо ли включать в атрибуты ключевики? Здесь также не существует единого мнения. Среди лидеров поисковой выдачи есть иллюстрации без ключевых слов в атрибутах. В инструкциях популярна рекомендация по добавлению главного ключа из h2. Но есть нюанс: если иллюстраций в посте десятки, и все они включают этот поисковый запрос, страница будет с переспамом. А значит, вас ждёт наложение санкций от Яндекса, Гугла и ухудшение позиций в серпе.
Менее рискованным решением является использование в атрибутах Тайтл и Альт разных низкочастотников.
Непременно учтите:
- Альт проработайте обязательно, а Тайтл – по возможности;
- атрибуты можно писать как с большой, так и с маленькой буквы;
- когда сайт создан на русском языке, лучше заполнять Alt и Title изображений кириллицей;
- оптимизировать картинки можно и после того, как текст уже проиндексирован поисковиками.
Как прописать Alt для картинок
Давайте определимся, каким должен быть атрибут Альт, который понравится и поисковым системам, и пользователям.
Придерживайтесь этих правил:
- текст обязан коротко, но чётко раскрывать суть иллюстрации;
- оптимальным размером считается короткое предложение или словосочетание из двух–четырёх слов;
- в идеале это должны быть дополненные или разбавленные ключи;
- для каждой картинки лучше использовать разные ключи.
Рассмотрим на примере, как лучше оптимизировать Alt. Допустим мы продвигаем сайт по автопрокату. В карточке товара для основного фото нужно задать Alt и Title. Если в качестве Альт использовать «image_123» и «Фото для сайта 345», то это не принесёт никакой пользы. Такой Alt не даст нужных сведений о картинке, значит, она не отобразится в поиске. По словам техподдержки Яндекса, в выдачу попадают лишь картинки с чётким описанием, которые могут быть найдены по конкретным запросам. Лучше вписать в Alt «Toyota на прокат в СПБ», можно даже кратко рассказать об особенностях авто.
Что написать в Тайтл
Требования напоминают советы по настройке Альт:
- по возможности добавьте ключевое слово;
- заглавие обязано объяснять смысл фото;
- идеальный размер – до 240 знаков.
Снова вернёмся к примеру с автопрокатом. Нам следует указать следующий Title: «Серебристая Toyota Allex на прокат в СПБ: 5 пассажирских мест, расход топлива – 7,2 л на 100 км».
Это интересно: Заголовки h2 и Title — делать одинаковыми или разными
Как прописать атрибуты Alt и Title для картинок
Способ добавления атрибутов зависит от движка сайта.
HTML
Если у вас самописный сайт (не на движке), то добавлять атрибут для картинок придётся в ручном режиме.
Чтобы сделать это, откройте файловую систему сайта на хостинге или через специальную программу по FTP. Найдите код иллюстрации ( тег <img), сразу после него и надо вписать Alt и Title.
Это должно выглядеть так:
<img src="Путь к картинке" alt="Альтернативное описание" title="Дополнительная информация">
Советуем сохранить себе образец, чтобы заполнение атрибутов происходило для вас быстро.
WordPress
Здесь всё проще. Если ваш сайт расположен на этом движке, перейдите в консоль (административную часть), а дальше в пункт «Медиафайлы». Затем зайдите в библиотеку и отыщите графику. После чего вам останется ввести данные.
Эти действия можно повторить и путём редактирования публикации: нажмите на картинку, для того чтобы на ней появился знак карандаша.
Tilda
Чтобы задать альтернативный текст для изображения у сайта на Тильде, откройте меню «Контент» и нажмите знак многоточия напротив загруженного изображения.
Чтобы добавить alt тег для изображений в блоках из категории «Галереи», откройте меню «Контент» и напротив загруженной картинки нажмите ссылку «Текст». Затем в поле Image alt for SEO укажите описание картинки.
ЗаключениеВ заключение хотим напомнить, что для успешного продвижения в интернете нет мелочей. Оптимизируйте картинки с помощью атрибутов Alt и Title – это поможет вам обойти конкурентов!
Полезные ссылки:
- 38 коммерческих факторов ранжирования сайтов
- Как бесплатно продвигать сайт
- 11 парсеров Яндекс. Вордстат
Сравнение онлайн-курсов
Перед тем, как купить любой курс, сравните условия от разных школ — стоимость обучения, скидки, длительность, есть ли программа трудоустройства. Подобрать онлайн-курс >>
Реклама
Больше статей по теме:
РекламаРЕКОМЕНДУЕМ:
НОВОСТИ
ОБЗОРЫ
СТАТЬИ
РекламаЧто такое атрибуты Alt и Title для картинок и как их правильно составлять
- 19 марта 2018
- Продвижение
- 75.4K
- 4 мин.
- Понравилось? Поделись! Прочесть позже
Сейчас трудно представить сайты без изображений, тем более интернет-магазины и каталоги товаров. Ведь это отличный способ привлечь внимание посетителей, показать товар «лицом» и сподвигнуть потенциальных клиентов к совершению целевых действий: покупке товара или заказу услуги. Подробнее о том, для чего еще нужны картинки и на каких страницах они должны быть, можете прочитать в нашей статье «Подбор и оптимизация изображений для сайта».
Использование картинок сделает сайт привлекательнее и поможет удержать посетителей на нем, но что более важно, из поиска по картинкам в Яндексе или Google к вам на сайт может прийти дополнительный трафик (при корректном использовании атрибутов Alt и Title тега <img>).
Что такое атрибут Alt для картинок
Атрибут Alt для картинок – это текст, описывающий изображение в html-теге <img>. Он становится видимым в случае невозможности загрузки изображения. На месте незагруженной картинки будет показан текст (при заполненном атрибуте Alt).
Давайте сравним. Так будет выглядеть незагруженное изображение без заполненного атрибута Alt:
А вот так будет выглядеть картинка с текстом «Стиральная машина Славда WS30T/ET» в атрибуте Alt тега <img>:
Атрибут Alt дает возможность узнать, что изображено на картинке, когда пользователь не может ее увидеть. Кроме того, прописанный текст в атрибуте Alt учитывается поисковыми роботами при индексации сайта. Наконец, оптимизация названий картинок и атрибутов Alt в теге <img> упрощает поиск изображений, например, в Яндекс или Google Картинках.
Как правильно составить атрибут Alt для картинок
- Оптимальное количество слов – 3-5, но длина текста тега не более 75-80 символов. Мы рекомендуем использовать краткую и сжатую, но содержательную информацию.
- Обязательное условие – использование ключевых запросов.
- Ключевые слова лучше употреблять в именительном падеже, чтобы облегчить поиск.
- Избегайте спама: мы не рекомендуем перечислять большое количество ключей через запятую, как и в других тегах.
- Необходимо, чтобы Alt относился к тексту страницы и описывал то, что изображено на картинке.
Атрибут Title для изображений
Кроме атрибута Alt следует также прописывать текст в атрибуте Title. Данный параметр задает вспомогательную информацию о картинке, когда пользователь наводит курсор на изображение:
В html-коде заполненный атрибут Title для картинок выглядит так:
Правильно составленный атрибут Title даже помогает улучшить поведенческие факторы.
Как правильно составлять Title для картинок
- Атрибут Title должен соответствовать изображению. Не следует писать в нем то, что не имеет к картинке никакого отношения.
- Лучше использовать небольшой по длине Title для удобства пользователей – никто не захочет читать километровую подсказку к картинке.
- Желательно наличие ключевых слов. Не стоит употреблять такие слова, как «фото», «картинка» и т.д., ведь и так понятно, что это такое.
Пример правильного заполнения атрибутов Alt и Title для тега <img>
Рассмотрим на примере, как можно прописать текст в атрибутах Alt и Title для картинки. Для этого возьмем изображение с сайта строительной компании.
При составлении Alt необходимо сделать акцент на то, что вы продаете/предлагаете. Для картинки из нашего примера будет предпочтительнее составить альт «Строительство дома из бревна», а не просто «дом» или «строительство».
Атрибут Title для данного изображения можно немного видоизменить и составить так: «Строительство бревенчатого дома».
Трудности при заполнении Alt и Title
-
Несколько фотографий одного и того же товара
Как же быть интернет-магазинам, в которых для разнообразия и удобства пользователей представлено несколько изображений одного и того же товара? В этом случае, нормальное явление – составить одинаковый текст для Alt и Title ко всем картинкам.
-
Один и тот же товар, но разного цвета
В данном случае можно порекомендовать добавлять название цвета в текст Alt и Title. Например, для платья зеленого цвета можно составить такой Alt: «женское зеленое платье», а для платья красного цвета – «женское красное платье».
-
Большое количество товаров
Крупные интернет-магазины могут столкнуться со следующей проблемой: на сайте слишком много товаров и изображений для них. Чтобы составить атрибуты Alt и Title для тысячи товаров вручную, потребуется очень много времени. Поэтому, в данном случае, можно автоматизировать вывод этих атрибутов из названия продукции и/или заголовка Н1, а также добавить цвет или артикул товара.
Правильно заполненные атрибуты Alt и Title к картинкам помогут в поисковой оптимизации сайта. Но не стоит забывать и про другие аспекты оптимизации картинок, такие как «вес», качество и название изображений. Если у вас нет времени на составление атрибутов Alt и Title, мы можем помочь вам и выполнить эту работу за вас.
#картинки на сайте #оптимизация сайта #мета-теги #продвижение сайта
© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна
Пошаговое руководство по самостоятельному продвижению сайта
- Все обязательные этапы продвижения
- Инструкции, как делать самому
- Ориентировочные цены специалистов
Популярные статьи
- 36. 4K
- 6 мин.
- 12.9K
- 8 мин.
- 24.8K
- 11 мин.
Все популярные статьи »
Фотографические атрибуты — класс фотографии ERHS
Элементы языка фотографии > Фотографические атрибуты
|
Как правильно атрибуировать изображения Creative Commons
Feature Photo: Label, Tag, String, Shape
Правильные действия — это не только оплата изображений, но и правильное указание авторов за их работу. В большинстве случаев, если вы используете изображение, по закону вы обязаны указать его атрибут, и невыполнение этого требования может привести к судебному разбирательству. К счастью, атрибуция изображения довольно проста; читайте дальше, чтобы узнать, как именно это сделать.
Атрибуция изображений Creative Commons
Если вы не используете изображение, опубликованное под лицензией Creative Commons Zero (CC0), указание авторства является юридическим требованием. Структура Creative Commons (CC) определяет атрибуцию как предоставление «надлежащего кредита», который некоторые люди ошибочно считают открытым для интерпретации. На самом деле CC означает TASL, простой и гибкий метод, учитывающий требования различных лицензий CC.
Чтобы убедиться, что изображения правильно атрибутированы, включите следующие детали и убедитесь, что они четко отображаются рядом с соответствующим изображением (в идеале прямо под ним):
- Название: Название изображения.
- Автор: Имя создателя.
- Источник: URL-адрес, по которому размещено изображение (плюс необязательная ссылка на профиль автора).
- Лицензия: тип лицензии Creative Commons, под которой он доступен, включая ссылку на соответствующую лицензию.
Согласно Creative Commons, идеальным примером TASL будет:
«Зима в городе», Дэвид Дж., под лицензией CC BY 2.0
Вот несколько полезных советов для правильной атрибуции изображения Creative Commons:
- Убедитесь, что вы выполнили работу по атрибутированию изображений в соответствии с методом TASL, включая поиск недостающей информации, если это необходимо.
- При наличии нескольких авторов необходимо указать каждого из них.
- Заменяйте имя пользователя или дескриптор только в том случае, если полное имя создателя недоступно.
- Если есть какие-либо сомнения относительно того, как должны указываться авторы, свяжитесь с владельцем авторских прав.
- Убедитесь, что авторство полностью видно. Если невозможно определить тип лицензии и/или право собственности на изображение, значит, вы неправильно его атрибутировали.
- Для изображений под лицензией CC 4.0 включение названия не обязательно.
- Наша статья содержит полную информацию о том, как использовать изображения Creative Commons.
- На этой странице приведены примеры передовой практики для указания авторства в рамках Creative Commons.
Атрибуция модификации изображений Creative Commons
Некоторые лицензии Creative Commons позволяют вносить изменения в изображение. Прежде чем что-либо делать, убедитесь, что модификации разрешены условиями лицензии. Если вы вносите какие-либо изменения в исходное изображение, важно, чтобы эти изменения были указаны в атрибуции, как для защиты оригинальной работы, так и для того, чтобы отделить создателя от дальнейших производных работ.
Вот пример подробного описания модификаций:
«Зима в городе», автор Дэвид Дж., лицензия CC BY 2.0, ненасыщенная по сравнению с оригиналом
Атрибуция изображения Creative Commons, если владелец не может быть идентифицирован
Вы могут встретить изображения Creative Commons, которые не имеют четкой связи с их создателем или типом лицензии. Публикация изображения без указания автора немедленно нарушает условия лицензии Creative Commons (если только это не CC0). Если нет четкой ссылки на создателя или тип лицензии изображения — просто не используйте его.
Атрибуция за пределами Creative Commons
За пределами Creative Commons изображения должны указываться их создателем в соответствии с лицензионным соглашением, в соответствии с которым они были приобретены.