Romkin blog

Тестовая статья

Это статья создана для проверки работы компонента BlogImage и SEO‑метаданных.

Проверка изображения

Ниже — тестовое изображение с полным набором параметров.

Описание изображения для SEO
Рис. 1. Пример первой картинки

Что проверяется

  1. Отображение изображения
    • картинка должна загрузиться по указанному URL;
    • она должна быть адаптивной (шириной 100 % контейнера);
    • у неё должны быть скруглённые углы и тень (по стилям компонента).
  2. Альтернативный текст (alt)
    • откройте код страницы (F12) и убедитесь, что в <img> есть атрибут alt="Описание изображения для SEO";
    • это важно для SEO и доступности.
  3. Всплывающая подсказка (title)
    • при наведении курсора на изображение должна появиться подсказка с текстом «Подсказка при наведении на логотип».
  4. Подпись (caption)
    • под изображением должен быть текст «Рис. 1. Пример первой картинки» серым курсивом;
    • подпись должна быть центрирована.
  5. SEO‑метаданные
    • в <head> страницы должны быть:
      • <title>Тестовая статья — проверка компонентов - romkin.blog</title>;
      • <meta name="description" content="Статья создана для тестирования компонента BlogImage...">;
      • OG‑теги (og:title, og:description, og:image).

Дополнительные тесты

Проверка заглушки

Если указать неверный URL, должна отобразиться заглушка.

Изображение не загружено
Рис. 1. Пример первой картинки

Проверка короткого синтаксиса

Простой вариант без подписи:

Простой логотип

Заключение

Эта статья позволяет проверить:

  • корректность работы shortcode ::BlogImage;
  • передачу всех пропсов (включая caption и title);
  • отображение заглушки при отсутствие src;
  • SEO‑метаданные (заголовок, описание, OG‑теги).

Если всё работает, значит:

  • компонент BlogImage настроен верно;
  • shortcode парсится правильно;
  • мета‑данные подставляются из фронтматтера.