Атрибуты alt и title для изображений в wordpress

Содержание:

Как найти нужный фрагмент исходного кода и добавить атрибут alt

Прежде всего, нужно внимательно посмотреть на данные, которые вы получили из средств анализа

Обратить внимание:. — на имя файла изображения,

— на имя файла изображения,

— на название класса, блока в котором размещено изображение,

— на ссылки,

— на соседние элементы.

Все эти элементы помогут в дальнейшем с поиском файла, а в нём и нужного фрагмента исходного кода.

В качестве примера, посмотрите на размещённый выше скриншот. Код, который нам нужен, ничем не примечателен. Да, мы знаем, что это баннер на новую бесплатную книгу Азамата. Более того, мы знаем, что баннер расположен в сайтбаре

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

Прежде всего, мы знаем имя файла изображения

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

И то, что этот блок находится внутри списка, элемент которого имеет идентификатор id=»text-10″.

И уже по классу «textwidget» становится понятно, что нужный нам код расположен в Виджетах

А раз так, то искать все эти элементы, на которые мы обратили внимание – бесполезно. Так как в большинстве тем WordPress виджеты в сайтбаре формируются динамически

А значит, в коде файла, отвечающего за cайтбар (sidebar.php) будет преимущественно php код. Который никак не укажет на конкретный виджет.

Следовательно, идём в административную панель WordPress – «Внешний вид» — «Виджеты» и ищем нужный виджет.

Код в виджете

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

До
<img src="http://azamat-partners.ru/wp-content/uploads/2015/01/250x250.gif" 
width="250" height="250" border="0"/>
После
<img src="http://azamat-partners.ru/wp-content/uploads/2015/01/250x250.gif" 
width="250" height="250" border="0" alt="Инфомаркетинг 20/80"/>

Вот и всё готово.

Но, с виджетом всё понятно, тут любой справится. А как быть с конкретными элементами дизайна?

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

Ошибки элементов дизайна

В качестве примера рассмотрим кнопки социальных сетей.

Открываем вкладку «Код страницы» и анализируем код. Ищем элементы, за которые можно зацепиться, по которым можно найти нужный файл и код.

Искомые элементы

Далее начинаем искать. Обычно для таких поисков я использую свой любимый Total Commander. Через ftp-соединение подключаюсь к своему блогу, открываю папку с темой и запускаю поиск ALT+F7.

Поиск в Total Commander

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

Найден нужный файл

Далее, лучше сделать резервную копию файл (скопируйте отдельно на компьютер) и можно приступать к редактированию. В Total Commander достаточно выбрать файл и нажать клавишу F4. Или можно скопировать файл на компьютер и открыть его через Notepad++. Ну, или на крайней случай, через Блокнот.

Итак, открываем файл и ищем нужный код. Можно использовать поиск CTRL+F.

Добавление атрибута alt

Нашли, и вставляем нужный атрибут alt. Итак, со всеми изображениями, у которых он отсутствует.

После того как изменения внесены, сохраняете файл и снова проверяете инструментами анализа.

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

И конечно, почитайте статью про оптимизацию изображений в целом. Узнаете, что изображения многих шаблонов не только не имеют тегов alt, но вовсе не оптимизированы.

А у меня на этом сегодня всё. Жду ваших комментариев. Всех успехов и хорошего настроения! До встречи в новых видео и статьях.

Популярные статьи

  • 26.9K
  • 10 мин.

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

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

  • 8 апреля 2019
  • Продвижение

  • 5.1K
  • 19 мин.

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

  • 20 января 2020
  • Продвижение

  • 5.8K
  • 8 мин.

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

Хотите такой же? В статье мы разберем раздел «Представление в поиске» в Вебмастере и поможем сделать красивый снипет.

  • 6 мая 2020
  • Продвижение

  • 15.8K
  • 3 мин.

Каннибализация ключевых слов
Термин «каннибализация» пришел в SEO из маркетинга. В нашей статье мы рассмотрим, что такое каннибализация ключевых слов, покажем, как она проявляется и как от нее избавиться.

  • 16 января 2018
  • Продвижение

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

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

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

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

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

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

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

Заполнение атрибутов img в WordPress

При размещении статьи с помощью системы управления WordPress текст/графика добавляются в специальный редактор в таком виде, как они будут видны на сайте. Самостоятельно прописывать HTML код не нужно. Поля alt/title заполняются с помощью свойств изображения, которые открываются в отдельном окне.

Причем в некоторых случаях сама CMS автоматически прописывает в атрибут title имя файла и копирует его в alt. Если это случилось, то оставлять их в таком виде категорически не рекомендуется.

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

  • Пользователи видят альтернативный контент до загрузки графики/фотки.
  • Люди с ограниченными возможностями могут воспринимать инфу с веб-страниц.
  • Поисковые системы быстрее поднимают сайт в результатах поиска на SERP.

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

Итого. Заполнение атрибутов title и alt у тега img – важный, но далеко не единственный способ оптимизации картинок на сайтах. Можете еще почитать пост про XML Sitemap для изображений

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

Что такое атрибут Alt для картинок

Атрибут Alt для картинок – это текст, описывающий изображение в html-теге <img>. Он становится видимым в случае невозможности загрузки изображения. На месте незагруженной картинки будет показан текст (при заполненном атрибуте Alt).

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

А вот так будет выглядеть картинка с текстом «Стиральная машина Славда WS30T/ET» в атрибуте Alt тега <img>:

Атрибут Alt дает возможность узнать, что изображено на картинке, когда пользователь не может ее увидеть. Кроме того, прописанный текст в атрибуте Alt учитывается поисковыми роботами при индексации сайта. Наконец, оптимизация названий картинок и атрибутов Alt в теге <img> упрощает поиск изображений, например, в Яндекс или Google Картинках.

Как правильно составить атрибут Alt для картинок

  1. Оптимальное количество слов – 3-5, но длина текста тега не более 75-80 символов. Мы рекомендуем использовать краткую и сжатую, но содержательную информацию.
  2. Обязательное условие – использование ключевых запросов.
  3. Ключевые слова лучше употреблять в именительном падеже, чтобы облегчить поиск.
  4. Избегайте спама: мы не рекомендуем перечислять большое количество ключей через запятую, как и в других тегах.
  5. Необходимо, чтобы Alt относился к тексту страницы и описывал то, что изображено на картинке.

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

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

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

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

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

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

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

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

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

Новые приключения в HTML Academy

Приём-приём, вызываем любителей приключений!

26 июля стартовала битва за кодий на Джаваскриптоне. Вступайте в одну из трёх команд, бесплатно проходите онлайн-тренажёры по вёрстке и программированию и зарабатывайте за это кодий. Чем больше участников, тем больше кодия у команды, и тем быстрее открываются новые курсы. Команда, которая к 31 июля наберёт больше всех кодия, станет победителем и получит шикарные призы.

Каждый попаданец из фракции-победителя получит:

  • Доступ ко всем платным тренажёрам до 10 августа включительно.
  • Скидку 50% на навыки.
  • Скидку 70% на макеты и проекты
  • Скидки от 1500 до 5500 рублей на курсы и профессии.

Ещё есть время подготовиться и заработать немного кодия, разгадывая загадки бортового компьютера. В общем, всех нас ждёт настоящая космоопера.

Как alt влияет на SEO

Крупные поисковики предоставляют пользователям обширные руководства, где описывают правила оформления веб-ресурсов для улучшения их результатов в выдаче. В материале от Google, посвященном изображениям, настойчиво рекомендует использовать альтернативный «замещающий» текст при вставке картинок.

Эта рекомендация не случайна. Поисковые роботы при просмотре сайтов большую роль уделяют значениям атрибутов alt. Именно по ним система определяет, соответствует ли размещенное изображение окружающей текстовой информации. Специалисты по SЕО при анализе перед оптимизацией обязательно проверяют, есть ли в alt’ах ключевые слова, по которым ведется продвижение.

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

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

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

Как использовать теги в 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.

Культурный и исторический фон

В то время, когда рисунки были созданы, северная часть Норвегии была населена охотниками-собирателями, которые считались потомками культуры Комса, археологической культуры охотников и собирателей эпохи позднего палеолита и раннего мезолита, которые распространились вдоль норвежского побережья, занимая территории, которые освобождались отступающими ледниками в конце ледникового периода, примерно 8000 до н. э. По наскальным рисункам Альты, которые создавались на протяжении почти 5000 лет, можно проследить множество культурных изменений, в том числе изобретение металлических инструментов, а также достижения в таких областях, как судостроительство и усовершенствование методов рыбной ловли. Наскальные рисунки, особенно, самого раннего периода, показывают большое сходство с петрографами из северо-западной части России. Таким образом, можно сделать вывод о возможном контакте между параллельно развивавшимися культурами на обширных пространствах крайнего Севера Европы.

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

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

Из-за эффекта поднятия поверхности после отступления ледника вся Скандинавия поднималась над уровнем моря, после конца ледникового периода. Хотя этот эффект по-прежнему заметен и сегодня (рост происходит со скоростью около 1 см в год), он, как полагают, раньше шёл гораздо более быстрыми темпами. Возможно, в те времена, когда петроглифы Альты были созданы, этот подъем земной коры был заметен в течение жизни одного поколения. Считается, что большинство из петроглифов были изначально расположены непосредственно на береговой линии и постепенно переместились на несколько десятков метров от моря из-за поднятия уровня суши.

Почему важно прописывать теги title и alt? Как они добавляются к изображениям?

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

Вот и они:

  • Первым делом, конечно, надо написать статью и найти уникальную картинку. Как правило, все делают стандартный шаблон, свой, и туда уже вставляют изображение, скрины, например, или рисуют что-то, либо вовсе заказывают у художника.
  • Посмотрели на ключевые фразы, которые вы использовали для поста и один прописали в title;
  • Второй ключ прописали в alt, в описание и добавили еще несколько слов, одним словом разбавили запрос.
  • Теперь сохраняем изменения и добавляем картинку в текст, потом просматриваем статью и наводим курсор на изображение, смотрим: какой title отображается. Все готово.

Короче преимущества в следующем, это для тех, кто еще не убедился до конца.

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

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

На этом я буду заканчивать написание статьи. Желаю вам удачи в продвижении

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

Всем пока!

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

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

Рассказать, что изображено на картинке или куда обратить внимание

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

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

Несколько фотографий одного и того же товара

Как поступать с подписью в таком случае? Самый простой вариант – оставить одно и то же описание для всех фото. Это нормальный и часто используемый случай. Поисковику важней уникальность самих фото, и понятно, что на фотографиях карточки товара скорей всего изображено одно и то же, то есть, описывать подробней смысла нет. Разве что добавить к основному тексту: “вид 1”, “вид 2” и так далее.

Как пример, попробуйте поискать модель телескопа, изображеную выше: результаты в Google, результаты в Яндексе. Несмотря на одинаковые подписи ALT на самом сайте Штурмана, в поиске можно найти разные изображения с одной и той же карточки товара.

Атрибуты ALT и TITLE тега IMG

Несмотря на то, что использование при оптимизации изображений
атрибуто
в title
и alt
— это простой способ поднять позиции сайта в поисковых системах, многие вебмастера не в полной мере применяют их, а то и вовсе игнорируют. Некоторые их путают и не понимают, какая разница между title
и alt
. Следует отметить, что частенько title
и alt
по ошибке именуют тегами, хотя это атрибуты тега
img
(от слова “image”), а не отдельные теги.

HTML тег
img
применяют для отображения на страницах сайта изображений (картинок)
в графическом формате GIF, JPEG
или PNG
. При необходимости, картинку можно сделать гипер-ссылкой, заключив тег img
в контейнер .
Атрибут
alt
передает описание изображения
для браузеров при отключенной графике. Если данный атрибут не будет прописан, то пользователи увидят пустую икону вместо изображения, а если alt
прописан, то будет показано его текстовое содержание. Атрибут
alt
сильнее всего влияет на ранжирование изображений поисковиками.

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

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

Поисковые системы учитывают не весь текст, заключенный в атрибут alt
: Google, к примеру, показывает только первые 15-17 слов, а Яндекс чуть больше – до 28 слов. В любом случае, этого количества слов вполне достаточно, чтобы составить вразумительный контекст.

Как прописать атрибут alt в вордпресс

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

В классическом редакторе

В WordPress классическом редакторе нажимаем на изображение и выбираем значок редактировать.

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

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

Поле куда вставить надпись

В Gutenberg

В новом удобном редакторе Gutenberg процесс занесения атрибута alt проще:

Альт в гутенберге

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

Что нужно прописывать в атрибуте Alt

Окей, то что тег Alt нужен, надеюсь, я вас убедил. Но что прописывать в нем? Если коротко, то нужно просто указать, что именно изображено на картинке.

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

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

За такой Alt, недолго схлопотать и фильтр за переоптимизацию ключевыми словами. Так что, делайте обычное, нормальное описание вашей картинки.

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

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

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

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

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

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

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

Живые и неживые коллекции в JavaScript

Веб-разработка — это не только про вёрстку и знание HTML. Иногда приходится где-то что-то подпилить и написать код. А где код — там хранение данных. А где хранение данных — там переменные, хранение информации в массивах и другие странных словах.

Ещё информацию можно хранить в коллекциях (вспомните полку со старыми видеокассетами — это прям оно). Допустим, мы хотим получить информацию о всех картинках со страницы и что-то с ними сделать через JavaScript. Мы выполняем команду и получаем коллекцию объектов, которая вроде похожа на массив, но нет.

Дело в том, что коллекции тоже бывают разными — живыми и неживыми. HTML Academy провели целое расследование о том, чем они отличаются, когда программисту нужны динамические коллекции, а когда лучше подойдут статические.

Подробности читайте в блоге HTML Academy. А ещё подпишитесь на нашу полезную рассылку, чтобы получать одно письмо в неделю со статьями о веб-разработке и уделять дополнительные 10-15 минут самообразованию.

И пусть живые позавидуют неживым!

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

Если на вашем сайте очень много картинок и почти нет текста, подпись картинкой будет полезна, поэтому именно с точки зрения SEO необходимо ее оптимизировать:

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

Например, у вас картинка динамиков Iphone 7.

Яндекс открытым текстом говорит, что ALT важен.

Далее в хелпе Яндекса наткнулся на очень интересный ответ:

“Как поместить мою картинку на первое место?»

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

Дополнительные факторы картинки влияющие на SEO

Текст под картинкой несет гораздо большую пользу для поисковика, чем собственно сам ALT.

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

Атрибут «alt»!

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

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

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

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

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

Атрибут title!

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

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

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

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

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

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

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

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

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 если нажать «Редактировать изображение»

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

Alt (Альт) – это атрибут для тега img, в котором устанавливается альтернативный текст для изображения. Текстовая информация отображается при отключенной загрузке графики в браузере пользователя и дает понять, что изображено на этой картинке. Название «alt» HTML-тег получил от слова alternative – альтернативный вариант текста.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector