website: https://opengraphtools.org
Cách Hoạt Động
Tạo hình ảnh OG chất lượng cao chỉ trong vài giây. Công cụ mạnh mẽ của chúng tôi đảm bảo tốc độ mà không làm giảm độ sắc nét.
Dễ dàng tạo ra những hình ảnh thu hút với trình chỉnh sửa thân thiện với người dùng. Không cần kỹ năng thiết kế trước đó—chỉ cần nhấp và tạo.
Truy cập đầy đủ tất cả tính năng mà không có chi phí ẩn hay yêu cầu đăng ký. Bắt đầu tạo hình ảnh OG ngay lập tức.
Chọn từ bộ sưu tập khổng lồ các mẫu thiết kế chuyên nghiệp được tối ưu cho mức độ tương tác cao trên mạng xã hội.
Tạo hình ảnh hoàn hảo cho Facebook, Twitter, LinkedIn và các nền tảng khác một cách liền mạch.
Xem trước hình ảnh của bạn theo thời gian thực trên các nền tảng khác nhau, đảm bảo hiển thị hoàn hảo.
Dữ liệu của bạn luôn an toàn với chúng tôi. Mọi tệp tải lên đều được xử lý bảo mật và tự động xóa sau khi tạo xong.
Chia sẻ ngay lập tức hình ảnh đã tạo lên mạng xã hội hoặc tải xuống với nhiều định dạng như PNG, JPEG và WebP.
Điều chỉnh màu sắc, phông chữ, bố cục và hiệu ứng một cách chính xác với các tùy chọn tuỳ chỉnh nâng cao.
Tính Năng
-
Tạo metadata Open Graph cho bất kỳ URL nào.
-
Trích xuất dữ liệu Open Graph từ bất kỳ trang web nào.
-
Xem trước cách nội dung của bạn sẽ hiển thị trên các nền tảng mạng xã hội.
-
Xác thực các thẻ Open Graph để đảm bảo triển khai chính xác.
-
Tuỳ chỉnh hình ảnh và metadata của Open Graph.
-
Chuyển đổi giữa các định dạng ảnh phổ biến để dùng trong bản xem trước Open Graph.
-
Chỉnh sửa các thuộc tính metadata như tiêu đề, mô tả và hình ảnh.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn
✅ Yêu cầu hệ thống
Trước khi bắt đầu, hãy đảm bảo bạn đã cài:
-
Node.js >= 18.x (Tải Node.js tại đây)
-
Trình quản lý gói: npm
(theo mặc định có sẵn khi cài Node.js), hoặc yarn
/ pnpm
tùy chọn
📦 Các bước cài đặt và chạy dự án
1. Download dự án về máy
2. Cài đặt thư viện phụ thuộc
Dùng npm:
Hoặc yarn:
Hoặc pnpm:
3. Chạy dự án ở chế độ development
Truy cập http://localhost:3000 để xem ứng dụng.
4. Build và chạy ở chế độ production
5. Lint và định dạng code (dành cho Dev)
🧩 Một số thông tin kỹ thuật
Dự án sử dụng:
-
Next.js 15 (App Router)
-
Tailwind CSS + PostCSS
-
React 18
-
Radix UI cho các thành phần UI
-
@nextui-org, Geist, Framer Motion cho hiệu ứng và giao diện
-
Resvg, Satori, Cheerio, Node-html-parser hỗ trợ sinh ảnh OG / HTML parsing
-
Zod và React Hook Form cho xử lý form và validation
-
Zustand cho quản lý trạng thái
-
TypeScript