Как добавить атрибут title в навигационное меню WordPress. Как автоматически добавить атрибут Alt в теги Img вашего блога на WordPress (там, где их нет)

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

Что такое тег alt у изображений - описание картинок

Alt, или альтернативный текст, – это атрибут, добавленный к тегу вставки изображения в HTML-коде. Такой текст появляется внутри контейнера картинки, когда она по какой-либо причине не может быть отображена на странице. Это помогает поисковым системам понять, что показано на этом графическом элементе.

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

Виртуальный хостинг сайтов для популярных CMS:

Рекомендации по заполнению этого тега, что писать в ВордПресс

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

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

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

Что такое атрибут подписи заголовка title для изображений в WordPress

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

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

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

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

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

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

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

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

Зачем нужен Title в меню?

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

Данный атрибут отображает дополнительную информацию о ссылке или картинке:

Обычно браузеры отображают title при наведении курсора мыши. Это позволяет пользователям увидеть, куда ведет ссылка.

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

Разработчики WordPress удалили атрибут title из окна добавления ссылки в версии 4.2 . Раз уж мы заговорили об этом, то научимся добавлять title в меню WordPress .

Добавление атрибута Title в элементы навигационного меню WordPress

Зайдите в раздел Appearance=> Menus (Внешний вид=>Меню ) и перейдите на вкладку Screen Options (Настройки экрана ), расположенную в правом верхнем углу:

Там откроется меню, в котором нужно будет поставить галочку в свойстве «Атрибут title ».

Затем пролистайте страницу и нажмите на любой элемент меню для его открытия. В нем вы увидите поле для атрибута title :

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

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

Перевод статьи «How to Add Title Attribute in WordPress Navigation Menus » был подготовлен дружной командой проекта

Хорошо Плохо

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

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

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

Мой сайт и я чтобы быстро из-под них выйти убрал все атрибуты Alt и Title в тегах IMG, т.к. подозревал, что именно из-за их переоптимизации был наложен фильтр. Увы, но это не помогло и пришлось пять месяцев убить не переписывание текстов.

А вот сил на обратное добавление атрибутов ALT в статьи у меня уже не осталось. Сейчас, когда обновляю старые материалы, естественно, дописываю и ALT-ты, но далеко не все статьи я переписываю (не до всего доходят руки). Поэтому я и подумал о том, чтобы поставить «времянку».

Автоматическое добавление ALT к изображениям, где его нет

Идея очень простая, а реализация изящная. Показанный внизу скрипт (функция для WordPress) просто ищет теги IMG, в которых атрибута alt нет вообще. Найдя такое безобразие она добавляет ALT и тупо прописывается в нем название статьи (содержимое тега Title страницы).

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

Итак, показанный фрагмент кода нужно добавить в файл функшион.пхп ( я о нем подробно писал) используемой вами темы оформления (сделайте его бекап обязательно). Посмотрите, где там уже вставлены подобные конструкции и постарайтесь не впихнуть ее внутрь какой-нибудь другой функции (лучше вставлять перед function другой функции, чтобы уж точно не ошибиться:

Function add_alt_tags($content) { global $post; preg_match_all("//", $content, $images); if(!is_null($images)) { foreach($images as $index => $value) { if(!preg_match("/alt=/", $value)) { $new_img = str_replace("post_title.""", $images[$index]); $content = str_replace($images[$index], $new_img, $content); } } } return $content; } add_filter("the_content", "add_alt_tags", 99999);

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

В ее коде вы найдете ALT-ты хоть и одинаковые, но все же присутствующие.

Все лучше, чем ничего. ИМХО.

На страницах же, где альты были прописаны ничего не поменяется:

Как добавить атрибуты alt и title миниатюрам в WordPress

И еще на тему. Миниатюры в WordPress по умолчанию выводятся с пустыми тегами Alt (типа alt=""). Если это вам не нравится, то можете добавить в качестве альта к миниатюрам названия статей, из которых они были взяты. Заодно можете и атрибут Title к тегу Img добавить:

//добавление alt и title для миниатюр записей start function wph_alt_title_for_thumbnail($html) { $post_title = esc_attr(get_the_title()); //добавляем alt $html = preg_replace("/(alt=")(.*?)(")/i", "$1".$post_title."$3", $html); //добавляем title $html = str_replace("/>", "title="".$post_title."" />", $html); return $html; } add_filter("post_thumbnail_html", "wph_alt_title_for_thumbnail", 10, 1); //добавление alt и title для миниатюр записей end

Если к миниатюрам хотите добавить только альты, то можно использовать такой код:

//добавление alt и title для миниатюр записей start function wph_alt_title_for_thumbnail($html) { $post_title = esc_attr(get_the_title()); //добавляем alt $html = preg_replace("/(alt=")(.*?)(")/i", "$1".$post_title."$3", $html); return $html; } add_filter("post_thumbnail_html", "wph_alt_title_for_thumbnail", 10, 1); //добавление alt и title для миниатюр записей end

Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на

Вам может быть интересно

Как в WordPress можно выводить посты из категории с миниатюрами (их создание в Auto Post Thumbnail и catch_that_image)
Создаем для блога на WordPress кнопки добавления в социальные сети и закладки (без плагинов и скриптов) Как отключить комментарии в WordPress для отдельных статей или всего блога, а так же убрать или наоборот подключить их в шаблоне Пропало левое меню в админке WordPress после обновления
Хлебные крошки в Вордпресс без плагинов
Как убрать служебные ссылки с WP-JSON из исходного кода страниц вашего блога на WordPress
Файл functions.php из папки с темой WordPress и реальные примеры его использования Проблема с All in One SEO Pack и ее решение - убираем rel=prev и исправляем rel=canonical, чтобы убрать из индекса дубли

WordPress — очень удобная платформа для оптимизации. Если руки растут из правильного места, и вы хоть что-то знаете о понятиях SEO, тогда вы сможете правильно оптимизировать сайт на WordPress. В итоге, после написания определенного объема контента и публикации постов, люди на сайт начнут приходить прямо из поиска, и вам ничего не нужно будет делать. Останется лишь усовершенствовать методы монетизации ожидать приток денег. Это лучший способ сделать пассивный доход в 21 веке, и вы обязаны им воспользоваться!

Огромную пользу для оптимизации WordPress играет атрибут the Title. Без него сложно добиться нормальных позиций в поиске.

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

Как добавить атрибут the Title к каждой странице и записи

Дело в том, что этот атрибут уже имеется на всех страницах вашего проекта. Сайт WordPress автоматически генерирует все необходимые мета теги, если этого не делает хозяин проекта. Но проблема в том, что делает это движок никудышно, в расчете на то, что вас не особо волнует SEO. Обычно, он вставляет какие-то ближайшие слова вместо того, чтобы качественно прописать the Title. Кроме того, возможно, шаблон не предусматривает этот атрибут для каждой страницы персонально. Вам необходимо это изменить.

Добавить мета теги, а точнее атрибут the Title на сайт WordPress вы сможете вручную — через код. Вам необходимо будет добавить специальные условия elseif, чтобы каждый пост (post), рубрика меню (category) и персональная страница (page) обзавелись собственными параметрами the Title. Но проблема в том, что хоть прописать нужно и не очень длинный код в 5-6 строчек, но новичок этого сделать не сумеет. Потому необходимо искать другие способы как изменить слова Тайтла и отредактировать этот атрибут. И такой способ есть — это установка специальных плагинов.

Плагины, которые активируют теги WordPress

SEO Title Tag

Это узконаправленный плагин, который как раз рассчитан на атрибут the Title. Вам необходимо будет прежде зайти, и через установить на сайт плагин SEO Title Tag. После этого еще нужно будет кое-что проделать с кодом. Только ничего придумывать не придется. Зайдите в редактор файла header.php. Заходите на него через хостинг, иначе ключевые изменения не активируются. Найдите в файле header.php замкнутые теги title. Теперь удалите все, что содержится между эти двумя тегами и добавьте следующий код:

else { bloginfo("name"); wp_title();} ?>

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

WordPress seo by yoast

Это настоящий хит среди других SEO-плагинов для WordPress. Когда вы скачаете и установите этот модуль, ваш сайт гарантированно улучшит позиции. Сможете прописывать ключевые слова и редактировать мета так, как душе угодно. Разумеется, делать это нужно будет по правилам, чтобы органический поток постепенно увеличивался.

Для начала скачайте плагин WordPress seo by yoast. Во время активации модуля вам предложат отслеживать работу инструмента, якобы для улучшения поддержки. Лучше запретите это, чтобы блог не прогружался. Если ранее вы уже пользовались плагинами для мета, тогда нажмите кнопку «Импортировать», чтобы сохранить все прописанные теги и ключевые слова сайта. Далее пройдет процедура передачи данных, все теги и ключевые слова закрепятся уже за новым плагином, ваше мета сохранится, и вы будете оповещены об успешном окончании импорта информации.

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

Еще одно преимущество плагина WordPress seo by yoast — это возможность редактировать тайтлы сразу для всех разделов сайта. У модуля есть встроенный массовый редактор, который предоставит вам список всех доступных страниц. Вы сможете не заходя во все разделы, изменить тайтлы для страницы. Буквально за 5 минут так можно отредактировать до 10 страниц. В ином случае у вас бы на это ушел битый час. Ведь чтобы изменить title без редактора, вам необходим заходить в меню Ворпдерсс в раздел «Страницы», выбирать нужный раздел из списка, и уже там снизу, где мета, вводить свой тег.

All in One SEO Pack

Это ключевой конкурент предыдущего плагина. По мнению многих, этот модуль даже лучше. Ведь он ничем не уступает инструменту WordPress seo by yoast. Вам предстоит пройти аналогичную процедуру установки и активации плагина. Меню настроек у этого модуля немного отличается, но в целом все очень похоже. Вы сможете либо задать автоматическую генерацию тайтлов, основанную на копированни заголовков страниц, либо активировать теги в разделе «Мета», чтобы прописывать ключевые слова самостоятельно.

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

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

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

Посмотрим как добавлять атрибут title в редакторе WordPress по умолчанию

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

Чтобы добавить атрибут title к изображению в редакторе WordPress по умолчанию нужно проделать несколько манипуляций:

1. Перейти во вкладку «Визуально»;
2. Добавить изображение стандартным способом, кликнуть по нему;
3. Нажать на кнопку редактирования в появившейся вкладке;
4. Найти и заполнить поле «Атрибут title» в «Параметры изображения» (смотрите скриншоты).
И лишь после этого появится желаемая и многострадальная подпись к картинке.

Во вкладке «Параметры изображения» можно так-же назначать собственный класс к картинке и прочие атрибуты. Как по мне, так быстрее прописать атрибут title и добавить класс к изображению вручную, используя текстовую вкладку в редакторе WordPress.

Автоматический вариант добавления title в редактор WordPress

Конечно, можно добавлять описание к картинке и так, а можно один раз добавить небольшую функцию в файл functions.php , либо в альтернативный файлу функций файл, статья Альтернатива файлу functions.php WordPress , со своими надстройками (для тех, у кого много функциональных изменений советую, чтобы при обновлении темы не слетали изменения).

Как вариант установите специальный плагин Restore Image Title . Плагин не ресурсоъемкий и имеет в себе всего-лишь две функции.

И еще один вариант — путем добавления отрывка кода напрямую в файл functions.php .

Посмотрите на скриншоты. Теперь поле «Заголовок» и будет подписью title к картинке.

Добавляем атрибут title в редактор WordPress для изображений

Для этого откройте файл functions.php и в окончание вставьте данный отрывок кода:

Function lcb_restore_image_title($html, $id) { $attachment = get_post($id); if (strpos($html, "title=")) { return $html; } else { $mytitle = esc_attr($attachment->post_title); return str_replace("

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

Добавляем атрибут title в редактор WordPress для галереи