Ảnh Open Graph từ một địa chỉ web: chụp màn hình hoặc dựng từ thẻ meta
Công cụ nhận vào một địa chỉ trang web và cho ra ảnh khổ 1200 nhân 630 pixel theo hai cách. Cách thứ nhất là chụp ảnh màn hình trang đó. Cách thứ hai là đọc các thẻ Open Graph có sẵn trên trang rồi dựng một ảnh chữ theo mẫu dựng sẵn. Cả hai đều cần gửi địa chỉ tới dịch vụ bên ngoài.
Tính năng nổi bật
- Chế độ chụp màn hình: gọi dịch vụ chụp ảnh trang web và trả về ảnh đúng khổ 1200 nhân 630 pixel
- Chế độ đọc thẻ meta: tải mã nguồn trang qua máy chủ trung gian rồi bóc các thẻ Open Graph ra
- Đọc lần lượt tiêu đề, mô tả, ảnh, tên trang và địa chỉ, có phương án dự phòng lấy từ thẻ của Twitter và thẻ title
- Hiển thị đúng các giá trị lấy được để bạn kiểm tra xem trang đã khai báo đủ thẻ chưa
- Dựng ảnh 1200 nhân 630 pixel từ dữ liệu đọc được, nền chuyển sắc tối, có tự ngắt dòng cho tiêu đề
- Tải ảnh về dưới dạng PNG cho cả hai chế độ
- Nhập địa chỉ không cần gõ phần giao thức, công cụ tự thêm vào
- Thử lần lượt nhiều dịch vụ khi dịch vụ đầu tiên không phản hồi
Ảnh xem trước quyết định người ta có bấm vào liên kết hay không
Khi một liên kết được dán vào mạng xã hội hay ứng dụng nhắn tin, thứ chiếm nhiều diện tích nhất trong khối xem trước không phải tiêu đề mà là tấm ảnh. Liên kết không có ảnh thường bị thu lại thành một dòng chữ nhỏ và gần như biến mất trong dòng nội dung đang lướt. Vấn đề là rất nhiều trang chỉ phát hiện mình thiếu ảnh vào đúng lúc chuẩn bị đăng bài, khi không còn thời gian mở phần mềm thiết kế. Công cụ này lấp chỗ trống đó theo hai hướng: nếu trang đã có giao diện đẹp thì một tấm ảnh chụp màn hình cũng đủ dùng tạm; nếu trang đã khai báo thẻ Open Graph đầy đủ thì bạn dựng nhanh một ảnh chữ từ chính tiêu đề và mô tả đó. Ngoài ra, chế độ đọc thẻ meta còn có công dụng thứ hai không kém phần hữu ích: dùng nó để kiểm tra xem trang của bạn hay của đối thủ đang khai báo những gì.
Lợi ích khi sử dụng
- Có ngay một tấm ảnh đúng khổ khi cần gấp mà chưa kịp làm thiết kế riêng
- Kiểm tra được trang đang khai báo thẻ Open Graph nào, thiếu thẻ nào, chỉ bằng một lần dán địa chỉ
- Xem được thẻ meta của bất kỳ trang công khai nào, tiện khi tham khảo cách đối thủ viết tiêu đề
- Ảnh dựng ra đúng tỷ lệ mà các mạng xã hội dùng nên không bị cắt xén khi hiển thị
- Không cần đăng ký tài khoản hay cài phần mềm thiết kế
Cách tạo ảnh xem trước
- 1Chọn chế độ chụp màn hình nếu trang đã có giao diện đẹp, hoặc chế độ đọc thẻ meta nếu bạn muốn một ảnh chữ.
- 2Dán địa chỉ trang vào ô nhập rồi bấm nút tìm, phần giao thức không cần gõ vì công cụ tự thêm.
- 3Chờ vài giây, vì cả hai chế độ đều phải gọi ra dịch vụ bên ngoài chứ không xử lý ngay tại máy bạn.
- 4Với chế độ đọc thẻ meta, hãy đọc kỹ các giá trị hiện ra để biết trang của bạn còn thiếu thẻ nào.
- 5Bấm nút tải để lấy ảnh PNG, rồi tải ảnh đó lên máy chủ của bạn và khai báo địa chỉ tuyệt đối của nó trong thẻ og:image.
Dữ liệu của bạn đi qua đâu, phần cần biết trước khi dùng
Cần nói rõ ngay vì đây không phải công cụ chạy hoàn toàn trong trình duyệt. Ở chế độ chụp màn hình, địa chỉ bạn nhập được gửi tới máy chủ của trang này rồi chuyển tiếp tới một dịch vụ chụp ảnh trang web bên ngoài; chính dịch vụ đó mới thật sự mở trang và chụp. Ở chế độ đọc thẻ meta, trình duyệt của bạn gọi tới một trong vài máy chủ trung gian công khai để lấy mã nguồn trang, vì trình duyệt không cho phép đọc trực tiếp nội dung từ tên miền khác. Nghĩa là địa chỉ bạn dán vào sẽ xuất hiện trong nhật ký của những dịch vụ đó. Hệ quả thực tế: đừng dùng công cụ với địa chỉ trang nội bộ, trang môi trường thử nghiệm chưa công bố, hay bất kỳ đường dẫn nào có kèm mã đăng nhập, mã đặt lại mật khẩu hoặc tham số nhận dạng phiên làm việc. Với trang công khai bình thường thì không có vấn đề gì, vì bản thân trang đó vốn đã ai cũng xem được. Riêng phần dựng ảnh chữ thì chạy ngay trên máy bạn bằng vùng vẽ của trình duyệt, không gửi đi đâu thêm.
Kích thước, tỷ lệ và những con số nên nhớ
Khổ 1200 nhân 630 pixel là mức được khuyến nghị rộng rãi nhất, tương ứng tỷ lệ khoảng 1,91 trên 1. Đây là tỷ lệ mà khối xem trước dạng ảnh lớn trên các mạng xã hội phổ biến đang dùng, nên ảnh đúng khổ này sẽ vừa khít mà không bị cắt hai bên hay trên dưới. Có vài lưu ý đi kèm. Thứ nhất, một số ngữ cảnh hiển thị lại cắt ảnh về dạng vuông, chẳng hạn khối xem trước nhỏ trong ứng dụng nhắn tin, nên đừng đặt chữ hay biểu trưng sát mép trái và mép phải; hãy chừa lề an toàn quanh khoảng một phần mười chiều rộng. Thứ hai, ảnh phải nằm ở một địa chỉ công khai truy cập được, và địa chỉ khai báo trong thẻ phải là địa chỉ tuyệt đối đầy đủ cả tên miền; đường dẫn tương đối là lỗi phổ biến khiến ảnh không bao giờ hiện. Thứ ba, nên khai báo thêm chiều rộng và chiều cao của ảnh trong hai thẻ đi kèm, vì chúng giúp mạng xã hội bố trí khối xem trước đúng ngay lần đầu thay vì phải chờ tải ảnh về mới biết kích thước.
Bộ thẻ tối thiểu cần khai báo trên mỗi trang
Bốn thẻ cốt lõi là tiêu đề, mô tả, ảnh và địa chỉ chuẩn của trang, cộng thêm thẻ loại nội dung và thẻ tên trang web. Tiêu đề nên viết riêng cho ngữ cảnh chia sẻ chứ không nhất thiết trùng thẻ tiêu đề dùng cho máy tìm kiếm, vì mục tiêu khác nhau: một bên tối ưu cho truy vấn tìm kiếm, một bên tối ưu cho người đang lướt. Giữ tiêu đề trong khoảng sáu mươi ký tự và mô tả quanh một trăm ký tự là an toàn, vì phần vượt quá sẽ bị cắt bằng dấu ba chấm mà mỗi nền tảng cắt ở một độ dài khác nhau. Nếu bạn nhắm tới hiển thị trên nền tảng của Twitter, cần thêm thẻ khai báo kiểu thẻ dạng ảnh lớn, nếu không liên kết sẽ hiện dưới dạng ô nhỏ. Ở Việt Nam, ứng dụng nhắn tin phổ biến nhất cũng đọc bộ thẻ Open Graph này, nên khai báo đúng một lần là dùng được cho nhiều nơi. Chế độ đọc thẻ meta của công cụ giúp bạn xác nhận bốn thẻ cốt lõi đã có mặt hay chưa, và nếu nó chỉ lấy được tiêu đề từ thẻ title thì tức là trang bạn chưa khai báo Open Graph.
Vì sao ảnh mới không hiện sau khi bạn đã sửa
Đây là câu hỏi gặp nhiều nhất và nguyên nhân gần như luôn là bộ nhớ đệm. Mạng xã hội đọc thẻ của một địa chỉ đúng một lần rồi lưu lại kết quả trong nhiều ngày, nên sau khi bạn đổi ảnh thì bản cũ vẫn hiện. Cách xử lý là dùng công cụ gỡ lỗi chia sẻ của chính nền tảng đó để yêu cầu quét lại địa chỉ; hầu hết các nền tảng lớn đều có một trang như vậy dành cho người quản trị. Một mẹo bổ sung là thêm một tham số truy vấn vô hại vào cuối địa chỉ ảnh mỗi lần cập nhật, chẳng hạn số phiên bản, để địa chỉ ảnh khác đi và bộ nhớ đệm không tìm thấy bản cũ. Ngoài bộ nhớ đệm, có vài nguyên nhân khác đáng kiểm tra: ảnh nằm sau lớp đăng nhập nên máy quét không tải được, máy chủ chặn các máy quét bằng quy tắc chống truy cập tự động, trang chỉ chèn thẻ bằng mã kịch bản chạy phía trình duyệt trong khi máy quét chỉ đọc mã nguồn thô, hoặc địa chỉ ảnh dùng giao thức không an toàn trong khi trang dùng giao thức an toàn.
Giới hạn của mẫu ảnh dựng sẵn ở đây
Ảnh dựng từ thẻ meta dùng đúng một mẫu cố định: nền chuyển sắc tối, tên trang viết hoa màu vàng ở phía trên, tiêu đề chữ trắng cỡ lớn ở giữa có tự ngắt dòng, mô tả chữ xám bên dưới, địa chỉ trang ở đáy. Bạn không đổi được màu nền, không đổi được phông chữ, không chèn được biểu trưng và không đổi được bố cục. Phần mô tả bị cắt còn khoảng một trăm năm mươi ký tự đầu. Việc ngắt dòng dựa trên dấu cách nên một tiêu đề chứa từ rất dài hoặc một địa chỉ dài không dấu cách có thể tràn ra ngoài khung. Vì vậy hãy xem đây là phương án dùng tạm hoặc phương án cho những trang phụ ít quan trọng. Với trang chủ, trang dịch vụ chính và các bài viết bạn định đẩy mạnh, một ảnh thiết kế riêng theo bộ nhận diện thương hiệu vẫn hơn hẳn: nó tạo nhận diện khi liên kết của bạn xuất hiện lẫn giữa hàng chục liên kết khác. Về phía chế độ chụp màn hình, chất lượng phụ thuộc dịch vụ bên ngoài và có thể thất bại với trang tải chậm hay trang hiện lớp hỏi chấp thuận cookie che kín màn hình.
Câu hỏi thường gặp (FAQ)
Ảnh Open Graph nên có kích thước bao nhiêu?
Khổ 1200 nhân 630 pixel là mức được khuyến nghị rộng rãi nhất, tương ứng tỷ lệ khoảng 1,91 trên 1, và đó cũng là khổ mà công cụ này xuất ra. Nên chừa lề an toàn quanh mép vì một số ngữ cảnh hiển thị cắt ảnh về dạng vuông, khiến chữ đặt sát hai bên bị mất.
Công cụ có xử lý ngay trên máy tôi không?
Không hoàn toàn. Chế độ chụp màn hình gửi địa chỉ qua máy chủ của trang này rồi tới một dịch vụ chụp ảnh bên ngoài. Chế độ đọc thẻ meta gọi qua máy chủ trung gian công khai để lấy mã nguồn. Chỉ riêng bước dựng ảnh chữ là chạy trong trình duyệt. Vì vậy đừng dán địa chỉ nội bộ hay đường dẫn có kèm mã đăng nhập.
Vì sao dán địa chỉ vào mà báo không lấy được thông tin?
Có vài khả năng: trang chặn các máy truy cập tự động, máy chủ trung gian đang quá tải hoặc bị chặn, trang yêu cầu đăng nhập, hoặc trang chỉ chèn thẻ meta bằng mã kịch bản chạy phía trình duyệt trong khi công cụ chỉ đọc mã nguồn thô trả về từ máy chủ. Hãy thử lại sau vài phút hoặc đổi sang chế độ chụp màn hình.
Tôi sửa ảnh rồi nhưng mạng xã hội vẫn hiện ảnh cũ?
Do bộ nhớ đệm: nền tảng đọc thẻ của một địa chỉ một lần rồi lưu kết quả trong nhiều ngày. Hãy dùng công cụ gỡ lỗi chia sẻ của chính nền tảng đó để yêu cầu quét lại. Một cách bổ trợ là thêm tham số phiên bản vào cuối địa chỉ ảnh mỗi lần cập nhật để địa chỉ khác đi.
Địa chỉ ảnh trong thẻ có bắt buộc là địa chỉ tuyệt đối không?
Bắt buộc. Đường dẫn tương đối là một trong những lỗi phổ biến nhất khiến ảnh không bao giờ hiện, vì máy quét của mạng xã hội không có ngữ cảnh trang để ghép đường dẫn. Hãy ghi đầy đủ cả giao thức và tên miền, và dùng giao thức an toàn nếu trang của bạn cũng dùng giao thức an toàn.
Có cần khai báo thêm thẻ riêng cho từng mạng xã hội không?
Bộ thẻ Open Graph được đa số nền tảng đọc, kể cả ứng dụng nhắn tin phổ biến ở Việt Nam, nên khai báo một lần là dùng được nhiều nơi. Riêng nền tảng của Twitter cần thêm một thẻ khai báo kiểu thẻ dạng ảnh lớn, nếu thiếu thì liên kết chỉ hiện dưới dạng ô nhỏ kém nổi bật.
Tiêu đề trong thẻ Open Graph có nên trùng thẻ tiêu đề trang không?
Không nhất thiết, vì hai thứ phục vụ hai mục tiêu khác nhau. Thẻ tiêu đề trang tối ưu cho truy vấn tìm kiếm nên thường chứa từ khóa và tên thương hiệu. Tiêu đề chia sẻ tối ưu cho người đang lướt nên có thể viết gợi mở hơn. Giữ trong khoảng sáu mươi ký tự để không bị cắt.
Chế độ đọc thẻ meta dùng để kiểm tra trang của mình được không?
Được, và đây là cách dùng hữu ích không kém. Dán địa chỉ trang của bạn vào rồi xem những giá trị hiện ra. Nếu tiêu đề chỉ lấy được từ thẻ title và phần ảnh để trống, tức là trang chưa khai báo Open Graph và mọi liên kết chia sẻ đều đang hiển thị dưới dạng nghèo nàn.
Ảnh dựng ra có tùy chỉnh được màu sắc hay chèn logo không?
Không. Mẫu ảnh cố định gồm nền chuyển sắc tối, tên trang màu vàng, tiêu đề chữ trắng, mô tả chữ xám và địa chỉ ở đáy. Đây là phương án dùng tạm. Với trang chủ và các bài viết quan trọng, một ảnh thiết kế riêng theo bộ nhận diện vẫn tạo được nhận diện tốt hơn nhiều khi liên kết xuất hiện lẫn giữa nhiều liên kết khác.
Vì sao tiêu đề dài bị tràn ra ngoài ảnh?
Vì việc ngắt dòng dựa trên khoảng trắng giữa các từ. Một tiêu đề chứa từ rất dài, một địa chỉ web liền mạch hay một chuỗi mã không có dấu cách sẽ không ngắt được và tràn khỏi khung. Cách xử lý là sửa tiêu đề trên trang cho ngắn lại rồi chạy lại công cụ.
Chụp màn hình có luôn thành công không?
Không. Nó phụ thuộc dịch vụ bên ngoài nên có thể thất bại khi dịch vụ quá tải hoặc giới hạn lượt dùng. Ngoài ra kết quả thường kém với trang tải chậm, trang có hoạt ảnh chạy khi cuộn, hoặc trang hiện lớp hỏi chấp thuận cookie che kín màn hình ngay khi mở, vì máy chụp không bấm được nút đồng ý.
Nên dùng ảnh chụp màn hình hay ảnh chữ?
Ảnh chụp màn hình hợp khi trang có giao diện bắt mắt và người xem cần thấy sản phẩm, chẳng hạn trang bán hàng hay trang giới thiệu công cụ. Ảnh chữ hợp khi nội dung là bài viết, vì tiêu đề đọc được ngay trong khối xem trước quan trọng hơn hình ảnh giao diện. Nếu phân vân, hãy thử cả hai rồi so bằng mắt.
Từ khóa liên quan
- og image là gì
- tạo ảnh open graph
- kích thước ảnh og 1200x630
- thẻ og:image
- ảnh xem trước khi chia sẻ link
- facebook không hiện ảnh khi share link
- xóa cache og image
- kiểm tra thẻ open graph
- twitter card ảnh lớn
- chia sẻ link lên zalo hiện ảnh
- og:title và og:description
- chụp màn hình website online
- meta tag mạng xã hội
- ảnh og bị cắt
- og image url tuyệt đối
- sharing debugger facebook
- tối ưu ảnh chia sẻ mạng xã hội
- og image generator online free
- thẻ meta cho bài viết blog
- công cụ tạo ảnh og miễn phí
