Thêm title bị thiếu khi nhúng iframe video youtube hoặc Google map

Kiến thức về WordPress 10/05/2024 11/05/2024 In trang này

Nếu websie của bạn có nhúng iframe từ video youtube hoặc Google map nếu không có thẻ title thì khi bạn check web trên Google pagespeed và frame or iframe elements do not have a title, dưới đây là code nhanh để bạn fix được lỗi này.

Thẻ Iframe trong HTML là gì?

Thẻ iframe trong html là viết tắt của khung nội tuyến. Phần tử HTML <iframe> phục vụ mục đích nhúng một trang web bên ngoài hoặc một tài liệu HTML hiện tại. Chức năng này cho phép các nhà phát triển hiển thị nội dung từ các trang web hoặc trang web bên ngoài trang web hiện tại, thường là trong một cửa sổ hoặc khung. Điều quan trọng là JavaScript có thể hỗ trợ tương tác giữa nội dung bên trong <iframe> và nội dung của trang web lưu trữ.

Thêm title bị thiếu khi nhúng iframe video youtube hoặc Google map

Nếu thiếu thẻ title trong thẻ <iframe> cũng không sao nhưng bạn thêm title vào để theo quy chuẩn W3C và dưới đây là cách để thêm thẻ title vào <iframe> nếu mã nhúng được chèn vào bài viết và thiếu title

Để fix lỗi frame or iframe elements do not have a title bạn có thể thêm code dưới đây vào file functions.php là được.

//  Add title title to iframe
function vutruso_add_iframe_title($content) {
    $pattern = '/<iframe(.*?)><\/iframe>/i';
    $replacement = '<iframe$1 title="Map/Video"></iframe>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
add_filter('the_content', 'vutruso_add_iframe_title');

Lưu ý code này filter qua bài viết và thêm title vào các mã nhúng iframe, sẽ không fix được lỗi nếu bạn chèn code vào widget nhé, nên nếu bạn chèn map hoặc iframe vào widget thì nên mở ra và add thủ công vào title="Map/Video vào trong thẻ iframe là được.

Ví dụ về cách thêm title vào mã nhúng thủ công

<iframe title="Map" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15674.79718795903!2d106.6379416!3d10.8343084!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x89a4b2c82aae1633!2zVsWpIFRy4bulIFPhu5E!5e0!3m2!1svi!2s!4v1635522955104!5m2!1svi!2s" width="100%" height="700" loading="lazy"></iframe>

Hy vọng mẹo vặt này sẽ giúp ích được cho nhiều người.

Bật lại tính năng tự động load ảnh trong thư viện WordPress
Cách tạo file robots.txt hoàn hảo cho WordPress | Joomla | Drupal | Magento
Tự động hủy đơn hàng WooCommerce sau 1 giờ nếu không thanh toán

Nếu bạn thấy bài viết có ích hãy sao chép link và chia sẻ bài viết
Đã copy
vutruso

Vũ Trụ Số chuyên cung cấp hosting cho WordPress, dịch vụ thiết kế website, quản trị website cho doanh nghiệp, dịch vụ quảng cáo Google, quảng cáo Facebook, các dịch vụ bảo mật website WordPress, tăng tốc website WordPress

Bài viết liên quan