Удаление невалидных атрибутов и тегов из WooCommerce HTML для улучшения SEO

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

При кастомизации WooCommerce или использовании сторонних плагинов и тем в HTML-коде страниц товаров и корзины могут появляться лишние или невалидные атрибуты и теги. Это приводит к ошибкам в валидаторах W3C, ухудшает SEO и может вызвать проблемы с отображением на разных устройствах и браузерах.

Типичные источники таких проблем:

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

Как выявить невалидные теги и атрибуты в WooCommerce

Для точной диагностики используйте следующие инструменты:

• W3C Validator: онлайн-сервис https://validator.w3.org/ – проверяет любую страницу сайта на валидность HTML.
• Инструменты разработчика браузера: во вкладке Elements можно визуально проверить структуру и атрибуты элементов.
• Плагины для WordPress, например, Debug Bar или Query Monitor – помогут отследить генерируемый HTML.

Запустите проверку на странице товара WooCommerce и обратите внимание на предупреждения по нестандартным атрибутам, например, data-something, не закрытые теги или теги, которые не должны использоваться внутри определенных блоков.

Пошаговое решение: как убрать невалидные атрибуты и теги из WooCommerce

1. Отключаем вывод лишних атрибутов через хуки

WooCommerce и темы часто используют фильтры для добавления атрибутов. Чтобы убрать невалидные, можно использовать фильтр woocommerce_product_get_attributes или woocommerce_product_get_data, в зависимости от задачи.

add_filter('woocommerce_product_get_attributes', function($attributes, $product) {
    foreach ($attributes as $key => $attribute) {
        // Удаляем атрибуты с ключами, которые не нужны или невалидны
        if (strpos($key, 'invalid_') !== false) {
            unset($attributes[$key]);
        }
    }
    return $attributes;
}, 10, 2);

2. Фильтрация вывода HTML через буферизацию

Если атрибуты добавляются непосредственно в HTML, можно применить буферизацию вывода и функцию preg_replace_callback для удаления нежелательных тегов или атрибутов:

add_action('template_redirect', function() {
    ob_start(function($buffer) {
        // Удаляем все атрибуты data-invalid и теги <font>
        $buffer = preg_replace('/\sdata-invalid="[^"]*"/i', '', $buffer);
        $buffer = preg_replace('/<font[^>]*>|<\/font>/i', '', $buffer);
        return $buffer;
    });
});

add_action('shutdown', function() {
    if (ob_get_length()) ob_end_flush();
});

3. Корректируем шаблоны темы

Если атрибуты или теги добавляются в файлах темы, исправьте их, удалив лишний HTML или заменив на корректный. Например, в файле woocommerce/single-product/product-image.php проверьте, нет ли лишних тегов вокруг изображений.

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

• Запустите повторно W3C Validator по URL страницы товара – ошибок по невалидным тегам и атрибутам не должно быть.
• В браузере откройте Инспектор кода, убедитесь что лишние атрибуты, например, data-invalid, и теги <font> отсутствуют.
• Проверьте отображение сайта на мобильных и десктопных устройствах, чтобы убедиться, что визуально все корректно.

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

• Ошибка: Использование preg_replace без проверки шаблона приводит к удалению нужных атрибутов.
  Исправление: Используйте preg_replace_callback с проверкой или конкретные селекторы CSS для фильтрации.
• Ошибка: Буферизация вывода конфликтует с другими плагинами кэширования.
  Исправление: Отключайте буферизацию в кэш-плагинах или используйте хуки с приоритетом, чтобы избежать конфликтов.
• Ошибка: Изменения в шаблонах темы удаляются при обновлении.
  Исправление: Создавайте дочернюю тему и в ней вносите правки.

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

• Избегайте использования eval() и небезопасных регулярных выражений при фильтрации HTML.
• Кэшируйте результаты фильтрации вывода, чтобы не перегружать сервер при каждом запросе.
• Проверяйте обновления WooCommerce и плагинов – возможно, проблема с невалидным HTML уже исправлена в новых версиях.
• Используйте Clearfy Pro для автоматического удаления дублирующего и невалидного кода, если хотите ускорить работу сайта без ручных правок (https://wpshop.ru/plugins/clearfy?utm_source=wpsource.ru&utm_medium=article&utm_campaign=kak-udalit-invalidnye-atributy-i-tagi-iz-woocommerce-html).