Tự động tạo ảnh Open Graph động với @vercel/og: Tăng 200% CTR trên Mạng xã hội

Khi bạn chia sẻ một bài viết lên Facebook, Zalo, LinkedIn hay Twitter, thứ đầu tiên đập vào mắt người dùng không phải là dòng chữ tiêu đề, mà chính là Bức ảnh xem trước (Open Graph Image / OG Image). Một đường link chia sẻ chỉ có logo công ty đơn điệu sẽ hoàn toàn bị chìm ngập giữa hàng ngàn bài đăng trên bảng tin.

Giải pháp đỉnh cao của thế giới công nghệ hiện nay chính là Tự động tạo ảnh Open Graph động (Dynamic OG Image Generation) bằng thư viện @vercel/og (Satori Engine). Kỹ thuật này giúp tự động vẽ ra một bức ảnh OG đẹp mắt chứa đúng Tiêu đề bài viết, Tên tác giả, Ảnh đại diện và Thương hiệu theo thời gian thực mỗi khi có người chia sẻ link. Bài viết này sẽ hướng dẫn bạn cài đặt từ A-Z.

1. Dynamic OG Image Generation là gì? Công nghệ Satori đằng sau @vercel/og

Trước đây, để tạo ảnh OG cá nhân hóa cho 1.000 bài viết, nhà thiết kế phải dùng Photoshop xuất ra 1.000 file ảnh .jpg rồi tải lên Server. Thao tác này ngốn rất nhiều thời gian và dung lượng lưu trữ máy chủ.

Thư viện @vercel/og giải quyết bài toán này bằng cách sử dụng engine Satori: Nó cho phép bạn viết mã JSX và Tailwind CSS thuần túy, và Server ở lớp Edge sẽ tự động biên dịch đoạn mã JSX/CSS đó thành một bức ảnh định dạng PNG siêu nét trong vòng dưới 20 millisecond!

2. Viết Code tạo file opengraph-image.jsx tự động trong Next.js

Trong Next.js App Router, bạn chỉ cần tạo một file tên là opengraph-image.jsx đặt ngay trong thư mục route (Ví dụ: app/blog/[slug]/opengraph-image.jsx). Next.js sẽ tự động nhận diện và kết nối ảnh này vào thẻ og:image của trang bài viết đó!

import { ImageResponse } from 'next/og';
import { getBlogPost } from '@/lib/blog';

// Kích thước chuẩn cho ảnh Open Graph Facebook/Zalo
export const alt = 'Uwmee Blog Post';
export const size = {
  width: 1200,
  height: 630,
};
export const contentType = 'image/png';

export default async function Image({ params }) {
  const { slug } = await params;
  const post = await getBlogPost(slug);

  return new ImageResponse(
    (
      // Viết giao diện JSX + Tailwind CSS để thiết kế ảnh OG
      <div
        style={{
          background: 'linear-gradient(to right, #0f172a, #1e293b)',
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          padding: '60px',
          color: 'white',
          fontFamily: 'sans-serif',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <span style={{ fontSize: 28, fontWeight: 'bold', color: '#38bdf8' }}>
            UWMEE SOFTWARE BLOG
          </span>
        </div>

        <div style={{ fontSize: 48, fontWeight: 'bold', lineHeight: 1.3 }}>
          {post?.title || 'Bài viết Kỹ thuật SEO & Web App'}
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontSize: 22, color: '#94a3b8' }}>
            Tác giả: {post?.authorName || 'Uwmee Team'}
          </span>
          <span style={{ fontSize: 20, background: '#0284c7', padding: '8px 16px', borderRadius: '8px' }}>
            Đọc bài viết
          </span>
        </div>
      </div>
    ),
    {
      ...size,
    }
  );
}

3. 4 Lợi ích kinh ngạc của Dynamic OG Image mang lại cho chiến dịch SEO

• Tăng gấp 2 đến 3 lần tỷ lệ nhấp chuột (CTR): Bức ảnh OG chứa đúng tiêu đề bài viết gây ấn tượng thị giác mạnh mẽ hơn 200% so với bức ảnh logo tĩnh sáo rỗng. View Cách tăng tỷ lệ nhấp chuột CTR.
• Tiết kiệm 100% dung lượng lưu trữ máy chủ: Không cần lưu trữ hàng ngàn file ảnh tĩnh trên Disk Server. Ảnh được tạo ngầm ở luồng Edge Worker chỉ khi có yêu cầu. Read Edge Computing cho Next.js.
• Đồng bộ nhận diện thương hiệu tuyệt đối: Mọi bài viết đăng ra đều sở hữu mẫu thiết kế OG chuẩn nhận diện màu sắc của công ty.

4. Kiểm tra hiển thị ảnh OG bằng công cụ Facebook Sharing Debugger

Sau khi triển khai, dán đường link bài viết vào công cụ Facebook Sharing Debugger (Trình dọn dẹp thẻ chia sẻ của Facebook), bấm Scrape Again. Facebook sẽ cào lại đường link và hiển thị bức ảnh OG vừa được sinh tự động siêu nét!

Kết luận

Dynamic OG Image Generation với @vercel/og là đỉnh cao công nghệ kết hợp giữa lập trình Front-end và tiếp thị truyền thông xã hội. Hãy trang bị ngay tính năng này cho website để biến mọi bài viết khi chia sẻ thành một tác phẩm nghệ thuật thu hút hàng ngàn lượt click.