Атрибут title что это
Атрибуты Alt и Title для картинок. Ответы на популярные вопросы
В сегодняшней статье я хочу рассмотреть, почему всё-таки стоит заполнять 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:
Зачем нужен атрибут Title?
Title у картинок даёт дополнительную информацию об изображении. Он нужен для того, чтобы пользователю было проще понять, что изображено на картинке. Атрибут выводится при наведении курсора на изображение.
На картинке выше видно, как отображается атрибут на странице.
В HTML-коде атрибут прописывается следующим образом:
Если картинка будет ссылкой, Яндекс рекомендует указывать Title в ссылке:
Рекомендуется заполнять Title. Он может положительно отразиться на поведенческих параметрах сайта. Когда пользователю сложно понять, что изображено на картинке, он машинально может навести на неё мышкой и подсказка Title поможет ему сориентироваться.
Основные требования к Title похожи на требования к Alt:
Зная это, перейдём к вопросам.
Ответы на популярные вопросы по 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:
Почему стоит заполнять Alt:
1. учитывается поисковыми системами при ранжировании картинок, а значит, если ваша картинка попадёт в ТОП, – это источник дополнительного трафика;
2. будет полезен пользователю, у которого отключены изображения на сайте.
Почему стоит заполнять Title:
1. будет полезен пользователю, которому сложно разобраться, что изображено на картинке;
2. подсказки Title могут положительно отразиться на поведенческих показателях сайта.
Мета-теги и атрибуты title, description, Alt и h1: что это такое и как ими пользоваться
Что такое мета теги? Мета теги — это специальные теги html, находящиеся в контейнереи предназначены для передачи информации о сайте браузерам и поисковикам.
Какие мета-теги и атрибуты бывают
Мета-теги — первое на что обращает внимание поисковая система. Именно они являются ключевыми факторами ранжирования страниц сайта в результатах поисковой выдачи. Нельзя оставлять мета описания пустыми, напротив нужно очень тщательно подходить к заполнению:
К атрибутам относятся Alt и Title картинок:
Что такое title?
Тайтл — это имя страницы, отображаемое во вкладках, закладках браузера и поисковой выдаче в виде ссылки. Его содержание влияет на релевантность, ранжирование, поведенческие факторы. Он вместе с дескрипшеном выгодно представляют страницу в результатах поиска.
Рекомендации по составлению тега Title для Яндекс и Google
Чтобы пользователь перешел из поисковой выдачи именно на ваш сайт, тег title должен быть привлекательным и информативным, в противном случае, он может сделать выбор в пользу других, более проработанных сниппетов сайтов-конкурентов.
По правилам HTML – тег title должен быть уникальным для каждой страницы сайта (не должен дублироваться в разных частях кода страницы).
Для того, чтобы правильно прописать тайтл, необходимо соблюдать несколько основных правил, а также опираться на логику и опыт конкурентов.
Размер title
В идеале тег должен иметь длину не более 70 и не менее 50 зн. с пробелами +/-10 зн. (лично я не рекомендую писать заголовки длиннее 90 зн.). Слишком короткие заголовки будут малоинформативными, а излишне длинные распыляют суть текста и могут быть восприняты поисковой системой как попытка манипуляции, что может повлечь за собой санкции. Также не забываем, что чем больше слов в тайтле, тем меньше “вес” каждого из слов (значимость с точки зрения поисковой системы), поэтому нет смысла писать излишне длинные тексты.
Уникальность тайтла
Title должен быть уникальным как в пределах одной страницы, так и в пределах всего сайта (в идеале тайтл должен быть уникальным в пределах всего интернета – для этого добавляем в конец название вашей компании / бренда). В случае дублирования заголовков двух и более товаров, которые например, отличаются в описании лишь цветом, весом или размером, уникальность обычно достигается за счет добавления в конце title идентификатора товара в базе каталога (артикул), либо этих же самых параметров, которые отличаются у товаров.
Важно. В информационных сайтах статейниках и блогах уникальность тайтла достигается путем увеличение хвоста ключевого запроса.
Формирование тайтла из ключевых запросов по частотности
Например, для карточек товаров целесообразно начинать тайтл со слов “Купить…, Продажа…”. А для информационных статей более подойдут относительные местоимения: как, что, какой, зачем, почему и т.д
Формирование из ключевых запросов по геозависимым запросам
Для региональных геозависимых запросов необходимо включать в title топоним (название города). Данный фактор будет использоваться не только поисковыми системами при ранжировании, он также будет полезен посетителям для более оперативного понимания насколько релевантна страница их запрос.
Отсутствие переспама и информативность
Title не должен быть перенасыщен ключевыми словами и фразами (так называемый “переспам”). Нельзя просто взять и перечислить все ключевые фразы через запятую. В переспамленном виде текст выглядит непривлекательно как для поисковых систем, так и для обычных пользователей. Обычно бывает достаточно пары-тройки основных ключевых запросов для написания корректного и в тоже время оптимизированного под SEO title.
Ключевые слова как бы склеивают между собой, выбрасывая повторяющиеся и дополняя их конкретной информацией
При написании тайтлов не рекомендуется, но не запрещается использовать:
Цепляющий заголовок
Заголовок title нужно составлять так, чтобы он был читабельным и привлекательным для пользователя – он должен цеплять пользователя, например, своим уникальным предложением, чтобы у пользователя возникало желание нажать на заголовок и перейти на сайт из поисковой выдачи.
Важно: Не воруйте заголовки у конкурентов – всегда составляйте свои. Скопированный 1 в 1 заголовок с уже проиндексированной страницы принесет вам только вред, вплоть до санкций поисковых систем. Так что генерируйте их сами – пусть частично используя наработки конкурентов, однако итоговый текст должен быть уникальным и не должен пересекаться с уже имеющимися вариантами.
Признаки неправильного title
Если поисковая система игнорирует ваш title и использует другой текст в качестве заголовка в выдаче, это может свидетельствовать о некачественном заголовке (например, он слишком длинный, либо не соответствует содержанию страницы и в нем нет поискового запроса). В этом случае Яндекс или Google могут сами формировать тайтл из анкоров внутренних ссылок или текста целевой страницы (заголовки h1-h6, контент, анкоры).
Title и h1: название страницы и заголовок статьи – в чем разница
Метатеги Title и H1 по своей сути являются заголовками, но имеют разное предназначение. Под заголовком Title подразумевается название всей страницы. H1 обобщает только ее текстовую часть. Оба заголовка положительно влияют на конверсию конкретной страницы.
В чем отличия между Title и H1
Введя запрос в поисковую строку, вы получите список сайтов в выдаче. Первая строка в каждой позиции — и есть заголовок страницы. Тег Title отражает общую суть страницы с включением релевантных запросов и может использоваться в поисковой выдаче. Заголовок H1 виден пользователю уже после перехода на сайт.
Важно. Основная цель Title — передать поисковой системе информацию о том, чему посвящена данная страница. Используемые здесь ключевые запросы способствуют продвижению конкретной страницы и улучшению ее позиций в выдаче. Чтобы понять, в чем разница между Title и H1, достаточно изучить особенности их формирования.
5 основных правил составления Заголовка H1
Примеры отличия title и h1: фото и пояснения
Человеку станет ясно, что на странице находится, даже если он сам не вводил в поиск такой длинный запрос. Н1 уже непосредственно обобщает ту информацию, которая подана на странице в виде текстов, картинок, видео.
Отличия между Title и H1 очевидны. При составлении обоих заголовков ориентируйтесь на собранную семантику. Руководствуйтесь правилами:
Метатег Description: что это такое?
Description или мета-описание — это тег, который описывает содержимое страницы в 155-160 символах. Поисковые системы отображают страницу в результатах поиска, когда в различных её атрибутах, в том числе, description, находятся искомые ключевые слова.
В отличие от тега title описание не является фактором ранжирования — поисковики не учитывают его при определении позиции сайта в выдаче. Но, тем не менее, description оказывает значительное влияние на восприятие пользователя. Чем точнее текст в нём соответствует запросу, тем больше вероятность перехода по ссылке. Соответственно, повышается CTR и улучшаются поведенческие факторы.
Пользователь может увидеть description в сниппете — блоке, который кратко передает содержимое страницы в поисковой выдаче. Ключевые слова из запроса в description выделяются жирным.
5 правил составления Description
При составлении описания должны соблюдаться следующие правила:
Хороший эффект имеют различные цифровые значения: «100% качество, 20% скидка, 3 вещь в подарок, 20 лет гарантии и т.д.». Не менее важна экспертность: «ГОСТы, СНиПы, статистика, рейтинги, ТОП».
Google практически всегда использует описание страницы для составления сниппетов, в то же время Яндекс делает это выборочно. Однако такое поведение не говорит о бесполезности блока. При индексировании контента такая информация всё равно запоминается поисковыми роботами. При отсутствии дескрипшена страница не будет иметь должной оптимизации и может низко опуститься в ранжировании.
Какого размера должен быть Description
В классическом исполнении дескрипшен должен быть составлен из 150-200 символов. Однако если такой объём превышен – это не считается ошибкой. Поисковые системы всё равно индексируют весь блок, поэтому урезать его не имеет смысла.
Другой вопрос, что пользователь сможет увидеть в сниппете только определенное количество фраз, поэтому старайтесь всё самое важное прописывать в первых предложениях. Если текст будет оборван на самом интересном месте, то для пользователя это будет своеобразной приманкой. Сработает поведенческий фактор. Он обязательно захочет узнать продолжение и зайдет на сайт.
Социальные сети очень сильно урезают свои сниппеты, поэтому при посещении страницы также срабатывает поведенческий фактор – желание узнать больше.
Сниппет
Об этом термине мы уже упоминали в статье пару раз, настало время рассказать о том, что это такое сниппет и какова его роль в оптимизации и продвижении страниц сайта.
У некоторых сайтов в поисковой выдаче Google и «Яндекс» иногда появляется не только заголовок и описание, но и дополнительная информация. Выдача конкретного сайта вместе title и description называется «сниппетом».
Сниппет (англ. snippet — отрывок, фрагмент) — фрагмент исходного текста или кода программы, применяемый в поисковых системах, текстовых редакторах и средах разработки.
На что влияет сниппет
От того, как выглядит сниппет сайта, во многом зависит весь успех продвижения в поисковых системах. Так что многие веб-мастера мечтают о том, чтобы в выдаче сниппет как можно более выделялся. Поэтому чем больше информации в Snippet – тем вероятнее пользователь поисковой системы кликнет по ссылке в сниппете.
С помощью сниппета пользователи быстро могут оценить, содержит ли страница интересующую их информацию. Как известно, по одежке встречают. И сниппет – это как раз такая «одежка» сайта в поисковой системе. Чем полнее сниппет – тем больше поисковый трафик.
Как повлияет на то что формируется в сниппете поисковиками
Как уже упоминалось выше: сниппет создается поисковыми роботами автоматически и зависит о того или иного введенного пользователем запроса. Система генерирует его по своим неизвестным никому правилам. Но известно что, сниппет состоит из заголовка, описания, ссылки url для перехода на сайт и Favicon. Это базовые элементы сниппета.
Описание и заголовок можно настроить с помощью метатегов. Если метатеги «понравятся» поисковой системы, если они уникальны, то они появятся в выдаче.
Отличия выдачи Яндекса и Google которые стоит учесть при написании метатегов
Сниппеты «Яндекса» и «Google» различаются. В Google система чаще всего использует метатеги заголовка и описания. Особенно если они релевантны содержимому страницы. В ином случае система формирует их сама (возьмет отрывки текста из страницы и h1). «Яндекс» же добавляет к сниппету картинку Favicon и показывает чат.
Также в сниппете могут появляться дополнительные элементы, списки подразделов сайта и т. д. «Яндекс» сейчас тестирует выдачу комментариев к странице. В целом выдача постоянно совершенствуется, поэтому возможны любые изменения.
Alt и Title – атрибуты для картинок: как инструмент оптимизации контента
Для большинства вебмастеров размещение изображений на веб-сайте – процесс простой и привычный, однако существуют возможности, на которые некоторые предпочитают не обращать внимания. К примеру, атрибуты Title и Alt: что это такое, знают многие, но пользуются ими далеко не все. Тем не менее, это важные параметры, которые способны повлиять и на оптимизацию сайта, и на восприятие ресурса посетителями, особенно в случаях, когда скорость интернета не позволяет им посмотреть изображение. Этими атрибутами пользуются не только люди, но и поисковые алгоритмы, и их использование позволит улучшить позиции сайта в рейтинге «поисковиков».
Что такое Alt и Title для картинок
Атрибут Alt – это описание изображения в теге в виде текста, представляющее собой альтернативный источник информации для пользователей, у которых в браузере отключено отображение картинок на странице. Текст атрибута появляется в том месте, где должно было быть изображение, которое не удалось загрузить. Также данный атрибут считывается роботами поисковых систем в процессе индексации страницы.
Как правильно составить атрибут Alt для картинок
Прописывать Alt для картинок есть смысл для привлечения посетителей из поиска по картинкам. Но думать, что такая оптимизация поможет взобраться сайту выше в поисковой выдаче – заблуждение. Стоит больше внимания уделять вхождению ключей непосредственно в текст страницы, если у вас оптимизированный сайт, но ему не удается попасть в ТОП. Добавление нескольких ключей в контент окажет больший эффект, нежели уникальные альтернативные описания.
Как правильно составлять Title для картинок
Хотя поисковики и не сильно обращают внимание на содержимое данного тега, косвенно title может сказываться на продвижении, то есть через поведенческие факторы. Контент выглядит куда приятнее с изображениями, наведя курсор на которые отображаются подсказки. Тем более, когда пользователь не может понять, что именно изображено на картинке.
Правильно заполненные атрибуты Alt и Title к картинкам помогут в поисковой оптимизации сайта. Но не стоит забывать и про другие аспекты оптимизации картинок, такие как «вес», качество и название изображений.