Đọc 5 phút
Tạo ảnh OG động cho mọi trang trong Next.js
Một route có thể kết xuất một ảnh mạng xã hội mang thương hiệu cho từng trang từ tiêu đề và metadata của nó — không cần công cụ thiết kế, không cần xuất thủ công. Đây là cách làm.
Thiết kế một ảnh chia sẻ riêng cho mỗi trang thì không thể mở rộng nổi. Cách làm tốt hơn là một route động vẽ nên một tấm thẻ mang thương hiệu theo yêu cầu, dựa trên chính tiêu đề và metadata của mỗi trang.
Route opengraph-image
Next.js đọc một tệp opengraph-image trong một segment route và phục vụ bất cứ thứ gì nó trả về làm og:image của route đó. Được kết xuất bằng next/og, nó chỉ đơn giản là JSX được vẽ thành một ảnh.
import { ImageResponse } from "next/og";
export default function Image() {
return new ImageResponse(
<div style={{ fontSize: 64, padding: 60 }}>Your title</div>,
{ width: 1200, height: 630 },
);
}Làm cho nó theo từng trang
- Lấy tiêu đề từ params của route hoặc từ lớp dữ liệu của bạn.
- Phối màu cho tấm thẻ theo màu nhấn thương hiệu để cả mạng lưới trông nhất quán.
- Giữ nó dưới các giới hạn kích thước của nền tảng để nó luôn tải được.
Kỹ năng OG Image dựng sẵn route này theo phong cách trang của bạn và nối openGraph.images xuyên suốt các trang, để không có hai route nào dùng chung một bản xem trước.