Skip to content

Всё для WordPress, веб-разработки — и не только

⚡ Как добавить подпись к изображениям в WordPress: полное руководство

⚡ Как добавить подпись к изображениям в WordPress: полное руководство

Картинка без подписи, как титр в немом кино: зритель вроде смотрит, но половину смысла додумывает сам. А когда вы ведёте блог на WordPress, подпись к изображению работает сразу на трёх фронтах: удерживает читателя, даёт поисковикам контекст и закрывает требования accessibility.

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

💡 Быстрый обзор:

  • Открываете пост в Gutenberg, вставляете блок «Изображение», под картинкой сразу появляется поле «Подпись»
  • Для галереи кликаете по каждому кадру внутри блока и заполняете подпись отдельно для каждого изображения
  • В классическом редакторе подпись задаётся в правой панели при вставке через «Добавить медиафайл»
  • Подпись из медиабиблиотеки автоматом подтягивается во все посты, где использовано изображение, экономит время при повторном использовании

Что такое подпись к изображению и зачем она нужна

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

Для SEO подпись ценна тем, что поисковики сканируют текст в непосредственной близости от <img> как релевантный контекст. Исследования показывают: страницы с осмысленными подписями к изображениям в среднем получают больше трафика из Google Images, чем страницы с «голыми» картинками.

С точки зрения accessibility (WCAG 2.2) caption дополняет alt-текст: alt описывает содержимое картинки для незрячего пользователя, а caption объясняет значение, почему эта картинка здесь и какой вывод из неё сделать. Вместе они закрывают два разных пользовательских сценария.

Добавляем подпись в редакторе Gutenberg

Gutenberg, редактор блоков, который стал стандартом WordPress с версии 5.0. Если вы зашли в админку и видите плюсик в чёрном квадрате слева от текста, вы в Gutenberg.

Пошагово:

  • Откройте пост или страницу на редактирование.
  • Нажмите на иконку «+» (добавить блок) в тулбаре или прямо в теле поста.
  • Выберите блок «Изображение».
  • Загрузите картинку с компьютера или выберите из медиабиблиотеки.
  • Сразу после вставки под изображением появится серое поле с текстом «Добавить подпись». Кликните по нему и введите текст.
Поле подписи под изображением в редакторе Gutenberg

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

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

Подписи в галерее Gutenberg

Блок «Галерея» работает иначе: каждое изображение внутри галереи, это отдельный элемент со своей подписью. Добавляются они не массово, а по одному.

  • Добавьте блок «Галерея» через «+».
  • Выберите изображения (можно несколько сразу через Ctrl+клик).
  • После вставки кликните по первому кадру галереи, под ним появится поле «Добавить подпись к изображению».
  • Введите текст, перейдите к следующему кадру, повторите.
  • Сохраните пост.

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

Подпись через классический редактор

Если на вашем сайте установлен плагин Classic Editor или вы работаете со старой версией WordPress (ниже 5.0), интерфейс отличается.

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

Для галереи в классическом редакторе последовательность та же: «Добавить медиафайл» → «Создать галерею» → выбрать изображения → кликнуть по каждому и заполнить подпись в правой панели → «Вставить галерею».

Подпись через медиабиблиотеку: метод «один раз, везде»

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

  • В админке перейдите: Медиафайлы → Библиотека.
  • Кликните по нужному изображению, откроется окно «Сведения о вложении».
  • Заполните поле «Подпись».
  • Сохраните (изменения применяются сразу, без отдельной кнопки «Обновить»).

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

SEO и accessibility: как подписи влияют на ранжирование

Поисковые системы не «видят» картинку, они читают текст вокруг неё. Подпись находится ближе всего к тегу <img> в HTML-разметке и потому имеет повышенный вес для Google Images. Практический вывод: если в подписи есть ключевое слово, релевантное запросу, шансы попасть в блок изображений на первой странице выдачи растут.

Для accessibility подпись закрывает сценарий, который не покрывает alt-текст. Alt говорит: «фотография кота на клавиатуре». Caption говорит: «Кот, спящий на клавиатуре, частая причина случайных публикаций черновиков». Первое описывает картинку, второе, её смысл в контексте статьи. Пользователь скринридера получает оба слоя и понимает не только что на картинке, но и зачем она здесь.

Если ваша тема WordPress не выводит подписи под изображениями, проверьте functions.php темы. За вывод caption отвечает параметр caption в функции wp_get_attachment_image(). Большинство современных тем (GeneratePress, Astra, Kadence, Blockbase) поддерживают подписи «из коробки».

Короткое видео выше показывает оба основных метода (блок и медиабиблиотека) в действии. Если вы лучше воспринимаете информацию визуально, двухминутный просмотр закроет все вопросы по интерфейсу.

⁉️🤔 Частые вопросы

Чем подпись отличается от alt-текста?

Подпись видна всем посетителям и выводится под картинкой. Alt-текст, атрибут HTML, который отображается только при ошибке загрузки изображения и считывается скринридерами. Первый нужен для контекста и SEO, второй, для accessibility и валидации кода. В идеале они дополняют друг друга, а не дублируют: alt описывает содержимое, caption объясняет значение.

Можно ли добавить подпись к уже опубликованному изображению без перевыпуска поста?

Да, через медиабиблиотеку: Медиафайлы → Библиотека → клик по изображению → поле «Подпись». Изменение подхватится во всех постах, где это изображение вставлено через стандартный механизм WordPress. Если изображение вставлено как статический HTML (через Custom HTML-блок), подпись не обновится, придётся править вручную.

Подписи индексируются Google как отдельный контент?

Да. Текст подписи находится внутри <figcaption> (в Gutenberg) и является частью DOM-дерева страницы. Google расценивает его как релевантный текстовый контент, особенно для поиска по картинкам. Однако вес подписи ниже, чем у основного текста и заголовков, используйте её как вспомогательный, а не основной SEO-инструмент.

Как убрать подпись под изображением, если тема добавляет её автоматически?

Два пути. Быстрый: просто оставьте поле «Подпись» пустым, WordPress не выведет <figcaption> без содержимого. Глобальный: добавьте в Additional CSS (Внешний вид → Настроить → Дополнительные стили) правило .wp-block-image figcaption { display: none; }, это скроет все подписи на сайте разом. Если нужно убрать подписи только в галереях, замените селектор на .wp-block-gallery figcaption.

Влияет ли длина подписи на ранжирование?

Напрямую нет, но косвенно, да. Подпись длиннее 2-3 строк на мобильном экране обрезается или схлопывается (зависит от темы). Пользователь, не получивший информацию быстро, уходит, а поведенческие факторы (время на странице, pogo-sticking) поисковики учитывают. Оптимальная длина, 10-25 слов: достаточно для контекста, мало для визуального шума.

Стоит ли добавлять подписи к чисто декоративным изображениям?

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

Когда подпись обязательна, а когда, лишняя

Короткий чек-лист на засыпку:

Всегда добавляйте подпись:

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

Не добавляйте подпись:

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

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

Подписи к изображениям, не «фишка на любителя», а базовая гигиена контента. Gutenberg сделал процесс тривиальным (клик под картинкой → текст → готово), а медиабиблиотека позволяет один раз заполнить подпись и забыть. Если вы ведёте блог на WordPress и до сих пор оставляете поле «Добавить подпись» пустым, выделите 10 минут и пройдитесь по последним постам: пара осмысленных фраз под каждым скриншотом даст больше, чем ещё один абзац текста.

Если тема не выводит подписи или вы хотите кастомизировать их внешний вид, загляните в наш гайд по редактору Gutenberg: там разбираем работу с блоками на глубоком уровне, включая CSS-кастомизацию стандартных блоков. А если зашли в тупик с конкретной темой, пишите в комментариях, разберёмся.