Прописываем alt и title. Что такое и для чего нужны атрибуты alt и title в WordPress

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

Alt-текстом называют краткое описание любого изображения. Термин произошел от словосочетания «альтернативный текст». Он не отображается на сайте и не виден посетителям, это вид мета-данных, скрытых от посторонних глаз. Но несмотря на то, что практически никто не читает alt-тексты, они очень важны по двум причинам:

Это полезный инструмент для SEO. Поисковые системы не умеют распознавать изображения и реагируют исключительно на слова. Добавляя к картинке alt-текст, вы делаете ее «заметной» для Яндекса или Google, и в результате ваш сайт начинает подниматься в результатах поиска.

Они делают сайт доступным. Люди с нарушениями зрения пользуются специальными программами для чтения, когда выходят в интернет. Эти программы, как и поисковики, не умеют распознавать картинки. Выручают alt-тексты. Они описывают изображение, и человеку, который плохо видит, все становится понятно.

Теперь, когда мы осознали важность alt-текста, давайте разберемся, каким он должен быть и о чем нужно помнить при его добавлении.

Не будьте многословны . Добавляя alt-текст, постарайтесь уложиться максимум в 15 слов.

Пишите понятно . Когда вы добавляете alt-текст, вы описываете картинку тому, кто ее не видит. Сделайте так, чтобы воображаемый читатель понял текст правильно и смог представить изображение по его описанию.

Учитывайте контекст . Alt-текст часто зависит от содержания и тематики ресурса. Представьте снимок счастливой парочки, готовящей обед. В блоге о еде у него будет одно значение, а на сайте знакомств - совершенно другое. Вот поэтому alt-тексты должны соответствовать контексту сайта и отдельно взятой страницы.

Не спамьте . Не добавляйте ключевые слова и мета-теги в поле для alt-текста даже если очень хочется. Вместо этого придумайте хорошее описание и аккуратно включите в него пару подходящих для продвижения слов.

Не уходите от сути . У вас не так много места, поэтому сделайте акцент на самом главном. Это могут быть люди, предметы, места, цвета, автор снимка или атмосфера. В общем, не разбрасывайтесь и отмечайте то, на что нужно обратить внимание.

В добавить alt-текст очень просто. Вот инструкция.

Для Wix-сайта:

Щелкните мышкой по изображению.

Нажмите на иконку «Настройки».

Добавьте alt-текст в поле «Тексты фото» - «Опишите картинку поисковикам».

Для блога на Wix:

Откройте новый или уже написанный пост в редакторе блога.

Привет, народ. Дабы не тратить ваше время, давайте коротко и по делу.

Title картинки – это надпись, которая всплывает при наведении курсора на изображение. Это нужно, чтобы дать подсказку посетителю. Рассказать, что изображено на картинке или куда обратить внимание.

Alt картинки – от английского слова alternative. Это такая полезная вещь, которую очень любят индексировать поисковики, дабы определить, что изображено. Также, он будет виден, если пользователь отключит в браузере отображение картинок. Что не имеет смысла и совершается в редких случаях.

Если все же пользователь выключит отображения графического контента или произойдет какой-то сбой на чьей-то стороне, то вместо картинки будет виднеться маленькая иконка с текстом. Этот текст и есть alt изображения.

Alt и title картинки для SEO

Для тайтл картинки имеет минимальное значение. Он индексируется не охотно, но вот может сыграть вам на руку в поведенческих факторах. На дворе 2018 год, seo сейчас — это юзабилити и качественный контент. Поэтому привлекайте внимания пользователя любым способом.

Даже сами подумайте, приятней же когда появляется всплывающая подсказка у изображения.

А вот alt картинки — это клад. Во-первых, его отсутствие GoogleBot считает ошибкой, Яндекс относится лояльней. Во-вторых, он охотно индексируется, а такое изображение попадает в раздел «Картинки» в поиске. Это значит, что таким способом вы сможете привлекать дополнительный трафик на свой сайт.

В-третьих, так как он индексируется, то есть возможность с его помощью увеличивать значение страницы. Будет хорошо, если вы пропишете в alt лишний низкочастотный запрос. Но тут нужно быть внимательным.

Как правильно заполнять alt и title для картинок

C title все намного проще. Для поисковика правил нет, но это не значит, что вы пишите тут любую ересь. Выше мы делали подводку к поведенческим факторам. Желательно вам не надоедать пользователю, быть ему полезным.

1) Он не должен быть длинным. Согласитесь, подсказка в 4 строки будет вызывать отторжение.

2) Должен как-то относиться к изображению.

3) Не должен дублироваться с основным title, заголовками h1-h5, с атрибутами alt.

Alt картинки имеет вес у поисковика, поэтому здесь есть ограничения с правилами, но так и возможности.

1) Одного слова не достаточно, желательно держаться в рамках от 3 слов. Максимальное число символов 250.

2) Он должен соответствовать содержимому изображения.

4) Желательно, не должен повторяться с другими alt на странице.

Так что, добавляя очередную картинку в блог, подумайте. Может какой-то человек захочет её найти? Попробуйте превратить его в лишний трафик.

Где заполнять alt и title картинок на примере wordpress

Например, в вордпресе вам достаточно зайти из панели управления (консоль) в раздел «Медиафайлы» — «Библиотека» . Далее выбираете любое изображение.

Или, редактируя статью, просто жмёте на любую вставленную картинку, после на карандашик.

Конечно, на примере wordpress показать легче всего, но многие популярные CMS дают такую возможность. Вот, к примеру – Joomla. Там есть свои подводные камни, но у большинства графического контента можно прописать alt если нажать «Редактировать изображение»

На этом все. Очень надеемся, что мы вам были полезны. Если да, поставьте лайк. Это нас мотивирует делать больше качественного и интересного контента!

С уважением, Ваша Суть.

Каждая веб-страница создается при помощи разметки - кода, который пишется на специально предусмотренном языке (чаще всего это HTML). Браузер пользователя, в свою очередь, умеет этот код читать, чтобы должным образом отображать всю ту информацию, которую до нас хотели донести создатели ресурса. Получается, что все элементы из тех, что мы видим на веб-странице, предусмотрены исходным кодом сайта, который мы посещаем.

Оптимизация кода

Как вы можете догадаться, каждая буква этого кода, каждый символ имеют значение. Еще, что интересно, бывает так, что визуально сайт может не содержать тех элементов, которые крайне важны для его оптимизации (имеется в виду правильная настройка ресурса под поисковые системы). К числу таких малозаметных можно отнести, например, атрибут ALT. Он есть на страницах многих ресурсов, и очень часто мы попросту не замечаем его.

В этой статье мы хотели бы уделить внимание как раз этому элементу веб-дизайна. Здесь мы расскажем, чем он так важен для правильного ранжирования сайта, роста его посещаемости и удобства пользователя в работе с ним.

ALT?

Начнем с самого начала: опишем, о чем в этой статье идет речь и зачем нам вообще нужен этот атрибут.

Итак, для понимания данного текста в первую очередь необходимо разбираться в языке разметки HTML. Это - код, на котором пишутся базовые веб-страницы, который, как уже было отмечено, имеет свойство отображаться в браузере. Весь язык состоит из специальных атрибутов (например, IMG, ALT, FONT и так далее). Каждый из них отвечает за работу с тем или иным элементом дизайна. На практике применяется упомянутый выше атрибут ALT для картинок, которые можно встретить на страницах сайтов. Если говорить конкретнее, то с его помощью создается описание к картинкам, по которым пользователь (посетитель сайта) может легко и просто разобраться в том, что же на них показано. Наверняка вы и сами сталкивались с такими описаниями - они возникают при наведении мышки на картинку.

Практическое значение

Разумеется, эти атрибуты применяются на практике не просто так. Вебмастерам нужны описания их изображений не меньше, чем самим посетителям сайта (а скорее всего, даже больше). Ведь если у всех изображений отсутствует атрибут ALT, человек может этого даже и если к картинкам на странице будут прибавлены пояснительные тексты. С другой стороны, поисковые роботы (при пустом ALT) могут недостаточно высоко оценить сайт, снизить его позицию в выдаче и, таким образом, не принесут достаточного количества посетителей. Поэтому мы можем с уверенностью сказать, что описания к картинкам на сайте также играют важную роль и для самих вебмастеров, поэтому нельзя ими пренебрегать.

Бонусы от поисковиков

Чтобы понять лучше, чем выгодны правильно заполненные теги описаний к картинкам, приведем небольшой пример. Скажем, есть сайт с размещенными на нем изображениями. Если не прописать атрибут ALT, пользователь не пострадает, поскольку он в любом случае увидит, что изображено на том или ином фото. Совершенно другой исход ждет владельца ресурса, который будет пренебрегать указанным выше тегом, из-за чего потеряет какую-то долю трафика из каталогов картинок, например.

Как прописать атрибут ALT?

Технически нет ничего сложного в том, чтобы заполнить под той или иной картинкой очевидно: нужно зайти в HTML-редактор на своем сайте и найти код изображения (начинается с IMG и заканчивается им же). Внутри этого блока кода есть код. Именно его и имеют в виду, когда говорят, что нужно прописать атрибут ALT. Делается это так: “alt = “описание”.

Если вы работаете не с чистым кодом, а используете какой-то отдельный “движок” для сайта (например, Wordpress или Joomla), - в нем интегрирован особый механизм добавления “альтов”, через которые наш сайт и запомнится поисковикам. Если вы заполняете новый ALT, обновление оказывается на вашей странице.

Что пишут в атрибуте?

Разумеется, когда у вас возникает задача прописать атрибут ALT, вы думаете не о технической стороне. Чаще всего этот вопрос задается в том случае, если вебмастер не знает, какую информацию ему нужно указывать о том или ином изображении. Из-за этого сложно сказать, какие сведения пойдут сайту на пользу с точки зрения поисковых механизмов.

На практике есть множество подходов к решению проблемы описания. Кто-то работает с типичными шаблонами, согласно которым тег просто заполняется ключевыми словами, под которые создается страница. Пожалуй, это наиболее распространенная практика, которую можно встретить часто. Иногда вместо того, чтобы искать, как прописать атрибут ALT, пользователь попросту оставляет это место пустым. Тут следует уточнить, что каждый самостоятельно принимает решения относительно того, какое описание указывать.

Требования

Вместе с тем можно выделить несколько основных правил (или, если хотите, требований), по которым каждый может сложить идеальный атрибут для своих картинок. Они состоят из небольшого количества пунктов, каждый из которых относится к описаниям фото и картинок на сайте.

Например, первое такое требование - это длина всего текста. Если вы ищете, как правильно прописать атрибут ALT, решение элементарно: используйте не больше 2-3 слов. Текст такого размера будет, во-первых, идеально считываться поисковым роботом (и делать ваш сайт более релавантным); во-вторых, такое описание более понятно самим пользователям. Согласитесь, читать целое предложение, если вы хотите просто знать, что показано на картинке, никто не будет. Достаточно кратко и точно изложить описание, что будет полезно как вам, так и клиентам.

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

Еще один важный момент (который был установлен в ходе многочисленных практичных испытаний) - Если ищете, как прописать атрибут ALT к картинке, помните: его нужно подбирать уникальным для каждой из перечисленных фотографий на сайте. Например, публиковать три картинки подряд с подписью “мой слон” будет неправильно - это только навредит вашему ресурсу в поисковой выдаче. Лучше назвать изображения “слон 1” и “слон 2”, что сделает их более уникальными.

Наконец, помните о параметрах самих изображений, к которым вы ищете, как добавить атрибут ALT. Для картинок важно соответствовать ряду критериев - иметь не слишком маленькие размеры, выглядеть реалистично. То есть если вы указываете описание, то делайте это для более серьезных изображений, которые учитываются более весомо. Не уточняйте атрибут ALT для каких-нибудь маленьких смайлов или еще чего-то подобного.

Поиск ALT

Наконец, мы поговорили об основах атрибута, о некоторых правилах его составления и требованиях обеих сторон (как пользователей, так и к ним. Теперь подумаем: так как же искать ключевые слова и фразы, которые мы будем прописывать на своем сайте? Как уже отмечалось выше, поиск нужно направлять в сторону готовых баз ключевых слов, которыми реально начать привлечение клиентов на ваш сайт. Разумеется, этого не добиться, если у вас все же отсутствует атрибут ALT. Берите в готовом виде ключевые слова и фразы, которые применяете в контенте, и вставляйте в картинки.

Если таких сведений у вас нет и вы совсем не думали над тем, чтобы начать понемногу раскручивать свой ресурс, предлагаем начать искать базы таких “ключевиков”, с которыми вы сможете легко создавать новые сайты. Для этого отлично подойдут сервисы вроде Google Keyword Extract Tool или Yandex.Wordstat, где показана статистика поиска по тем или иным фразам. “Играя” с этими настройками, можно существенно расширить долю поискового трафика на своих сайтах и тем самым начать извлекать новую выгоду. Главное, чтобы не возникло ситуации, в которой у всех видимых изображений отсутствует атрибут ALT.

Выводы

Итак, что можем сказать об описанном в этой статье атрибуте? Он является частью языка, на котором создаются простейшие сайты - HTML. Делать это очень просто, поскольку описывается элементарный, базовый язык. Для того чтобы все-таки прописать тег в картинках, необходимо самостоятельно оформить его через исходный код. Или же, воспользовавшись новой инструкцией, начать оформлять заново. Как бы там ни было, а указание тегов ALT - это тот идеальный случай взаимной выгоды, когда остаются довольными и посетитель, и владелец ресурса.

Указание тега может привести и новых посетителей - особенно часто такое явление наблюдается на таких сервисах, как Google и Yandex Images. При клике на картинку сайт самостоятельно определяет источник, с которого было взято изображение, и перенаправляет посетителя. А это, как вы понимаете, очень важно уметь делать в будущем.

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

Стоит отметить: удобен, потому что не нужно индивидуально договариваться с рекламодателями о размещении баннера, т.е. Вы в этом практически никакого участия не принимаете. Основная работа ложится на рекламодателя: он выбирает размер, баннер, ссылку с него и размещает на определенный срок (например на месяц) и за назначенную Вами цену (чем популярнее Ваш блог, тем больше цена), а Вы только получаете деньги за купленное рекламодателем баннер-место автоматически. Нужно только установить на блоге код для отображения объявления «купить рекламу» с логотипом :

1. Баннер будет висеть у Вас на блоге до тех пор, пока не кончится срок размещения баннера.
2. Нет ротации, т.е. возможности показывать другие баннеры в ротации с баннером рекламодателя.

При использовании плагина AdRotate таких проблем не будет! Но договариваться с рекламодателями, размещать баннеры и назначать сроки показа Вы будете сами.

Теперь перейдем к настройке плагина AdRotate.

Скачиваем и устанавливаем на наш WordPress-блог AdRotate и переходим к созданию рекламной ротации баннеров.

Плагин предназначен для вставки ротации нескольких рекламных баннеров. Каждая группа должна иметь баннеры одинаковых размеров, например в группе 1 будет ротация баннеров 468х60, а в группе 2 — 125х125.

После добавления нескольких баннеров в одну группу AdRotate начинает показывать их на сайте переменно: сначала будет показываться один баннер, а при переходе на другую страницу, или обновлении текщей страницы в браузере – уже другой и т. д., в зависимости от количества добавленных Вами баннеров в одну группу.

Как добавить баннер?

Ищите в админпанели AdRotate, заходите в пункт Manage Ads и кликаете на Add New , чтобы добавить в ротатор новый баннер.

В поле Title вводите название для себя, чтобы сориентироваться потом, если понадобится удалить, или отредактировать баннер.

В поле AdCode следует указать код вашего баннера, к примеру:

И не забудьте поставить галочку в поле Clicktracking и прописать url вашей спрятанной ссылки.

Для каждого баннера можно установить приоритет показа (Weight ), т.е. насколько больше(меньше) остальных будет показываться данный баннер. Приоритет от 2 до 10.

В пунктах Display From … Until можно указать период показа данного баннера. После этого в пункте Activate выбирайте Yes, this ad will be used , чтобы включить баннер. Это удобно, если на Вашем сайте кто-то купил рекламное место, допустим, на месяц.

Теперь нужно перейти в Manage Groups , чтобы создать группу ротации ваших баннеров. Здесь указываем имя для группы баннеров, и затем выберите галочкой баннеры, которые будут входить в данную группу.
Жмем на Save .

Чтобы добавить ротацию в пост, или на страницу, можно использовать шорткод.

На сегодняшний день изображениям среди всего веб-контента отводится довольно большое место. Однако не все пользователи оптимизируют их для лучшего ранжирования всего сайта в целом. WordPress, среди своих прочих возможностей, предоставляет удобные инструменты для добавления альтернативного текста и заголовка изображения в соответствующие теги. В этом материале рассмотрим разницу между атрибутами alt /title и сферы их применения.

Зачем нужен атрибут alt в картинках?

Альтернативный текст или alt является HTML -атрибутом, добавленным к тегу вставки изображения . Этот текст будет показан в том случае, если изображение по той или иной причине не будет загружено и отображено на странице. Такой ход дает информацию поисковым роботам о том, что именно изображено на фото. Обычно в теге alt пишут короткое описание изображения. Кроме того, атрибут служит также и для улучшения доступности сайта для людей с ограниченным зрением или для тех, кто использует устройства для чтения с экрана. Программа-читалка будет озвучивать текстовую часть страницы, а когда дойдет до изображения, то прочитает и текст, находящийся в alt . Благодаря этому, пользователи всегда будут знать, что нарисовано на картинке, даже если они ее не видят.

Как и где заполнять alt в WordPress?

WordPress предоставляет довольно удобные инструменты для заполнения атрибута alt . Так, его можно указать уже при загрузке изображения. Для этого следует открыть запись или страницу, вставить курсор в место вставки изображения и нажать кнопку Добавить медиафайл .

После того, как будет нажата кнопка, откроется окно Медиабиблиотеки WordPress, где нужно будет указать локальное месторасположение файла-картинки. В итоге Вы увидите боковую панель с параметрами загруженного файла.

Как видно, на панели присутствует поле Атрибут alt . По умолчанию, оно является пустым. Задавать текст в атрибуте необходимо длиною из 2-3 слов, причем они должны точно описывать что на фото. Чтобы вставить изображение на сайт, следует нажать кнопку Вставить в запись .

Зачем нужен атрибут title в картинках?

Title — еще один атрибут HTML -тега вставки изображения . Он используется для заголовка картинки и обычно указывает на ее название. Отметим также, что текст внутри title не будет показан пользователю, если изображение не отображается на странице.

Как и где заполнять title в WordPress?

Атрибут заполняется уже после загрузки изображения на сайт. Для этого в Медиабиблиотеке WordPress следует выделить изображение, после чего появится знакомая боковая панель.

Title или заголовок нужно задавать осмысленно в зависимости от информации, представленной на изображении. В то же время текст должен отличаться от атрибута alt . Заголовок можно писать на русском языке или же использовать транслитерацию. Довольно часто владельцы сайтов используют его для SEO -оптимизации, указывая там ключевые слова. Также атрибут можно задать, находясь на странице редактирования записи или страницы. Для этого необходимо щелкнуть по картинке, и на появившейся дополнительной панели инструментов нажать кнопку редактирования с изображением карандаша. Вообще для оптимизации сайта рекомендуется для изображений использовать оба атрибута. Атрибут alt имеет одно преимущество — он помогает поисковым системам находить изображения на Вашем сайте и отображать их в результатах поиска по картинкам. При этом сайт получает дополнительный трафик из поисковиков. Еще одно преимущество обоих атрибутов — улучшение доступности сайта для людей с особыми потребностями.