Hướng dẫn chuyển ảnh về định dạng Webp hay AVIF

Bạn nên cài đặt bộ plugin Performance Lab và trong đó có 1 plugin chuyển đổi image thành Webp hay Avif plugin đó có tên là: Modern Image Formats khi active plugin thì bạn vào phần:

Settings > Media, tại mục Image out format: bạn chọn WebP or AVIF

Tuy nhiên khi dùng plugin yoatSEO thì phần thẻ og:image cũng sẽ sử dụng định dạng webp, điều này dẫn đến việc khi chia sẻ bài viết qua facebook, zalo… sẽ bị lỗi ảnh, đoạn code sau sẽ khắc phục vấn đề này:

Trong file functions.php, bạn thêm đoạn mã sau vào cuối file:

add_filter( 'wpseo_frontend_presenter_classes', 'custom_yoast_og_image_presenter', 10, 1 );
function custom_yoast_og_image_presenter( $presenters ) {
    require_once get_stylesheet_directory() . '/class-custom-og-image-presenter.php';
    foreach ( $presenters as $key => $presenter ) {
        if ( $presenter === \Yoast\WP\SEO\Presenters\Open_Graph\Image_Presenter::class ) {
            $presenters[$key] = \MyTheme\Yoast\Custom_OG_Image_Presenter::class;
        }
    }
    return $presenters;
}

Trong thư mục theme bạn hãy tạo thêm file có tên class-custom-og-image-presenter.php và dán vào đoạn mã bên dưới:

<?php
namespace MyTheme\Yoast;

use Yoast\WP\SEO\Presenters\Open_Graph\Image_Presenter;

class Custom_OG_Image_Presenter extends Image_Presenter {

    public function present() {
        $images = $this->get();

    if ( empty( $images ) ) {
      return '';
    }  
              
        if ( is_singular( 'product' ) && has_post_thumbnail() ) {
            $image = $images[0]['url'];
            if ( !empty( $image ) ) {
                $attachment_id = get_post_thumbnail_id();

                $metadata = wp_get_attachment_metadata( $attachment_id ); 

                if ( isset( $metadata['original_image'] ) && is_string( $metadata['original_image'] ) && '' !== $metadata['original_image'] ) {
                    $image = str_replace( basename( $image ), $metadata['original_image'], $image );
                    return '<meta property="og:image" content="' . esc_url( $image ) . '" />';
                }
            }
        }

        // fallback: giữ nguyên của Yoast
        return parent::present();
    }
}

Sau khi thêm đoạn code trên thì bạn kiểm tra lại thẻ og:image đã được cập nhật hay chưa nếu đã cập nhật về định dạng ban đầu bạn tải lên là đã đúng!