В этой статье мы рассмотрим очень простой код, который, тем не менее, позволяет улучшить оптимизацию вашего сайта для поисковых систем. Поскольку над данным вопросом владельцы сайтов начинают задумываться, как правило, после того, как сайт уже сверстан и выложен в сеть, разработчикам приходится искать именно простой код для готовой темы WordPress уже после того, как все файлы готовы.
Изображения в статьях любого сайта, как правило оформляют тот контент, который является содержимым данной статьи (страницы). С 5-й версии в редакторе блоков WordPress изображение добавляется с внутри тега <figure>. Разметка в этом случае представляет собой примерно следующее:
Однако с точки зрения SEO-продвижения вашего блога/сайта по картинкам, такой подход не всегда лучше, т.к. изображение внутри <figure> воспринимается, как индивидуальный контент, а не как относящееся к контексту вашей статьи (видео по теме). Поэтому имеет смысл заменить <figure> на обычный <div>, как и тег <figcaption>, который появится там, где вы добавили подпись к изображению.
Кроме того, внутри любого тега <img> имеет смысл добавить такой атрибут, как decoding="async", который позволяет ускорить рендеринг страницы за счет того, что рендеринг всей страницы и декодирование загруженного с сервера изображения выполняются параллельно (асинхронно) . А это, безусловно влияет на скорость загрузки сайта и на показатели этой загрузки в PageSpeed Insights. Атрибут loading="lazy", который выполняет "ленивую" загрузку изображений, в теге <img> в WordPress существует "из коробки".
Поскольку мы работаем с контентом страницы/записи WordPress, то и замену будем производить, воспользовавшись хук-фильтром WP the_content() и php-функцией str_replace():
| 1 2 3 4 5 6 7 8 | add_filter( 'the_content', function( $content ){ $content = str_replace("<figure", "<div", $content); $content = str_replace("</figure>", "</div>", $content); $content = str_replace("<figcaption", "<div", $content); $content = str_replace("</figcaption>", "</div>", $content); $content = str_replace("<img", '<img decoding="async" ', $content); return $content; }); |
Результат будет таким:
Если у вас на сайте есть фотогаллерея, то и в ней произойдет замена тегов.
Если вам необходимо, чтобы div-обертка и подпись к картинке форматировалась каким-то особым классом, замените тег <figure> на <div class="article-img">, а тег <figcaption> на <div class="img-descr"> или любые другие таким образом:
| 1 2 3 4 5 6 7 8 | add_filter( 'the_content', function( $content ){ $content = str_replace("<figure", '<div class="article-img"', $content); $content = str_replace("</figure>", "</div>", $content); $content = str_replace("<figcaption", '<div class="img-descr"', $content); $content = str_replace("</figcaption>", "</div>", $content); $content = str_replace("<img", '<img decoding="async" ', $content); return $content; }); |
Разметка изменится. Можно задавать свои стили для назначенных классов.
