WooCommerce: решение проблем с невалидными атрибутами и тегами для корректного SEO

Диагностика проблемы невалидных атрибутов и тегов в WooCommerce

Часто при использовании WooCommerce стандартные шаблоны выводят HTML с нестандартизированными атрибутами или лишними тегами, например, type="button" на ссылках или пустые class, которые негативно влияют на SEO и валидность кода по стандартам W3C. Это проявляется в ошибках при проверке валидаторами (https://validator.w3.org/) и ухудшает индексацию товаров поисковыми системами.

Для проверки используйте валидатор W3C и инструменты разработчика в браузере, чтобы найти невалидные атрибуты и теги в HTML-коде страниц товаров и категорий.

Пошаговое решение: удаление и исправление невалидных атрибутов

1. Удаление невалидных атрибутов с помощью фильтров WooCommerce

WooCommerce генерирует кнопки «Добавить в корзину» и другие элементы с атрибутами, которые можно скорректировать через хуки. Например, убрать type="button" с ссылок и очистить пустые атрибуты:

add_filter('woocommerce_loop_add_to_cart_link', 'clean_add_to_cart_link_attributes', 10, 2);
function clean_add_to_cart_link_attributes($html, $product) {
    // Удаляем type="button" из тега <a>
    $html = preg_replace('/\s*type="button"/', '', $html);
    // Убираем пустые class=""
    $html = preg_replace('/class="\s*"/', '', $html);
    return $html;
}

2. Очистка лишних тегов из описания товара

Иногда в описании товара появляются лишние теги, например, пустые <span> или <div>. Для их удаления можно использовать фильтр the_content с регулярными выражениями:

add_filter('the_content', 'remove_empty_tags_from_content');
function remove_empty_tags_from_content($content) {
    // Удаляем пустые span и div
    $content = preg_replace('/<(span|div)([^>]*)>\s*<\/\1>/i', '', $content);
    return $content;
}

Проверка результата после внедрения

1. Обновите страницу товара и откройте исходный код (Ctrl+U или Cmd+U). Проверьте, что атрибут type="button" отсутствует в ссылках.

2. Запустите проверку валидатора W3C для страницы товара — ошибок связанных с невалидными атрибутами и пустыми тегами должно стать значительно меньше или не быть.

3. Убедитесь, что функционал кнопок и других элементов не сломался. Проверьте, что кнопки «Добавить в корзину» работают корректно.

Частые ошибки и как их исправить

• Регулярные выражения удаляют нужные атрибуты: будьте аккуратны с паттернами, тестируйте на копии сайта.
• Изменения ломают JS-события: удаление атрибута type="button" с кнопок, если это кнопки <button>, может сломать скрипты. Применяйте только к ссылкам.
• Пустые теги появляются из-за редакторов: в визуальном редакторе WordPress или сторонних плагинах иногда создаются лишние теги. Рекомендуется чистить контент перед публикацией или использовать плагин Clearfy для автоматической оптимизации.

Практические советы по SEO и производительности

• Используйте Clearfy Pro (https://wpshop.ru/plugins/clearfy?utm_source=wpsource.ru&utm_medium=article&utm_campaign=woocommerce-reshenie-problem-s-nevalidnymi-atributami-i-t-egami-dlya-seo) для автоматической очистки HTML и удаления дублирующего SEO-контента.
• Регулярно проверяйте валидность сайта в валидаторе и исправляйте ошибки, чтобы избежать проблем с ранжированием.
• Минимизируйте лишний HTML-код, особенно в части кнопок и ссылок — это ускорит загрузку страниц.

Сравнение способов очистки HTML WooCommerce