что такое атрибут alt для картинок в wordpress
Атрибут alt WordPress: оптимизируем картинки 4 совета по заполнению
Для распознавания фото придумано два основных мета тега – Alt и Title, они задают тематику и вывод изображения по запросу в поисковой выдаче. Поэтому их нужно проставить для всех фотографий, как прописать тег title и атрибут alt в WordPress покажу в данной статье.
Что такое атрибут alt в CMS WordPress
ALT – специальный атрибут применяемый к медиафайлам. Разрабатывался для поисковых систем, чтобы понять что показано. На сайте увидеть нельзя только через исходный код страницы в images.
Но в последствии поисковые системы научились определять что показано в файле, с помощью нейросетей и специальных скриптов, понимающих цветовую структуру. Поэтому влияние альта на продвижение в Яндексе и Google стало менее ощущаться.
Как прописать атрибут alt в вордпресс
Раньше вес тега alt был выше, сейчас как рекомендация, а не правило заполнения. В любом случае пока не отменили, нужно использовать.
В классическом редакторе
В WordPress классическом редакторе нажимаем на изображение и выбираем значок редактировать.
Далее появится окно WP, на первой строчке будет поле с возможностью прописать альт. Заполняем и в нижнем правом углу нажимаем кнопку Выбрать, чтобы изменения сохранились.
Не забываем обновлять саму запись или страницу.
В Gutenberg
В новом удобном редакторе Gutenberg процесс занесения атрибута alt проще:
Как автоматически проставить alt в изображениях плагином
Чтобы автоматически проставить alt к изображениям в статье, используйте плагин Clearfy Pro.
Ссылка на Clearfy PRO
У плагина есть более 50 настроек по улучшению, чистке, SEO, ускорению и оптимизации блогов на WordPress. В разделе SEO передвигаем переключатель в активное положение, теперь ко всем картинкам, не имеющих альта, он сделает автозаполнение взяв текст из заголовка.
Title и подпись для картинок
Стоит отметить еще две возможности это title и подпись для картинок. В ранжировании любого элемента играет роль окружающий текст. Что делают данные элементы:
В гутенберге чтобы сделать все в одном месте, лучше действовать через библиотеку файлов вордпресс:
Приложу авторское видео, чтобы представить процесс более ясно.
Что писать в alt и остальные теги в WordPress
Правил должны придерживаться не только владельцы WordPress, но и другие вебмастера:
Закончу статью, научились заполнять атрибут alt в WordPress и сможете сделать сайт лучше для поисковых систем.
Что такое атрибуты alt и title в WordPress
Большая часть веб-контента содержит изображения, однако немногие владельцы веб-сайтов оптимизируют картинки для лучшего ранжирования сайта в поиске. WordPress предоставляет возможность добавления альтернативного текста и заголовка изображения в соответствующие теги. Рассмотрим, в чем заключается разница между атрибутами alt и title и как их использовать для работы с изображениями на сайте.
Что такое тег alt у изображений — описание картинок
Alt, или альтернативный текст, – это атрибут, добавленный к тегу вставки изображения в HTML-коде. Такой текст появляется внутри контейнера картинки, когда она по какой-либо причине не может быть отображена на странице. Это помогает поисковым системам понять, что показано на этом графическом элементе.
Атрибут alt также используется для улучшения доступности веб-сайта для людей с плохим зрением или тех, кто применяет устройства для чтения с экрана. Программа-читалка будет озвучивать текстовую статью, а когда дело дойдет до изображения, то прочитает текст, находящийся в атрибуте alt. Это позволит пользователям узнать, что нарисовано на картинке, даже если они ее не видят.
Рекомендации по заполнению этого тега, что писать в ВордПресс
WordPress позволяет добавлять атрибут alt для изображений при их загрузке с помощью встроенного загрузчика мультимедиа. На этапе создания страницы или записи на панели инструментов доступна кнопка «Добавить медиафайл». При ее нажатии открывается окно встроенной библиотеки, куда требуется загрузить или просто перетащить мышью нужную картинку.
Когда вы загружаете изображение с помощью встроенного средства загрузки контента WordPress, в правой части окна доступны несколько полей для заполнения атрибутов изображения. Поле заголовка не следует путать с атрибутом title, который употребляется внутри тега изображения. Заголовок, добавляемый во время загрузки, используется только медиабиблиотекой WordPress для отображения списка мультимедийных файлов.
Задайте атрибут alt в соответствующем поле – он обычно состоит из 2–3 слов и должен описывать непосредственно то, что изображено на картинке. По желанию в этом же окне загрузки вы можете заполнить поля для подписи и описания изображения.
Что такое атрибут подписи заголовка title для изображений в WordPress
Title – это еще один атрибут, который можно добавить к тегу изображения в HTML-коде. Он используется для заголовка графического элемента и указывает его название. Заголовок показывается во всплывающей подсказке, когда пользователь наводит курсор мыши на картинку. Текст, введенный внутри title, не будет показан пользователю, если изображение не отображается на странице.
Название нужно давать осмысленно в зависимости от информации, представленной на изображении. В то же время этот текст должен отличаться от того, что содержится в атрибуте alt. Заголовок title можно писать на русском языке или использовать транслитерацию, часто для SEO-оптимизации в него добавляют ключевые слова.
Рекомендации по заполнению тега title
Атрибут title добавляется к изображению в WordPress уже после его вставки в текст. Если вы используете визуальный редактор для оформления страницы, щелкните мышью по картинке. На появившейся дополнительной панели инструментов следует нажать кнопку редактирования с изображением карандаша.
В результате откроется всплывающее окно для настройки параметров изображения, в котором нужно открыть раздел «Дополнительные настройки». Появится поле для добавления атрибута title, куда и требуется вписать название картинки. В этом же окне доступна настройка атрибута alt на тот случай, если вы забыли ввести его при загрузке изображения. Откорректируйте оба поля и нажмите кнопку «Обновить».
Тем пользователям, которые умеют редактировать HTML-код, достаточно переключиться с визуального на текстовый редактор и добавить атрибуты title и alt в соответствующий тег изображения.
Для оптимизации сайта рекомендуется для изображений использовать как атрибут alt, так и title. Очевидное преимущество этого шага заключается в том, что он помогает поисковым системам находить изображения на вашем сайте и отображать их в результатах поиска по картинкам.
При этом сайт получает дополнительный трафик из поисковиков. Другим ценным фактором является то, что эти атрибуты улучшают доступность вашего сайта для людей с особыми потребностями.
iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.
Правильное автоматическое заполнение метатегов alt и title изображений для WordPress
Приветствую вас, уважаемые читатели Хабра. Как часто мы сталкиваемся с заполнением атрибутов для изображений? Я — довольно часто. И каждый раз начиная пользоваться WordPress на очередном сайте, этот процесс вызывает некоторое раздражение. Поскольку из коробки CMS устанавливает метатеги изображений не корректно, точнее не так, как того требуют поисковые системы для грамотного предоставления информации о картинке. Я решил исправить эту несправедливость.
Проблематика
WordPress по умолчанию устанавливает название файла в поле «Заголовок», которое соответствует атрибуту title, а поле «Атрибут alt» оставляет пустым. Это вызывает дополнительные манипуляции при заполнении тегов для каждого изображения. При использовании стандартного загрузчика, параметры файла выглядят следующем образом:
Как пишет Яндекс, в своей документации:
Атрибут alt — это альтернативный источник информации для пользователей, у которых показ изображений в браузере отключен. Если атрибут alt определен, то, когда показать картинку будет невозможно, на ее месте отобразится текст атрибута.
Атрибут title предоставляет дополнительную информацию о картинке. Текст, заключенный в этом атрибуте, появляется при наведении курсора на картинку
А также, предупреждает, что оставлять атрибуты пустыми нежелательно и рекомендует для каждой картинки указывать уникальный title. То есть alt и title — не должны быть одинаковыми.
Google, в своей справке, упоминает только alt:
Замещающий текст в атрибутах alt делает контент доступным для пользователей, которые не видят изображения на страницах (например, потому что используют программы для чтения с экрана или из-за медленного подключения к Интернету).
Определяя тему изображения, Google учитывает описания в атрибутах alt и контент страницы, а также опирается на алгоритмы компьютерного зрения. Кроме того, если вы решите использовать изображение в качестве ссылки, замещающий текст можно сделать ее текстом.
Исходя из моего опыта, можно сделать вывод о том, что alt существенно важнее title. Но тем не менее заполнять все-таки лучше два атрибута. Помимо этого, важно учитывать, что название файла изображения на сайте (используя транслитерацию) должно соответствовать alt. То есть грамотная оптимизация изображения для поисковых систем может выглядеть следующем образом:
Решение
Так как заполнять два атрибута бывает несколько утомительно, а title просто дополняет alt. Мы, в своих проектах используем какое-то дополнительное слово или конструкцию для title. Важно, чтобы конструкция была универсальная и подходила для всех картинок на сайте. Поэтому, Я написал простое решение, которое изменяет работу стандартного загрузчика WordPress следующем образом:
Установка решения
Для установки решения необходимо добавить следующий код в functions.php вашей темы:
Предложенное решение так же удаляет лишние символы (кавычки, дефисы, двойне пробелы и другие символы) из названия изображения. А конструкцию для title «Изображение — », можно легко изменить на любую другую (56 строчка, при просмотре в редакторе).
Надеюсь, что решение будет полезным для вас и поможет сэкономить некоторое количество времени работы контент-менеджерам.
Атрибут alt тега img
Что такое атрибут alt?
Атрибут alt=»» (от англ. alternative) тега img представляет собой альтернативный текст или проще говоря — описание изображения. Для каждой картинки он прописывается отдельно и вкратце рассказывает, что на ней изображено. Синтаксис его крайне прост. Внутри тега img необходимо прописать атрибут alt=»», внутри кавычек которого и располагается описание.
Ниже приведен пример использования атрибута alt в теге img у нас на сайте.
Для чего нужен данный атрибут?
На заре развития Интернета, когда скорость передачи данных была крайне низка, не все пользователи при просмотре сайтов загружали фотографии. Была даже такая функция у браузеров — не загружать изображения. Для тех времен они «весели» слишком много и могли открываться по 10 минут. Как раз в этом случае на помощь приходил атрибут alt=»», который описывал изображенное на фотографии текстом. (Вместо рисунка отображался пустой квадрат, в котором находилось описание незагруженного изображения)
Но эти времена прошли, и сейчас alt используется, в основном, для поисковой оптимизации. Об этом мы поговорим ниже.
Роль alt в SEO
С окончанием эпохи низкоскоростного Интернета и сильно ограниченного трафика alt получает «новую жизнь». Причиной тому стала постоянно развивающаяся SEO индустрия.
Все дело в том, что поисковая система не способна точно определить, что изображено на рисунке. Она может найти похожие изображения, и основываясь на их описаниях догадаться, что же находится на Вашей фотографии. Но, все же основным источником данных будет являться текст. В нашем случае, альтернативное описание — alt.
Совместно с тегами description, title и h1, атрибут alt является одним из основополагающих элементов внутренней оптимизации сайта. Прописывать его необходимо основываясь на спросе, используя ключевые слова и ориентируясь на пользователя.
Прописываем alt для изображений
Заполнение атрибута alt основывается на трех столпах — статистика ключевых слов, удобство для пользователей и технические требования.
Статистика ключевых слов
Так как атрибут alt является частью внутренней оптимизации, его необходимо прописывать с учетом семантического ядра. Основные ключевые слова желательно скомбинировать в начале описания, при этом не допуская поискового СПАМа. То есть, alt состоящий исключительно из поисковых запросов (похожий как две капли воды на тег keywords) совершенно недопустим.
Ориентированность на пользователей
Основное требование современной поисковой оптимизации — ориентированность на посетителей сайта. Не является исключением и атрибут alt. Его необходимо прописывать для человека, полностью раскрывая суть изображения. Делайте описание таким, что бы пользователь не смотря на картинку понимал, что на ней находится.
Действительно, в отличие от тегов title, h1-h6 и description, атрибут alt человек скорее всего не увидит. Но, данное описание используется поисковыми системами в органической выдаче, то есть, подходить к нему нужно со всей серьезностью.
Немного технических требований
Атрибут alt не имеет длинного списка технических требований, однако должен соответствовать всему ниже перечисленному:
Длинна не более 160 символов. Физически, alt=»» не ограничен в своем объеме, однако многочисленные исследования показали, что эффективно поисковиками используется лишь 160 первых символов. (Google — 160, Yandex чуть больше — около 240);
Длинна не менее 20 символов. Очень короткое описание не способно передать всю суть изображения;
Атрибут alt должен находится внутри тега img: ;
Должен быть написан на том же языке, что и содержимое страницы;
Недопустим пустой alt.
Автоматическая генерация alt
Помимо ручного заполнения очень распространена автоматическая генерация alt. В этом случае описание берется отрывком из текста, заголовка, description или любого другого текстового блока. Такой способ довольно удобен для крупных Интернет-магазинов или каталогов, где проделать ручную работу практически невозможно. Однако пользоваться генерацией мы не советуем. Никакой алгоритм не сможет прописать alt качественнее, чем Вы.
Какой он — правильный alt?
Правильный атрибут alt должен соответствовать следующим требованиям:
Корректно и правдиво описывать содержимое изображения;
Должен быть понятен пользователю и легко читаться;
Имеет длину не более 160, но и не менее 20 символов;
Не обманывать и не вводить в заблуждение;
Содержать в себе основные ключевые слова;
Написан на том же языке, что и содержимое страницы;
Не является поисковым спамом или списком ключевых слов;
Атрибут не должен быть пустым;
Желательно отсутствие сложных технических терминов и аббревиатур. (Если это не оправдано тематикой сайта).
Если Ваш alt полностью соответствует вышеуказанным требованиям, то можете считать его просто превосходным!
Ошибка — «Отсутствует alt»
Многие online сервисы, проводящие анализ сайта с точки зрения поисковой оптимизации, обращают внимание на атрибут alt и при его отсутствии выдают ошибку. Что в этом случае необходимо делать, думаем объяснять не стоит. Просто прописываем недостающие alt.
Кстати говоря, во время своей диагностики Яндекс Вебмастер не выдает ошибку связанную с отсутствием alt. Но, это не значит, что поисковик смотрит на него сквозь пальцы. Прописывать нужно.
Alt для распространенных CMS
Так как большинство сайтов созданы на основе популярных CMS, таких как WordPress, Joomla! или Bitrix, то скорее всего Вам придется столкнуться с заполнением атрибута alt в этих системах управления. Поэтому мы собрали несколько пошаговых инструкций.
Скажем сразу, ничего сложно в этом нету, но будем надеется, что инструкция сделает этот процесс быстрее.
Атрибут alt для картинок в WordPress
Прописать alt в WordPress возможно двумя стандартными способами, которые доступны по умолчанию без установки дополнительных плагинов.
Способ 1 — При добавлении фотографии в статью
После того, как Вы нажали в визуальном редакторе «Добавить медиафайл«, откроется окно со всей медиабиблиотекой WordPress. При выборе конкретного изображения, справа появится информация и поля для заполнения. Одним из полей будет «Атрибут alt«.
Способ 2 — Если изображение уже в статье
Если изображение уже вставлено в статью, нужно его выделить и нажать на карандаш во всплывающей подсказке. (Как показано на рисунке ниже)
Далее перед Вами откроется всплывающее окно со всеми параметрами, среди которых также будет атрибут alt.
Атрибут alt для картинок в Joomla!
Создание атрибута alt в Joomla! происходит на этапе добавления изображения в статью. Находим иконку показанную на рисунке ниже и нажимаем на нее.
Перед Вами откроется всплывающее окно, в котором будет поле «Описание изображения». Это и есть атрибут alt.
Атрибут alt для картинок в Bitrix
Если не устанавливать дополнительные расширения и модули, то добавление alt в bitrix происходит в два этапа.
Перед Вами откроется статья в визуальном редакторе и html коде. Далее находим наше изображение в коде и прописываем для него alt.
Если у Вас установлен расширенный визуальный редактор, то при создании alt можно обойтись без редактирования кода.
Атрибут alt для картинок в Opencart
Добавление alt в Opencart очень похоже на все вышеперечисленные способы. Для этого нужно перейти в визуальный редактор и найти иконку показанную ниже на рисунке. (На иконке изображены горы и солнце — миниатюрная картина)
Далее открывается всплывающее окно, в котором сразу под ссылкой располагается поле «Альтернативный текст«. Это и есть наш alt.
Атрибуты Alt и Title для изображений в WordPress
В статье об оптимизации изображений на блоге pro-wordpress.ru уже упоминалось о важности атрибутов Alt и Title. Даже если качество контента на вашем сайте высокое, а посещаемость растет с каждым днем, у вас все еще есть возможность сделать его лучше – более удобным для пользователей и более понятным для поисковых систем, а также получать дополнительный трафик на сайт.
В этой статье рассмотрим подробнее, как в WordPress прописать атрибуты Title и Alt для картинки, что это такое и какова от этого польза для продвижения сайта.
Alt и Title: что это такое и для чего необходимы
Атрибуты тега Alt и Title – это описание графического изображения, находящегося на странице сайта, с помощью текста, цель которого состоит в предоставлении посетителю и поисковому роботу более полной информации.
Alt для изображений на сайте нужен, прежде всего, поисковику, который с помощью этого атрибута (альтернативного текста) может «понять», что находится на картинке (разумеется, если описание составлено корректно), проиндексировать ее и добавить в свою коллекцию – базу медиафайлов. Если графика на сайте не закрыта от индексации в файле robots.txt, Alt дает возможность сайту получать трафик из поиска Яндекс и Гугл по картинкам или фотографиям. Для посетителя этот параметр становится видимым, если в настройках браузера функция показа графики отключена, что делается в некоторых случаях для ускорения веб-серфинга по текстовому содержимому сайтов.
Title изображения – это предназначенное для посетителя краткое описание картинки, выполняющее роль ее заголовка. Из описаний-тайтлов для каждого изображения на странице формируются всплывающие подсказки, появляющиеся при наведении курсора. У поисковиков отсутствуют требования к обязательному заполнению тайтла, но можно встретить советы специалистов по продвижению сайтов, рекомендующих прописывать Alt и Title для картинок.
Атрибуты Title и Alt изображений выглядят в коде страницы следующим образом:
Как и где заполнять Alt и Title в WordPress
В WordPress задать атрибуты можно в процессе добавления на сайт изображения, заполнив предлагаемые системой поля «Заголовок» и «Атрибут Аlt».
Для уже загруженных картинок редактирование атрибута Alt доступно по щелчку кнопки мыши по изображению (иконка «Изменить» с изображением карандаша). В этом же окне («Параметры изображения») можно обнаружить и доступную для изменения строку Title, для этого необходимо развернуть пункт меню «Дополнительные настройки».
Как видим, ничего сложного в этом процессе нет. Понятно, что заполнение описаний при загрузке картинок может восприниматься начинающим вебмастером задачей рутинной и малоинтересной, но пренебрегать ей не следует.
Оптимизация изображений: что писать в Alt и Title
Насчет того, как правильно заполнять Title и Alt описание изображения, на вебмастерских форумах и блогах оптимизаторов до сих пор можно встретить немало противоречивых мнений и советов. И это не удивляет, так как меняются требования поисковых систем к контенту, появляются новые поисковые алгоритмы и фильтры, а оптимизаторам приходится подстраиваться под них, экспериментировать и разбираться в том, какие действия способны принести пользу сайта, а какие – навредить.
Одним из распространенных советов относительно атрибута Alt является предложение прописывать в него ключевые фразы, соответствующие контенту страницы, а то и просто – главный ключ из H1. Некоторые из вебмастеров в целях экономии времени отдают предпочтение плагинам, заполняющим описание всех находящихся на странице картинок автоматически – также ключом из заголовка H1.
Опасность подобного подхода в следующем. Когда изображений на странице много, а в атрибутах тега у них прописан главный ключевой запрос для продвижения, это может привести к переоптимизации страницы. То, что не видят на странице живые посетители, «видят» поисковые роботы. Каждая строка кода подвергается их тщательному анализу и классификации.
Хотя Яндекс и утверждает, что тексты из тега описания картинок не попадают в основной индекс, это еще не значит, что они не учитываются при ранжировании страниц. Обнаружение алгоритмами поисковика признаков переоптимизации способно привести к наложению на страницу фильтра и, как следствие, к ухудшению позиций в результатах поиска. Пример одного из таких фильтров: знакомый многим вебмастерам и сеошникам Баден-Баден от Яндекса.
Оптимальным и менее рискованным подходом к работе с атрибутами изображений в процессе оптимизации сайта представляется использование в текстовых атрибутах изображений Alt и Title разных, уникальных для каждого изображения, низкочастотных ключевых запросов, соответствующих содержимому картинки. Пустые, не относящиеся к изображению
Объем текста для Alt должен составлять 3-10 слов, для Title допустимо более развернутое описание, но увлекаться здесь тоже не нужно – всплывающая подсказка из нескольких строк не всегда бывает уместна и может лишь испортить впечатление.
В рекомендациях для вебмастеров Яндекса атрибуту Alt посвящен раздел «Использование графики». Советы основной поисковой системы рунета таковы:
Заключение
Подведем итоги сказанному выше.
Заполнение атрибута Alt на сайте:
Атрибут Title для картинки:
Выводы о важности использования атрибутов текстового описания картинок на своем ресурсе из перечисленных моментов вы можете сделать самостоятельно.
В комментариях под статьей предлагаю вам поделиться собственным опытом и ответить на вопрос, используете ли вы Alt и Title для seo-продвижения сайта?