حل خطای Bad value listitem برای تگ article در المنتور و W3C
در فرآیند بهینهسازی کدهای فنی سایت یا همان سئو تکنیکال (Technical SEO)، یکی از بهترین کارهایی که یک متخصص سئو میتواند انجام دهد، بررسی و تایید کدهای خروجی سایت در ابزار استانداردسنجی وب یعنی W3C Validator است. با این حال، گاهی اوقات افزونههای محبوبی مثل المنتور، در کنار تمام امکانات فوقالعادهشان، کدهایی تولید میکنند که با استانداردهای سختگیرانه وب همخوانی ندارند.
یکی از این خطاهای رایج که معمولاً در ویجتهای پستهای المنتور (Elementor Posts) یا لوپ گرید (Loop Grid) رخ میدهد، خطای مربوط به استفاده همزمان از تگ و ویژگی role=”listitem” است.
در این مقاله از سایت سئو ثابت، بررسی میکنیم که چرا W3C به این ساختار ایراد میگیرد و چطور میتوانید با یک کد اسنیپت (Code Snippet) اختصاصی و کاملاً مستقل، این مشکل را در سمت سرور حل کنید.
متن خطای W3C چیست؟
این خطا معمولاً با متنی شبیه به عبارت زیر در گزارش W3C HTML Validator ظاهر میشود:
Error: Bad value listitem for attribute role on element article.
From line…
...<article class="elementor-post ... post type-post ..." role="listitem">...
علت بروز این خطا در المنتور چیست؟
برای درک این خطا، باید کمی با مفاهیم HTML معنایی (Semantic HTML) و استاندارد دسترسیپذیری وب آشنا باشیم.
تگ <article> در HTML5 یک المان بسیار قدرتمند و مستقل است. این تگ به موتورهای جستجو و ابزارهای صفحهخوان میگوید: «محتوای درون من، یک بخش کاملاً مستقل و باارزش (مثل یک مقاله، یک محصول یا یک خبر) است.»
اما المنتور در کدهای خود، وقتی مقالات را به صورت شبکهای (Grid) نمایش میدهد، تگهای <article> را درون یک لیست قرار میدهد و به هر کدام از آنها ویژگی role="listitem" (به معنای نقش: آیتمی از یک لیست) را اضافه میکند.
طبق قوانین سختگیرانه W3C، تگ <article> خودش یک بخش مستقل و باارزش محتوایی است و نباید نقش آن را به یک آیتمِ لیستِ ساده (listitem) تنزل داد! این کار از نظر معنایی غلط است؛ زیرا هویت مستقل تگ اِرتیکال را در ساختار درختی کدهای صفحه تضعیف میکند. همین تداخل معنایی باعث میشود که ابزار W3C به سایت شما ارور قرمز رنگ بدهد.
راهکار قطعی: اصلاح خروجی HTML در سمت سرور با PHP
هترین و بهینهترین راهکار این است که قبل از ارسال کدهای HTML به مرورگر و رباتهای بررسی، ویژگی اشتباه role="listitem" را دقیقاً از تگهای <article> حذف کنیم. با این کار، تگهای مقاله هویت اصلی و استاندارد خود را حفظ میکنند.
مراحل اجرا:
وارد پیشخوان وردپرس خود شوید.
از مسیر المنتور > کدهای سفارشی (یا افزونههای مدیریت اسنیپت مثل WPCode) یک اسنیپت جدید بسازید.
نام آن را مثلاً Fix Elementor Post Article Role Error بگذارید.
نوع کد را روی PHP Snippet و حالت اجرا را روی Run snippet everywhere (اجرا در همه جا) قرار دهید.
باکس کد زیر را کپی کرده و درون آن قرار دهید (میتوانید از دکمه کپی اختصاصی زیر استفاده کنید):
<?php
/**
* رفع خطای W3C Validator: حذف ویژگی اشتباه role="listitem" از تگ article در المنتور
* منتشر شده در سایت سئو ثابت (SeoSabet)
*/
// فعال کردن بفر برای اصلاح خروجی کدهای HTML قبل از ارسال به مرورگر
add_action('wp_loaded', 'seosabet_article_role_fix_start');
function seosabet_article_role_fix_start() {
ob_start('seosabet_clean_article_role_html');
}
add_action('shutdown', 'seosabet_article_role_fix_end');
function seosabet_article_role_fix_end() {
if (ob_get_length() > 0) {
ob_end_flush();
}
}
function seosabet_clean_article_role_html($html) {
if (is_admin()) {
return $html;
}
// حذف ویژگی اشتباه role="listitem" که به تگ article در ویجت پستهای المنتور چسبیده است
$pattern = '/<article([^>]*?)\s+role="listitem"([^>]*?)>/i';
$html = preg_replace($pattern, '<article$1$2>', $html);
return $html;
}پس از ذخیره اسنیپت، حتماً باید کش سایت خود را کاملاً پاک کنید. اگر از افزونههایی مانند WP Rocket، LiteSpeed Cache یا کلوپفلاور/ابرآروان استفاده میکنید، گزینه Clear Cache / Purge All را بزنید تا خروجیهای بهینهسازی شده و جدید سرور جایگزین کدهای قبلی شوند.
حالا اگر آدرس صفحه خود را دوباره در ابزار W3C Validator تست کنید، خواهید دید که این خطای کلافهکننده نیز کاملاً برطرف شده و چراغ سبز استاندارد وب برای بخش وبلاگ شما روشن میشود.
جمعبندی
رفع خطاهای ساختاری قالب نه تنها باعث ارتقای رتبه فنی سایت شما میشود، بلکه به خزندههای گوگل کمک میکند تا محتوای صفحات شما را با درک معنایی بهتری ساختاردهی و ایندکس کنند. ما در سئو ثابت معتقدیم که تفاوت یک سایت معمولی با یک سایت کاملاً بهینهشده، در همین جزئیات و رعایت ریزهکاریهای سئو تکنیکال است.
اگر شما هم در زمان اعتبارسنجی کدهای قالب خود با خطاهای مشابهی در المنتور مواجه شدهاید، سوالات و تجربیات خود را در بخش نظرات با ما به اشتراک بگذارید!
