Ảnh đại Diện Trong Thẻ Meta Open Graph Chia Sẽ Lên Các Mạng Xã Hội

Để tùy chỉnh ảnh đại diện (thumbnail) khi chia sẻ bài viết từ WordPress lên các mạng xã hội như Zalo hoặc Facebook, bạn cần sử dụng thẻ meta Open Graph và các công cụ tương tự. Đây là hướng dẫn chi tiết để thực hiện:

Thêm thẻ Open Graph vào trang WordPress

Ảnh đại diện trong thẻ Meta Open Graph chia sẽ lên các mạng xã hội

Thẻ Open Graph (OG) giúp các mạng xã hội như Facebook, Zalo hiểu rõ hơn nội dung của trang, bao gồm tiêu đề, mô tả và ảnh đại diện khi chia sẻ.

Thêm đoạn mã sau vào file functions.php của theme hoặc child theme:

function custom_meta_og_tags() {
    if (is_single() || is_page()) {
        global $post;

        // Lấy ảnh đại diện (thumbnail)
        $thumbnail_url = get_the_post_thumbnail_url($post->ID, 'full');
        if (!$thumbnail_url) {
            // Ảnh mặc định nếu bài viết không có thumbnail
            $thumbnail_url = get_stylesheet_directory_uri() . '/default-thumbnail.jpg'; // Đường dẫn ảnh mặc định
        }

        // Lấy tiêu đề và mô tả bài viết
        $title = get_the_title($post->ID);
        $description = get_the_excerpt($post->ID);

        // In ra thẻ meta Open Graph
        echo "
        <meta property='og:title' content='" . esc_attr($title) . "' />
        <meta property='og:description' content='" . esc_attr($description) . "' />
        <meta property='og:image' content='" . esc_url($thumbnail_url) . "' />
        <meta property='og:url' content='" . esc_url(get_permalink($post->ID)) . "' />
        <meta property='og:type' content='article' />
        ";
    }
}
add_action('wp_head', 'custom_meta_og_tags');

function custom_meta_og_tags() {

if (is_single() || is_page()) {

global $post;

// Lấy ảnh đại diện (thumbnail)

$thumbnail_url = get_the_post_thumbnail_url($post->ID, 'full');

if (!$thumbnail_url) {

// Ảnh mặc định nếu bài viết không có thumbnail

$thumbnail_url = get_stylesheet_directory_uri() . '/default-thumbnail.jpg'; // Đường dẫn ảnh mặc định

}

// Lấy tiêu đề và mô tả bài viết

$title = get_the_title($post->ID);

$description = get_the_excerpt($post->ID);

// In ra thẻ meta Open Graph

echo "

}

add_action('wp_head', 'custom_meta_og_tags');

Cách hoạt động của đoạn mã

Lấy thông tin bài viết:

Tiêu đề (og:title): Lấy tiêu đề của bài viết hiện tại.
Mô tả (og:description): Lấy nội dung tóm tắt (excerpt) của bài viết.
Ảnh đại diện (og:image): Lấy ảnh thumbnail của bài viết. Nếu bài viết không có ảnh, sử dụng ảnh mặc định.
URL (og:url): Lấy đường dẫn URL bài viết.

Ảnh mặc định:
Thêm một ảnh mặc định (nếu bài viết không có thumbnail). Đảm bảo ảnh này tồn tại trong thư mục theme của bạn.

Định dạng ảnh đại diện

Các mạng xã hội có các yêu cầu khác nhau về kích thước ảnh đại diện:

Facebook: Kích thước tối thiểu 1200×630 px, tỷ lệ 1.91:1.
Zalo: Hỗ trợ cả tỷ lệ 1:1 và 1.91:1.

Hãy đảm bảo ảnh đại diện (thumbnail) tuân thủ kích thước này để hiển thị đẹp mắt.

Xem thêm bài viết khác

Xóa bộ nhớ đệm trên Facebook (nếu cần)

Facebook thường lưu trữ nội dung cũ của bài viết. Nếu bạn cập nhật ảnh đại diện mà Facebook không hiển thị đúng:

Truy cập Facebook Sharing Debugger.
Nhập URL bài viết và nhấn “Debug”.
Nhấn nút “Scrape Again” để cập nhật thông tin.

Kiểm tra kết quả trên các mạng xã hội

Chia sẻ URL bài viết lên Facebook, Zalo hoặc các mạng xã hội khác để kiểm tra hiển thị.

Nếu ảnh không hiển thị đúng, hãy kiểm tra mã nguồn trang (Ctrl+U) để chắc chắn các thẻ Open Graph đã được thêm chính xác.

Tùy chỉnh thêm (Tùy chọn)

Nếu bạn muốn thêm các mạng xã hội khác (Twitter, LinkedIn), bạn có thể mở rộng các thẻ meta như sau:

Thẻ Twitter Card:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?php echo esc_attr($title); ?>">
<meta name="twitter:description" content="<?php echo esc_attr($description); ?>">
<meta name="twitter:image" content="<?php echo esc_url($thumbnail_url); ?>">