Атрибут alt тега img

Содержание

Оптимизация изображений: что писать в Alt и Title

Насчет того, как правильно заполнять Title и Alt описание изображения, на вебмастерских форумах и блогах оптимизаторов до сих пор можно встретить немало противоречивых мнений и советов. И это не удивляет, так как меняются требования поисковых систем к контенту, появляются новые поисковые алгоритмы и фильтры, а оптимизаторам приходится подстраиваться под них, экспериментировать и разбираться в том, какие действия способны принести пользу сайта, а какие – навредить.


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

Опасность подобного подхода в следующем. Когда изображений на странице много, а в атрибутах тега <img> у них прописан главный ключевой запрос для продвижения, это может привести к переоптимизации страницы. То, что не видят на странице живые посетители, «видят» поисковые роботы. Каждая строка кода подвергается их тщательному анализу и классификации.

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

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

Объем текста для Alt должен составлять 3-10 слов, для Title допустимо более развернутое описание, но увлекаться здесь тоже не нужно – всплывающая подсказка из нескольких строк не всегда бывает уместна и может лишь испортить впечатление.

В рекомендациях для вебмастеров Яндекса атрибуту Alt посвящен раздел «Использование графики». Советы основной поисковой системы рунета таковы:

всегда заполнять атрибут Alt описания картинки; текст, представленный на картинке, необходимо дублировать в ее описании – особенно важно это при использовании в навигации сайта графических элементов меню; использовать в именах файлов изображений осмысленные названия, например, atribut-alt-dlya-kartinki.jpg вместо alt001.jpg; для улучшения позиций в поиске по картинкам располагать изображение в непосредственной близости от текста, который оно иллюстрирует.

Особенности alt и title у картинок

Рассмотрим особенности использования атрибутов alt и title у картинок.

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

2. Атрибуты alt и title не обязательно должны содержать разный текст. Может казаться, что текст атрибутов обязательно должен быть разным, но это не так. Так, например, если вы посмотрите картинки из ТОПа, то в одних текст одинаковый, а в других разный.

3. Используйте ключи в атрибутах. Если использовать ключи в текстах изображений, то это может увеличить трафик из поиска картинок. Однако, не стоит набивать описания ключами или же писать «милые котики» для фоток с цветами. Первое поисковики могут воспринять как переспам, а второе попросту бессмысленно, так как открывать подобные картинки люди не станут, а значит они будут крайне низко ранжироваться.

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

5. Для фоновых картинок лучше не указывать атрибут alt. Основная суть в том, что это лишний текст, который будет в каждой странице сайта. Поэтому, если существует необходимость задавать текст, то лучше ограничиться только атрибутом title.

6. Описания картинок могут совпадать. Если у вас в обзоре встречается несколько картинок, то совершенно не обязательно для каждой из них придумывать уникальное описание. Вполне можно ограничиться одним, максимум добавив цифры или нечто подобное (картинка 1, картинка 2 и т.д.). Поисковики прекрасно понимают, что изображения могут относиться к одним и тем же ключевым словам. Например, скриншоты какого-либо товара с разных ракурсов или же с разными цветами. Хотя во втором случае можно (и лучше) добавлять цвета к названию.

7. Старайтесь размещать картинки так, чтобы окружающий текст соответствовал атрибуту alt. Пример для понимания. Допустим, вы читаете обзор про котят и в середине текста встречаете картинку с описанием «космолет». Если же это фантастика о котятах в космосе, то подобное может быть корректным, но если это умилительная история, то картинка вызовет некое недоумение. Аналогично, воспринимают и поисковики.

  • Аудит сайта: что это такое и зачем нужно?
  • Мета теги: Title, Description, Keywords

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

Очень и очень трепетно.

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

Google также учитывает тег. Кроме того, чтобы картинка оказалась на первых позициях, поисковые роботы учитывают такие показатели:

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

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

Как правильно прописать тег alt для изображений: основные правила и рекомендации

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

1. Краткое описание изображения

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

2. Оптимальная длина

Идеальный вариант – три-четыре слова. Больше – нет смысла. Потому что именно их учитывают поисковые роботы при анализе сайта.

3. Наличие ключевых слов

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

4. Уникальность для каждой отдельной картинки

Каждый тег альт должен быть уникальным, отличающимся от других. Думаете, это не всегда возможно сделать? Ошибаетесь! Сейчас попробую вас переубедить.

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

  • фотоаппарат NIKON D5600 AF-P 18-55;
  • камера NIKON D5600 AF-P 18-55 вид спереди;
  • фотокамера NIKON D5600 AF-P 18-55 черного цвета;
  • NIKON D5600 AF-P 18-55 вид сверху.

Как видите, все условия соблюдены! Все очень просто. Если речь идет об одинаковых женских платьях, то здесь обязательно в описание картинки каждой модели следует вставлять название цвета.

5. Подпись под картинкой

Также важно делать правильные подписи под картинкой. Особенно, если на сайте много изображений и фотографий, но мало текста

Тогда наличие дополнительной подписи будет невероятно важно.

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

  • гармонично вписать ключевые слова;
  • указать факт про предмет, который показан на картинке.

Допустим, что на изображении – наушники фирмы «Кактус» (название выдумано). Тогда хороший вариант подписи к картинке – «Наушники «Кактус» хорошо звучат и помогают прочувствовать каждую ноту» или «Звук в наушниках «Кактус» стал намного приятнее благодаря современной технологии «Молния»». (Название технологии, как вы могли догадаться, тоже выдумано).

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

Много похожих товаров

Представим, что у вас на сайте несколько разных юбок.

Как поступить с описаниями изображений в этом случае? Как и в предыдущем пункте, здесь можно использовать один и тот же ALT, например, “Юбка джинсовая детская”, так как тут сложно описать картинку подробней. Google и Яндекс уже будут показывать разные фото с одного сайта с учетом их уникальности и общего числа хороших фоток в сети на эту тему (конкуренции)

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

автоматическое добавление тега title к картинке в статье

…в системе WordPress (по крайней мере — в последних версиях) автоматическое добавление (или заполнение поля) тега не предусмотрено.

При добавлении картинки в статью (не миниатюры), в текстовом редакторе нужно вручную прописывать атрибут (тег) Тайтл (Title)  — это очень важно в плане индексации и продвижения сайта!


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

…а вот для тега тайтл-картинки будет весьма полезно прописать в заголовке ключевые слова (подсказки роботу поисковика).

Вероятно, обращали внимание у «старых блогеров»), что, к примеру, Alt фотки несколько отличается от имени — её (или его)) Title. Очень многие этой разностью успешно пользуются, заместо автопрописки типичных имён, — ибо частенько мы именуем картинки в папке ноутбука мало осмысленно, а иногда и под нумерацией — этакие медиа не стоит загонять на сервер — очень неправильно это!! ))

Очень многие этой разностью успешно пользуются, заместо автопрописки типичных имён, — ибо частенько мы именуем картинки в папке ноутбука мало осмысленно, а иногда и под нумерацией — этакие медиа не стоит загонять на сервер — очень неправильно это!! ))

Ну, ладно, хорош брюзжать…

Вот код: пропишите его в своём файле функций (functions.php) активной темы…

и напоследок:

Code Example

The text

The attribute will accept any text string, but there are certain best practices that will help.

  • No special characters. This includes UTF-8 characters such as unencoded curly quotes, as well as HTML Character Entities.
  • No HTML.
  • No more than 125 characters.
  • Just identify the picture. No need to refer to it (“This is a picture of…”).

The description — Users

The attribute provides an “alternative description” for the image. This description is normally not presented to the user, but will be under certain circumstances:

  • Assistive technology — If the user is visually impaired, and is using a screen reader, the screen reader will read the description to the user.
  • Images turned off — Some users prefer to surf the web with images turned off (to save bandwidth or to minimize distraction). These users will normally see the description instead of the image.
  • Image failure — If an image fails to load for any reason (bad file name, connection problems), the user will usually see the description in place of the image.

Here’s an example of displaying the text in place of a failed image (the image points to nothing).

The description — Search Engines

Values of the Attribute

All Attributes of Element

Attribute name Values Notes
height Identifies the intrinsic height of an image file, in CSS pixels.
srcset list of sources Defines multiple sizes of the same image, allowing the browser to select the appropriate image source.
align right left Was previously used to specify the alignment and placement of an image relative to the surrounding text. It has been deprecated and should not be used.
alt text Defines alternate text, which may be presented in place of the image.
border pixels Previously used to define a border on an image element. It has been deprecated and should no longer be used.
controls Toggled media player controls when used in conjunction with the <code>dynsrc</code> attribute. Both attributes are now deprecated.
dynsrc
hspace Previously used to add horizontal space on both side of an image. It is now deprecated.
ismap Identifies an image as a server-side image map. When the containing anchor link is clicked, the coordinates of the mouse will be included in the request.
longdesc Defines a URL at which can be found more information about the image. It was written out of the HTML5 specification, but its status is not quite so clear as other deprecated features.
loop Previously used to specify the number of times a video should play, when used in conjunction with the dynsource attribute. Both attributes have been deprecated.
lowsrc Specified a smaller or lower-quality version of an image.
name Identified the image or provided additional information about it. Deprecated in HTML 4.0 in favor of other attributes.
naturalsizeflag This attribute does nothing. It was once used by a proprietary software system.
nosave Was intended to prevent users from downloading an image. Was never a part of the HTML specification, and not widely implemented.
start fileopen mouseover
suppress Used by the now-defunct Netscape browser to suppress the display of image prior to image download completion.
usemap Specifies a client-side image map to be used with the image.
width Indicates the intrinsic width of the image, in CSS pixels.
src Specifies the URL of an image to be displayed.

Adam Wood

Что говорят поисковики про обязательность Аlt

Поисковики, что Яндекс что Гугл, придают тегу Alt довольно высокое значение. Поисковики легко смогут сравнить картинку с другими, и узнать, насколько она уникально.

Но при этом, они не смогут самостоятельно определить, о чем эта картинка. И это помогает не только в поиске самой картинки, но и делает статью более понятной для поисковика.

Вот что Яндекс говорит по этому поводу:

Ну а вот что говорит гугл:

При этом, следует отметить, что поисковики могут «догадаться» о чем картинка по сопутствующему тексту. То есть, если вы пишите в статье про яблоки, то при отсутствии атрибута alt, поисковики сделают вывод, что на картинке тоже изображены яблоки.

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

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

Функционал большинства распространенных CMS, используемых для создания сайтов, предоставляет не только возможность визуального редактирования контента, но и доступ непосредственно к коду страницы. Ориентируясь на представленный выше синтаксис тега <img>, прописать каждый из атрибутов легко вручную.

В WordPress задать атрибуты можно в процессе добавления на сайт изображения, заполнив предлагаемые системой поля «Заголовок» и «Атрибут Аlt».

Для уже загруженных картинок редактирование атрибута Alt доступно по щелчку кнопки мыши по изображению (иконка «Изменить» с изображением карандаша). В этом же окне («Параметры изображения») можно обнаружить и доступную для изменения строку Title, для этого необходимо развернуть пункт меню «Дополнительные настройки».

Как видим, ничего сложного в этом процессе нет. Понятно, что заполнение описаний при загрузке картинок может восприниматься начинающим вебмастером задачей рутинной и малоинтересной, но пренебрегать ей не следует.

Атрибут Title для изображений

Также у картинки имеется атрибут title, которые может не совпадать с альтернативным тестом. Среди примеров можно выделить:

  • Фото знаменитостей. Здесь, как правило, атрибуты alt и title идентичны, например, Наполеон Бонапарт в 1812 г;
  • Графики и диаграммы. В подписи рекомендуется указывать обозначение цветов и расшифровки данных, когда в альте лучше всего описать смысл графика, как пример, «режимы работы компании Google».
  • Особую трудность вызывают фразы не имеющие нормальной картинки, например, «какой вес у слона». В данном случае лучше всего прописать сам ключ и поставить тематическую картинку, чем и пользуются многие информационные сайты;
  • В изображениях товаров рекомендуется указывать полное наименование товара, что позволит найти его не только в обычном поиске, но и по картинкам;
  • В случае с услугами, также используется ключ для продвижения в поиске, а на место картинки ставиться тематическое изображение.

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

Само по себе использование атрибута Alt в html представляет собой <img src=’images/home.png’ alt=’Альтернативный текст’>. Среди особенностей следует выделить то, что прописывается он для всех форматов изображения, например, png, jpg или gif.

Использование этого атрибута рекомендовано поисковыми системами, такими, как Google и Яндекс, а прочитать о них можно на страницах: https://support.google.com/webmasters/answer/114016?hl=ru и https://yandex.ru/support/webmaster/recommendations/using-graphics.html.

Жду от вас комментариев!

Используйте тег STRONG

Многие не знают разницы между тегами strong и b. А она на самом деле есть. «Стронг» это тег логического форматирования, а «b» тег физического форматирования страницы. Визуально они оба выделяют текст жирным

Но первый показывает ПС, что выделенная часть документа является более важной, а второй просто делает жирный шрифт. Так же и W3C рекомендует использовать именно strong

Следует сделать 1-2 выделения ключевого запроса этим тегом

Это даст сигнал поисковику, что данное словосочетание ВАЖНО в рамках данной страницы. Основные ошибки, которые встречаются на сайтах — это чрезмерное использование данных тегов на странице

Не стоит выделять все подряд, делать по 10 выделений ключа или вообще выделять весь текст.

Что такое alt и title для изображений?

Атрибут «alt»!

Его предназначение для отображения фрагмента текста картинки. Чаще всего, это описание изображения.Вашим пользователям он не заметен. Подобные теги очень важны для поискового продвижения. Для людей они практически ничего не значат.

Давайте на пальцах объясню

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

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

ТОП — это высокая посещаемость. А, как её нарастить я писал в статье про

Атрибут title!

«title» — это заголовок. Наверное, каждый об этом знает. В картинке — это название, которое доступно каждому, допустим, когда мы наводим курсор мыши на изображение появляется короткий текст, который и является title. С этим все ясно. Указать название можно у себя на ПК или ноутбуке, а потом вы закидываете картинку в сам пост и опять же прописываете заголовок и описание (alt).

Что касается того, что-куда писать, то с этим не волнуйтесь.


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

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

Вот еще на счет «title». Они не должны быть длиннее 5 слов. А также желательно, чтобы вы их прописывали на латинском языке, то есть английском

И самое важное формат изображения должен быть jpg. Это снижает вес, а значит и загрузка будет быстрее, что оказывает немалое влияние на трафик сайта

Снизить массу картинки можно в фотошопе. Открываем его. Кликаем файл и далее Сохранить для WEB. Там, где написана цифра 50, 60 или какая-нибудь другая вы её можете регулировать, чем меньше, тем вес ниже. Если у вас еще нет фотошопа, тогда вперед овладевайте им. Ведь это неотъемлемый элемент любого вебмастера.

Если кто-то сомневается в том, что оптимизация картинок оказывает большое влияние на продвижение блога, то могу сказать одно — не сомневайтесь. Попробуйте проверить, проведите эксперимент. Главное не закрывать на это глаза, ведь лишние 5 минут потратить не жалко. Тем более если вы перед этим написали статью и вложили туда частичку себя. Думаю, не будет лишним, как можно лучше оформить её, а вы как думаете?

Как подписывать изображения

Какие общие принципы подписей изображений можно выделить из приведенного выше примера?

— Краткое и правдивое описание изображения.

Если описание фото не будет совпадать с его содержимым, то это изображение просто не получит кликов из поиска. Отсюда, автоматически созданные подписи в ALT необходимо перепроверить.

— Длина не менее 3-4 слов и не более 250 символов.

Меньше чем 3 словами сложно описать товар, вставив все необходимые ключевые слова. А на счет верхней границы, судя по данным экспериментов, сейчас поисковики не берут из альта больше чем 250-255 символов.

— Наличие важных ключевых слов.

Аналогично заголовкам H1 и TITLE, атрибут ALT должен содержать важные для продвижения этого изображения (не целевой страницы) ключевые фразы.

— Отсутствие спама.

Переоптимизированные и заспамленные альты могут стать причиной наложения санкций, как от Яндекса, так и от Google. Поэтому, не надо вставлять в ALT все нужные вам ключевые слова, ограничивайтесь самыми необходимыми и наиболее точно описывающими изображение. Также не нужно добавлять в альты слова “купить”, “отзывы” или “цена” (если это конечно не скриншот отзывов или прайса), но можно использовать слово “фото”.

— Пустые альты для декоративных изображений.

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

Тут больше нечего добавить, разве что уделить внимание нескольким моментам

Как использовать теги в SEO продвижении?

Чтобы привлечь потенциальных клиентов по продвигаемым запросам, необходимо составлять описания с использованием ключевых фраз для тегов alt и title. Текст, используемый для тега alt, может иметь такой формат: «прилагательное + ключевая фраза». Для атрибута title рекомендуется создать сложное предложение «прилагательное + ключ + дополнение».

К примеру, давайте рассмотрим ключевую фразу «Лондонская недвижимость». Для такого ключа вы можете прописать alt «Роскошная лондонская недвижимость», а также title «роскошная недвижимость в Сити, Саттоне и Бексли». Оптимизированное описание изображения должно содержать такие слова, как «фотография», «изображение».

Что делать, если у вас на сайте уже много страниц и картинок? Вероятно, на каких то из них альт теги прописаны, на каких то нет. Здесь алгоритм простой. Берите свои страницы (начиная с самой ценной) и проверяйте каждую в Sitechecker. Во вкладке “Картинки” наш сервис выводит alt и title всех картинок на странице. Так вы можете оценить, где они пропущены, или указаны неправильно. Заполните их правильно (лучше всего использовать данные о поисковых запросах с Search Console и данные с собранного ранее семантического ядра). Далее спустя время проверьте как изменилось количество показов данного URL-адреса в поисковой выдаче. Пару таких экспериментов помогут понять, насколько правильно заполненные альты влияют на продвижение именно вашего сайта.

Nataliya Fialkovskaya

SEO specialist

Nataliya is SEO expert at Sitechecker. She is responsible for blog. Can’t live without creating valuable content about SEO and Digital Marketing.

Как правильно заполнять title и alt изображений?

Сначала скажу пару слов об этих атрибутах. Зачем они нужны?

Теперь рассмотрим, как же нужно заполнять их.

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

Сначала разберем, что это за атрибуты.

  • Title — во всех случаях это тег заголовка чего-либо (заголовка записи, изображений и так далее);
  • Alt — атрибут тега img itemprop=»image», который описывает изображение. Еще называется «альтернативный текст».

Атрибут alt является очень важным для изображений. Его нужно заполнять в 100% порядке

На заполнив же Title, ничего плохо не произойдет, но для лучшего эффекта также необходимо на него обращать внимание.

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

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

<img  class="alignleft size-full wp-image-865" src="https://kostyakhmelev.ru/wp-content/uploads/2014/11/forma-podpiski-na-obnovlenija.jpg" 
title="форма подписки на обновления" alt="форма подписки на обновления" width="240" height="240">

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

Сейчас уже нельзя вписывать в данные атрибуты большое количество ключевых слов, а там более в каждое изображение статьи. Представьте, что у вас на странице 40 изображений. Если вы пропишите в title и alt всех изображений ключевые сова, то вероятно, что попадете под санкции поисковых систем и высоких позиций в выдаче не видать.

Единственное правило, которого я придерживаюсь и рекомендую использовать его и вам — прописывать в данных атрибутах очень краткое описание того, что изображено на картинке.

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

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

Другие важные моменты

Имеется еще 3 вещи, которые я не рассмотрел выше:

  • название файла изображения;
  • уменьшение веса изображений;
  • уникальность картинок для сайта.

Про название файла мало кто пишет в интернете. Но тут также имеются свои нюансы. Как нужно называть сам файл, перед загрузкой его на сайт?

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

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


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

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

Код изображения имеет вид.

<img  class="aligncenter size-full wp-image-866" src="https://kostyakhmelev.ru/wp-content/uploads/2014/11/forma-podpiski-v-sajdabre.jpg" 
title="форма подписки в сайдбаре" alt="форма подписки в сайдбаре" width="284" height="173">

Отсюда можно увидеть название изображения, которое называется точно также, как и заголовок с альтом, только уже не русскими буквами, а в транслитерации — forma-podpiski-v-sajdabre.jpg

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

Чтобы получить такое же название в транслитерации, я пользуюсь отличным сервисом Translit.net. Просто вбивает свою фразу в поле и жмем на кнопку «в транслит».

Получим готовое название для файла.

Так мы и называем загружаемый файл на сайт. Затем прописываем ему все необходимые данные и на этом процесс закончен.

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

На этом данный пост я заканчиваю.

Всем хорошего дня!

The alt description — Users

The attribute provides an “alternative description” for the image. This description is normally not presented to the user, but will be under certain circumstances:

  • Assistive technology — If the user is visually impaired, and is using a screen reader, the screen reader will read the description to the user.
  • Images turned off — Some users prefer to surf the web with images turned off (to save bandwidth or to minimize distraction). These users will normally see the description instead of the image.
  • Image failure — If an image fails to load for any reason (bad file name, connection problems), the user will usually see the description in place of the image.

Here’s an example of displaying the text in place of a failed image (the image points to nothing).

Зачем вообще заполнять alt теги?

Графическое изображение будет загружаться корректно, даже если у него нет прописанных тегов alt и title. Но в таком случае преимущества SEO для картинок становятся недоступными. Если потратить немного времени и создать альтернативное описание изображений, веб-мастер получает следующие возможности:

  • сообщить поисковому роботу важные данные;
  • привлечь новых посетителей;
  • увеличить лояльность своей аудитории.

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

полный код автоматического добавления атрибутов title и alt картинкам статей

А вот полный код (сгруппированный из решений статьи по отдельности) который можно добавить в файл функций…

Статья дополнена кодом автодобавления к загружаемой картинке атирибута alt — этот код я увидел впервые у автора campusboy.

На этом нынче всё! …теперь вся необходимая атрибутика медиафайлов будет на месте, а значит наши статьи более оптимизированы!

Однако и однако !!

В качестве эпилога, ещё один важный момент:

важно !!

Прописка кода в файл , это дело хорошее !! Однако не всё и вся стоит в него пихать – правильнее (и для скорости загрузки в том числе) сгруппировать некоторые циклы кода в оформленном плагине: легко, надёжно и правильно в плане создания сайта.

Все доказательства «ЗА» читать:

Вот ссылка – как сделать собственный плагин WordPress – добавочный файл my-functions.php

А вот тут можно скачать плагин, который содержит в себе функцию добавления Title к ссылке миниатюры записи, и многое другое полезное….

На этом занавес представления опускается……на рампы пыль печальная ложится…

!..подписываясь на обновления mihalica.ru —…расстаёмся с невежеством..!

…видео — благодарим комментатора за его первый отзыв…

Тег alt для изображений в распространенных CMS

В завершение расскажу о том, как заполнять тег alt для изображений в популярных системах управления контентом

1. WordPress

Сделать это можно двумя способами. Для этого не нужны какие-то особые умения, а также не потребуются и специальные плагины.

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

Второй метод – если картинка уже добавлена в тело статьи. Тогда нужно просто выделить ее и кликнуть на «карандаш», который появится в подсказке. После этого откроются поля с параметрами для заполнения.

2. Joomla

Тут теги прописываются непосредственно на этапе загрузки картинки в тело статьи. Нужно нажать на соответствующую иконку в редакторе. После этого откроется дополнительное окошко с полями для заполнения.

3. Opencart

А что бы создать собственный интернет магазин, приглашаю вас на свой курс по созданию и продвижению интернет магазина с нуля. С точки зрения скорости заработка денег — интернет магазин лучше, чем сайт/блог,так как уже в первый месяц вы сможете сделать первые продажи и именно это я показываю во время обучения!

Чтобы заполнить тег, нужно в редакторе найти иконку, указывающую на изображение – она демонстрирует картину с горами и солнцем. Потом кликнуть на неё и перед пользователем откроется новое окно. В этом окошке под ссылкой находится строка «Альтернативный текст». Вот именно в эту строку и вводится атрибут альт.


С этим читают