Khi bạn gửi đường dẫn Giao Đấu cho một người bạn qua tin nhắn, thứ đầu tiên họ thấy không phải ứng dụng. Họ thấy một tấm ảnh nhỏ hiện ra dưới đường dẫn — người làm web gọi là “thẻ chia sẻ”. Với một khu chợ ứng dụng sống nhờ lời rủ của người quen, tấm ảnh đó quyết định bạn của bạn có bấm hay không. Bài này kể chúng tôi làm tấm ảnh đó thế nào: bản đầu sai ở đâu, vì sao chuyển sang dùng ảnh chụp lúc đang chơi thật, và chỗ đến giờ vẫn chưa khớp.
Thẻ chia sẻ hoạt động ra sao
Mỗi trang web có thể khai báo, trong phần đầu trang người đọc không thấy, một tấm ảnh đại diện, một tiêu đề và một dòng mô tả. Khi bạn dán đường dẫn vào ứng dụng nhắn tin hay mạng xã hội, máy chủ của họ ghé trang một lần, đọc những khai báo đó, tải ảnh về và dựng thành thẻ. Có vài điều người làm cần biết:
- Kích thước chuẩn là 1200×630 điểm ảnh, tỉ lệ gần 1,91:1. Khác tỉ lệ này, ảnh sẽ bị cắt hoặc thu nhỏ theo cách mỗi ứng dụng một kiểu.
- Thẻ hiện rất nhỏ. Trên điện thoại, tấm ảnh 1200 điểm chỉ còn rộng chừng một bàn tay. Chữ nhỏ trên ảnh gốc sẽ thành vệt mờ.
- Các nền tảng lưu lại thẻ khá lâu. Đổi ảnh xong, người đã từng chia sẻ đường dẫn vẫn có thể thấy ảnh cũ một thời gian. Muốn chắc ảnh mới hiện ra, đường dẫn tới ảnh nên đổi theo, hoặc phải nhờ nền tảng đọc lại trang.
- Không chạy được mã trong thẻ. Máy chủ của nền tảng chỉ đọc khai báo tĩnh. Mọi thứ ứng dụng vẽ bằng mã sau khi mở ra đều không có trong thẻ.
Điểm cuối cùng là gốc của vấn đề với ứng dụng như của chúng tôi: mọi hình ảnh đều được vẽ bằng mã, ngay trên máy người dùng. Không có tệp ảnh nào sẵn để “chọn làm ảnh đại diện”. Chúng tôi phải tự tạo ra nó.
Bản đầu: chụp màn hình chờ, và sai ở đâu
Cách làm đầu tiên nghe hợp lý: mở ứng dụng ở khổ ngang 1200×630 trong trình duyệt chạy ngầm, chụp lại màn hình đầu tiên. Nhanh, tự động, luôn đúng với giao diện hiện tại.
Kết quả trông như thế này với Giao Đấu: mặt sân xanh ở giữa, một dải khán đài phía trên, và chắn ngang chính giữa là tấm bảng menu với nút “Vào sân”. Tên ứng dụng to, chữ phụ “Tennis nhanh”. Với năm ứng dụng, được năm tấm ảnh có cùng một bố cục: cảnh nền, và một cái menu che mất phần hay nhất.
Nhìn lại, có ba cái sai:
- Màn hình chờ không phải trải nghiệm. Người nhận thẻ muốn biết “mở ra thì làm gì”. Một mặt sân trống với cái nút không trả lời câu đó.
- Khổ ngang không phải cách người dùng cầm máy. Phần lớn người dùng mở ứng dụng trên điện thoại cầm dọc. Chụp khổ ngang cho ra một bố cục mà gần như không ai thực sự thấy.
- Không nói được điều khác biệt nhất. Ứng dụng của chúng tôi chạy ngay không cần cài, miễn phí, có độ tuổi rõ ràng. Không điều nào trong số đó hiện trên thẻ.
Bản hiện tại: ảnh chơi thật, đặt trong khung điện thoại
Chúng tôi làm lại từ đầu với một nguyên tắc: ảnh trên thẻ phải là thứ người dùng thật sự thấy giữa lượt chơi, không dàn dựng, không vẽ thêm.
Bước một: chụp giữa lượt, khổ dọc
Mỗi ứng dụng được mở ở khổ điện thoại dọc, và độ nét gấp đôi để ảnh không vỡ khi thu phóng. Người chơi ảo — chương trình tự điều khiển mà chúng tôi dùng để kiểm thử — được cho vào trận, chạy tới một khoảnh khắc có chuyện đang xảy ra: bóng đang bay qua lưới, xe đang áp sát đoàn đua phía trước, máy bay đang né làn đạn. Ứng dụng có một chế độ kiểm thử cho phép đứng hình đúng khung đó để chụp, thay vì hy vọng bấm máy đúng lúc.
Bước hai: dựng thẻ từ danh sách ứng dụng
Một công cụ nhỏ đọc danh sách ứng dụng của khu chợ — cùng danh sách mà trang chủ dùng — rồi dựng mỗi thẻ theo cùng một khuôn:
| Vùng trên thẻ | Nội dung | Vì sao |
|---|---|---|
| Bên trái | Ảnh chơi thật, đặt trong khung điện thoại nghiêng nhẹ | Người nhận thấy ngay “đây là thứ chạy trên điện thoại”, và thấy cảnh thật |
| Dòng nhãn | Thể loại và độ tuổi, ví dụ “Thể thao · 6+” | Phụ huynh biết ngay có hợp với con không |
| Tên và biểu tượng | Chữ rất to, cùng biểu tượng sẽ nằm trên màn hình chính | Lần sau thấy biểu tượng là nhận ra |
| Dòng vàng và dòng phụ | Một câu nói ứng dụng làm gì, một dòng chi tiết | Trả lời câu “mở ra thì làm gì” |
| Ba ô nhỏ | Ba điểm nổi bật cụ thể | Đọc lướt được trong một giây |
| Chân thẻ | “Bấm để chơi ngay — không cần cài”, tên miền, nhãn “Miễn phí” | Xoá nỗi ngại phải cài đặt |
Mỗi khu vực màu lấy theo màu riêng của từng ứng dụng, nên năm tấm thẻ đặt cạnh nhau vẫn khác nhau rõ. Riêng Thỏ Dâu, dòng ô nhỏ nói thẳng “Không quảng cáo · Không chat” — vì với ứng dụng cho bé, đó là thông tin ba mẹ cần nhất.
Thẻ tổng của khu chợ xếp bốn màn hình điện thoại xoè như quạt bài, và dòng thể loại cũng được sinh từ danh sách ứng dụng. Chi tiết này có lý do: bản đầu của trang chủ ghi cứng số lượng ứng dụng bằng chữ. Loại chữ đó sai ngay khi có ứng dụng thứ bảy, và không ai nhớ mà sửa. Giờ không còn con số nào viết tay trên thẻ tổng; thêm ứng dụng thì thẻ tự đúng.
Chỗ vẫn chưa khớp — và vì sao chúng tôi kể ra
Ảnh chơi thật là lựa chọn đúng, nhưng nó có cái giá: ảnh phải chụp lại mỗi khi ứng dụng thay đổi lớn. Và chúng tôi chưa làm đủ.
Cuối tháng Chín, Giao Đấu được mở rộng từ một môn tennis thành bốn môn: thêm pickleball, cầu lông, bóng bàn. Chữ trên thẻ được cập nhật ngay — dòng vàng giờ ghi “4 môn vợt đối kháng”. Nhưng ảnh bên trái vẫn là ảnh chụp từ bản chỉ có tennis. Tương tự, thẻ Rượt Đuổi giờ nói về ô tô, xe máy, cano, trong khi ảnh vẫn là ô tô. Chữ nói một đằng, ảnh cho thấy một phần. Không sai, nhưng chưa trọn.
Lý do rất đời thường: chạy lại công cụ dựng thẻ mất vài giây, còn chụp một khoảnh khắc đẹp ở môn mới cần cho người chơi ảo vào trận, tìm đúng khung, kiểm bằng mắt. Chúng tôi đã ưu tiên việc khác. Việc này đang nằm trong danh sách, cùng với một quy tắc mới: mở rộng nội dung ứng dụng thì chụp lại ảnh thẻ trong cùng lượt phát hành.
Những gì chúng tôi rút ra
- Thẻ chia sẻ là trang đầu tiên của ứng dụng, không phải phần phụ làm cho có. Nhiều người sẽ chỉ thấy tấm ảnh đó rồi quyết định.
- Chụp thứ người dùng thật sự thấy, ở tư thế người dùng thật sự cầm máy, vào lúc có chuyện đang xảy ra.
- Không viết tay thứ gì có thể sinh ra từ dữ liệu. Số lượng, thể loại, tên miền đều lấy từ danh sách chung, để không bao giờ lệch.
- Chữ và ảnh phải cùng cập nhật. Sửa một mà quên một là nói nửa sự thật.
Lần tới bạn gửi đường dẫn một ứng dụng AppGiaiTri cho ai đó, tấm ảnh hiện ra là một khung hình thật, từ một lượt chơi thật. Nếu nó chưa khớp với những gì bạn thấy khi mở ra, chúng tôi biết — và đang sửa.
Câu hỏi thường gặp
Ảnh hiện ra khi gửi đường dẫn qua tin nhắn gọi là gì?
Đó là thẻ chia sẻ, được dựng từ ảnh đại diện, tiêu đề và mô tả mà trang web khai báo trong phần đầu trang. Ứng dụng nhắn tin đọc các khai báo này một lần rồi hiển thị thành thẻ dưới đường dẫn.
Ảnh thẻ chia sẻ nên có kích thước bao nhiêu?
Kích thước phổ biến là 1200×630 điểm ảnh, tỉ lệ gần 1,91:1. Vì thẻ hiện rất nhỏ trên điện thoại, chữ trên ảnh phải to và ít, phần quan trọng nên nằm ở giữa để không bị cắt.
Vì sao đổi ảnh rồi mà gửi đường dẫn vẫn hiện ảnh cũ?
Các nền tảng nhắn tin và mạng xã hội lưu lại thẻ đã đọc trong một thời gian. Cách chắc chắn là đổi đường dẫn của tệp ảnh, hoặc dùng công cụ của nền tảng để yêu cầu đọc lại trang.
Ảnh trên thẻ chia sẻ của AppGiaiTri có phải ảnh thật không?
Có. Ảnh bên trái mỗi thẻ là màn hình chụp giữa một lượt chơi thật, ở khổ điện thoại dọc, không vẽ thêm. Một số thẻ chưa được chụp lại sau khi ứng dụng thêm nội dung mới, và đang được cập nhật.
Gửi đường dẫn ứng dụng cho bạn thì bạn có phải cài gì không?
Không. Bạn bè bấm vào đường dẫn là ứng dụng mở ngay trên trình duyệt. Nếu thích, họ có thể thêm vào màn hình chính để lần sau mở nhanh như ứng dụng thường.
Vì sao ứng dụng web khó có ảnh đại diện đẹp khi chia sẻ?
Nhiều ứng dụng web vẽ toàn bộ hình ảnh bằng mã sau khi mở, trong khi thẻ chia sẻ chỉ đọc được ảnh tĩnh có sẵn. Người làm phải tự chụp và dựng ảnh thẻ, và chụp lại mỗi khi ứng dụng thay đổi.
