حذف Trailing slash

زمانی که شما در سایت w3c سایت خود را بررسی می کنید می بینید که خطاهای سبز رنگی به نام info  مشاهده می کنید که برای حذف Trailing slash on void elements شما می توانید به دو صورت آن را حذف و از آن خلاص شوید

حذف Trailing slash

توجه کنید که رفع این خطا برای گوگل و سئو مناسب است

اضافه کردن Trailing Slash  از نظر فنی اشتباه نیست، اما طبق استاندارد HTML توصیه نمی شود. در واقع، برخی از ابزارهای اعتبارسنجی HTML ممکن است برای این کار هشدار دهند.

بهترین راه برای اطمینان از عدم وجود Trailing Slash، نوشتن صحیح تگ ها بدون آن است

قالب یا سیستم  که این خطاها را در قالب هایی با خروجی ثابت دارید مثل HTML  بهتر است اسلش را حذف نمایید برای مثال کد زیر را دارید :

<img src="img/logo.png" alt="logo" class="supplogo" />

کد بالا یعنی داشتن خطاهای زیر اسلش را حذف کنید

<img src="img/logo.png" alt="logo" class="supplogo">

بعد از حذف این کدها چنین نتیجه ای را خواهید داشت

 

 

خوب این برای قالب های استاتیک یا کد های ثابت است . اگر این اتفاق برای سایت وردپرسی شما بیفتد چه باید کنید ؟

به دو صورت می توانید Trailing slash on void elements را حذف کنید

می توانید کد زیر را در فانکشن قرار داده و به راحتی مشکل خود را رفع کنید

function remove_trailing_slashes_from_void_elements($buffer) { 
    $pattern = '/<((?:img|br|hr|input|meta|link|base|area|col|embed|keygen|source|track|wbr)[^>]*?)\s*\/>/';
    $replacement = '<$1>'; 
    return preg_replace($pattern, $replacement, $buffer);
}
function start_output_buffering() {
    ob_start('remove_trailing_slashes_from_void_elements');
}
function end_output_buffering() {
    if (ob_get_level()) {
        ob_end_flush();
    }
}
add_action('template_redirect', 'start_output_buffering');
add_action('shutdown', 'end_output_buffering');

اگر دوست دارید که با افزونه این کار را کنید می توانید از یکی از لینک های زیر افزونه را دانلود کنید

دانلود از گیت هاب

انجمن رفع اشکال و اعلام باگ

کاربر عزیز اگر افزونه برای شما مشکلی داشت یا باگی در افزونه پیدا نمودید در انجمن پنگاش  با ما در میان بگذارید و

 

 

---

A trailing slash on void elements in HTML refers to the forward slash (/) added at the end of the element’s opening tag. While technically not wrong, it’s unnecessary and goes against HTML recommendations

Here’s a breakdown

Void Elements

These are HTML tags that represent self-contained elements and don’t have any content between opening and closing tags. Examples include

• <br> (line break)
• <hr> (horizontal rule)
• <img> (image)
• <input> (form input)
• <link> (external resource link)
• <meta> (metadata)

Trailing Slash

This is the forward slash (/) you might see at the end of an element’s opening tag. For void elements, it’s optional and serves no purpose.

Why Avoid Trailing Slash?

• Standards: HTML standards recommend omitting the trailing slash for void elements
• Clarity: Cleaner code without unnecessary characters makes it easier to read and maintain
• Validation: Some HTML validators might throw warnings for trailing slashes in void elements
• Potential Issues: In rare cases, depending on parsing or legacy systems, a trailing slash might cause unexpected behavior

How to Write Void Elements Correctly.

Always omit the trailing slash when writing void elements. Here’s the correct format.

<br>
<hr>
<img src="image.jpg" alt="Image description">
<input type="text" name="username">
<link rel="stylesheet" href="style.css">
<meta name="description" content="Website description">

 

Removing Trailing Slashes:

• Manual: If you have existing HTML code with trailing slashes, you can manually remove them using a text editor.
• Search & Replace: Many editors offer search and replace functionality where you can find all instances of element/ and replace them with element.
• Tools: Online tools or plugins for your code editor might help automate the removal process.

code :

function remove_trailing_slashes_from_void_elements($buffer) { 
    $pattern = '/<((?:img|br|hr|input|meta|link|base|area|col|embed|keygen|source|track|wbr)[^>]*?)\s*\/>/';
    $replacement = '<$1>'; 
    return preg_replace($pattern, $replacement, $buffer);
}
function start_output_buffering() {
    ob_start('remove_trailing_slashes_from_void_elements');
}
function end_output_buffering() {
    if (ob_get_level()) {
        ob_end_flush();
    }
}
add_action('template_redirect', 'start_output_buffering');
add_action('shutdown', 'end_output_buffering');

plugin :

DOWNLOAD

Remember

Omitting the trailing slash for void elements is a best practice for clean, standards-compliant HTML code.