OG Ảnh cho Bài Viết Blog
OG ảnh cho bài viết blog là ảnh xem trước xã hội 1200×630 được hiển thị khi ai đó chia sẻ bài viết của bạn trên X, LinkedIn, Facebook, Slack hoặc WhatsApp. FastOG tạo ảnh này động theo yêu cầu từ tiêu đề, đoạn trích và tác giả bài viết — không cần thiết kế, không cần tải lên, không cần đăng ký, không cần đăng nhập để bắt đầu.
Vì sao mỗi bài viết blog cần có OG image riêng
Một liên kết được chia sẻ mà không có thẻ hiển thị, hoặc có thẻ chung chung cũ kỹ, sẽ bị hòa lẫn vào các bài viết khác. Một thẻ hiển thị riêng cho từng bài với tiêu đề thực tế và bố cục gọn gàng sẽ thu hút nhiều lượt chia sẻ và nhấp chuột hơn. Chi phí để tạo thủ công một thẻ cho mỗi bài chính là lý do khiến hầu hết các blog chỉ dùng một hình ảnh mặc định duy nhất — và đó chính xác là vấn đề mà FastOG giải quyết.
Cách tạo ảnh OG động cho bài viết blog
Bạn ký một URL tại thời điểm render trang bằng template=blog, tiêu đề bài viết, đoạn trích và tác giả. Trình thu thập dữ liệu xã hội (social crawler) tải URL đó, FastOG render PNG một lần, và Cloudflare lưu vào bộ nhớ đệm (cache) để mọi lần chia sẻ sau đó đều tức thì và miễn phí.
// Next.js App Router — app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return {
title: post.title,
openGraph: {
images: [generateOgImageUrl({
template: "blog",
title: post.title,
subtitle: post.excerpt,
author: post.author.name,
})],
},
};
}
Sử dụng
template=blogcho thẻ blog chuyên dụng có tác giả và tiêu đề, hoặcdefaultcho bố cục chỉ có tiêu đề gọn gàng hơn. Tất cả các mẫu (template) đều render ở kích thước 1200×630.
Mẫu nào phù hợp với blog của bạn
| Nếu blog của bạn… | Sử dụng mẫu | Lợi ích thêm |
|---|---|---|
| Hiển thị tác giả + đoạn trích | blog |
bao gồm dòng tác giả |
| Chủ yếu là tiêu đề + khẩu hiệu | default |
tối giản, tập trung vào thương hiệu |
| Sử dụng ảnh hoặc ảnh bìa | editorial / image-right |
bố cục ưu tiên hình ảnh |
| Đăng bài ra mắt / bài về sản phẩm | launch |
trường phiên bản + tên miền |
Câu hỏi thường gặp
Chi phí sử dụng FastOG cho bài viết blog là bao nhiêu?
Mỗi hình ảnh duy nhất chỉ tính một lần render; các URL giống hệt nhau được lưu vào bộ nhớ đệm biên (edge cache) vĩnh viễn và không tính vào hạn mức hàng tháng của bạn.
Tôi có cần tạo lại hình ảnh khi chỉnh sửa bài viết không?
Chỉ khi tiêu đề, đoạn trích hoặc tác giả thay đổi — URL phụ thuộc vào nội dung, vì vậy thay đổi nội dung sẽ tạo ra URL mới và render mới. URL không thay đổi vẫn được lưu trong bộ nhớ đệm và không tính vào hạn mức của bạn.
Tôi có thể sử dụng FastOG với framework blog hiện tại của mình không?
Có. Các hàm ký (signer) tích hợp sẵn có sẵn cho Next.js, React, SvelteKit, Vue/Nuxt, Astro, Express, Vanilla Node.js, JavaScript, PHP/Laravel, Python và Ruby/Rails. Xem trang SDK.