Tạo Meta Tag & Open Graph miễn phí

Cách hoạt động

Mọi thao tác tạo thẻ và phân tích head diễn ra trực tiếp trong trình duyệt — không có máy chủ tham gia. Công cụ dùng useMemo của React để tạo chuỗi HTML theo phản ứng và DOMParser API gốc của trình duyệt để đọc mã trang có sẵn cho tính năng nhập/kiểm tra.

1. 1
   Ô nhập biểu mẫu điều khiển việc tạo trực tiếp

   Khi bạn gõ, hook useMemo lập tức tạo lại toàn bộ khối thẻ — title, meta description, thuộc tính Open Graph và thuộc tính Twitter Card — thoát các ký tự đặc biệt (&, <, >, ") để đầu ra an toàn khi dán trực tiếp vào HTML.
2. 2
   Kiểm tra URL qua hàm khởi tạo URL của trình duyệt

   Mỗi ô URL (URL trang, ảnh mạng xã hội) được kiểm tra bằng hàm khởi tạo URL tích hợp của trình duyệt. Chỉ địa chỉ http:// hoặc https:// đúng định dạng với tên máy chủ có dấu chấm mới hợp lệ; giá trị không hợp lệ sẽ chặn nút sao chép và hiển thị lỗi tại chỗ.
3. 3
   Nhập: DOMParser đọc mã head có sẵn

   Nếu bạn dán HTML <head> có sẵn để kiểm tra, công cụ chạy nó qua DOMParser ở chế độ trơ — không có script nào thực thi và không có yêu cầu mạng nào. Sau đó nó truy vấn tài liệu đã phân tích để tìm các selector meta đã biết (og:title, twitter:description, liên kết canonical, v.v.) và điền sẵn các ô biểu mẫu với những gì tìm được.
4. 4
   Xem trước trực tiếp kết quả Google và thẻ mạng xã hội

   Công cụ hiển thị kết quả tìm kiếm Google có định dạng và bản xem trước thẻ Open Graph theo thời gian thực bằng cùng trạng thái biểu mẫu, để bạn thấy chính xác tiêu đề và mô tả sẽ bị cắt ngắn như thế nào trước khi sao chép đầu ra.

Công cụ liên quan