OG Ảnh cho Trang Sản Phẩm

OG ảnh cho trang sản phẩm là bản xem trước xã hội (social preview) hiển thị tên sản phẩm, giá và hình thu nhỏ khi trang được chia sẻ. FastOG kết xuất động ở kích thước 1200×630 và lưu vào bộ nhớ đệm biên (edge cache), vì vậy mỗi sản phẩm đều có thẻ thương hiệu mà không cần nhà thiết kế chạm vào mẫu.

Vì sao trang sản phẩm thương mại điện tử cần OG image động

Khi khách hàng chia sẻ liên kết sản phẩm trên WhatsApp, Slack hoặc Discord, thẻ xem trước (preview card) chính là một quảng cáo thu nhỏ. Một thẻ hiển thị tên sản phẩm, giá và đánh giá thực tế sẽ chuyển đổi tốt hơn nhiều so với hình ảnh logo chung chung của cửa hàng. Việc tự tạo một thẻ riêng cho từng sản phẩm theo cách thủ công không thể mở rộng — đó chính là lúc API phát huy tác dụng.

Cách tạo OG image cho sản phẩm

Ký một URL với template=ecommerce, tiêu đề sản phẩm, giá, đánh giá và URL hình ảnh. API sẽ hiển thị thẻ theo yêu cầu và lưu vào bộ nhớ đệm.

tsx

// Next.js — app/products/[slug]/page.tsx
export function generateMetadata({ params }) {
    const product = await getProduct(params.slug);
    return {
        openGraph: {
            images: [generateOgImageUrl({
                template: "ecommerce",      // product card
                title: product.name,
                subtitle: product.tagline,  // optional
                price: product.price,       // e.g. "$29.99"
                rating: product.rating,     // e.g. "4.9"
                image: product.imageUrl,    // product photo
            })],
        },
    };
}

Các trường của mẫu thương mại điện tử

Trường	Nội dung hiển thị	Tùy chọn?
`title`	Tên sản phẩm (tiêu đề)	Bắt buộc
`subtitle`	Khẩu hiệu hoặc danh mục	Tùy chọn
`price`	Thẻ giá, ví dụ: `$29.99`	Tùy chọn
`rating`	Đánh giá xếp hạng, ví dụ: `4.9`	Tùy chọn
`image`	URL hình ảnh / ảnh đại diện sản phẩm	Tùy chọn

FAQ

FastOG có tải hình ảnh sản phẩm của tôi vào thẻ không?

Có. Truyền URL hình ảnh sản phẩm vào tham số image và mẫu thương mại điện tử sẽ ghép nó vào thẻ.

Giá hiển thị có trực tiếp và có thể chỉnh sửa không?

Giá là bất cứ giá trị nào bạn truyền tại thời điểm ký. Thay đổi giá → thay đổi URL → một lần render mới.

Còn giá chiết khấu / giá khuyến mãi thì sao?

Truyền giá hiện tại làm price. Một số người bán làm mới thẻ khi khuyến mãi thay đổi để bản xem trước được chia sẻ hiển thị giá trực tiếp.

Dùng thử miễn phí — không cần đăng ký

Xem trước và kiểm tra hình ảnh OG động trong vài giây.

Mở Trình kiểm tra hình ảnh OG miễn phí

Chủ đề