حل خطای Element style not allowed as child of element body در المنتور و W3C

حل خطای Element style not allowed as child of element body در المنتور و W3C

در مسیر بهینه‌سازی کدهای فنی و سئو تکنیکال (Technical SEO)، یکی از خطاهای بسیار رایج و کلافه‌کننده‌ای که در صفحات طراحی شده با المنتور با آن مواجه می‌شوید، مربوط به جایگذاری اشتباه کدهای CSS در ساختار HTML سایت است.

حتی اگر در تنظیمات المنتور روش بارگذاری CSS را روی «فایل خارجی» قرار داده باشید، باز هم در تست ابزار W3C Validator با خطای قرمز رنگ تگ استایل مواجه خواهید شد.

در این مقاله از سایت سئو ثابت، علت بروز این خطای ساختاری را بررسی کرده و یک راهکار کدنویسی قطعی و مستقل را برای حل آن معرفی می‌کنیم.

متن خطای W3C چیست؟

این خطا معمولاً در گزارش ابزار W3C HTML Validator با متنی شبیه به عبارت زیر ظاهر می‌شود:

Error: Element style not allowed as child of element body in this context.

From line… ... </a><style>/* === elementor css === */ ...

علت بروز این خطا در صفحات المنتوری چیست؟

طبق استانداردهای بنیادی طراحی وب و قوانین HTML5، تگ <style> (که کدهای طراحی و سی‌اس‌اس درون آن قرار می‌گیرند) جزو متادیتای صفحه محسوب می‌شود. جایگاه قانونی و استاندارد این تگ، فقط و فقط درون بخش <head> سایت (در بالاترین قسمت کدهای صفحه) است.

اما مشکل کجاست؟ المنتور برای بارگذاری برخی از استایل‌های داینامیک، تنظیمات پیشرفته ویجت‌ها یا کدهای بهینه‌سازی سرعت بارگذاری، کدهای CSS مربوط به هر بخش را دقیقاً در همان نقطه‌ای که ویجت قرار دارد تزریق می‌کند. این یعنی تگ <style> وسط محتوای اصلی صفحه یا همان تگ <body> قرار می‌گیرد. ربات سخت‌گیر W3C به محض دیدن تگ استایل در بدنه سایت، آن را یک خطای ساختاری بزرگ در نظر گرفته و سایت شما را جریمه می‌کند.

چرا تنظیمات المنتور برای حل این ارور کافی نیست؟

المنتور گزینه‌ای به نام «روش بارگذاری CSS» دارد که آن را روی «فایل خارجی» تنظیم می‌کنیم؛ اما باز هم برای کدهای داینامیک و برخی افزونه‌های جانبی المنتور، کدهای CSS به ناچار به صورت داخلی (Inline) درون لایوت صفحات رندر می‌شوند و راهکار بومی المنتور برای حل ۱۰۰ درصدی آن شکست می‌خورد.

همچنین استفاده از کدهای جاوااسکریپت برای جابجایی تگ‌ها بی‌فایده است؛ چرا که خزنده‌های W3C و موتورهای جستجو کدهای خام خروجی سرور را بررسی می‌کنند و جاوااسکریپت شما را اجرا نخواهند کرد.

راهکار قطعی و نهایی: جابجایی تگ‌های استایل با کد اسنیپت PHP

بهترین و بهینه‌ترین راهکار، اصلاح خروجی کدهای HTML سایت در سمت سرور و درست قبل از ارسال به مرورگر است. این کد اسنیپت به صورت خودکار تمام تگ‌های استایلِ سرکش را از بدنه (<body>) جمع‌آوری کرده و آن‌ها را به مکان استاندارد خود یعنی انتهای تگ <head> منتقل می‌کند.

مراحل اجرا:

  • به پیشخوان وردپرس خود بروید.

  • از طریق افزونه‌های مدیریت کد (مانند WPCode) یک اسنیپت جدید بسازید.

  • نام آن را Move Elementor Inline Styles to Head بگذارید.

  • نوع کد را روی PHP Snippet و حالت اجرا را روی Run snippet everywhere تنظیم کنید.

  • کد زیر را به طور کامل کپی کرده و در باکس مربوطه قرار دهید (می‌توانید از دکمه کپی اختصاصی زیر استفاده کنید):

<?php
/**
 * رفع خطای W3C Validator: انتقال تگ‌های استایل اضافه از body به head در المنتور
 * منتشر شده در سایت سئو ثابت (SeoSabet)
 */

add_action('wp_loaded', 'seosabet_move_styles_fix_start');
function seosabet_move_styles_fix_start() {
    ob_start('seosabet_move_inline_styles_to_head');
}

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

function seosabet_move_inline_styles_to_head($html) {
    if (is_admin() || empty($html)) {
        return $html;
    }

    // پیدا کردن تمام تگ‌های style موجود در بفر صفحه
    $pattern = '/<style\b[^>]*>([\s\S]*?)<\/style>/i';
    
    if (preg_match_all($pattern, $html, $matches)) {
        $styles_block = "";
        
        foreach ($matches[0] as $style_tag) {
            $styles_block .= $style_tag . "\n";
            // حذف استایل از مکان غیرمجاز فعلی در بدنه
            $html = str_replace($style_tag, '', $html);
        }
        
        // تزریق تمام استایل‌های جمع‌آوری شده به انتهای تگ 
        $html = str_replace('</head>', $styles_block . '</head>', $html);
    }
    
    return $html;
}

راهکار قطعی و نهایی: جابجایی تگ‌های استایل با کد اسنیپت PHP

رعایت استانداردهای ساختاری در صفحات وب شاید به طور آنی رتبه گوگل شما را تغییر ندهد، اما کدهای تمیز و ولیدیت شده (Validated HTML) یک سیگنال بسیار قدرتمند از کیفیت ساختار فنی به موتورهای جستجو ارسال می‌کند. ما در سئو ثابت همواره تاکید می‌کنیم که با برطرف کردن این جزئیات، پایداری و بازدهی سئوی سایت خود را تضمین کنید.

اگر در زمان اعتبارسنجی کدهای قالب خود به خطاهای مشابهی برخورد کرده‌اید، نظرات و سوالات خود را در پایین همین صفحه با ما در میان بگذارید.

mehdisabet وب‌سایت
سلام، من محمدمهدی ثابت‌عهد هستم. حدود چهار ساله که در حوزه بازاریابی فعالیت می‌کنم و عاشق دنیای پرهیجان بازاریابی و به خصوص سئو هستم.در این سایت، بیشتر در مورد سئو صحبت خواهیم کرد. هدف من این است که به سئوکاران حرفه‌ای کمک کنم تا دانششان را در این زمینه عمیق‌تر کنند و همچنین به کسب‌وکارها کمک کنم تا درک بهتری از سئو پیدا کنند و بتوانند از آن برای رشد کسب‌وکارشان استفاده کنند.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *