Cách Chúng Tôi Khắc Phục Lỗi Hiển Thị Bản Xem Trước Blog

Tôi đã đăng một liên kết đến blog của chúng tôi trên X. Hình ảnh xem trước trông rất sai. Thay vì hình ảnh của một bài viết kỹ thuật, nó lại hiển thị một biểu ngữ quảng cáo.

Tôi đã kiểm tra bảy bài viết gần nhất. Tất cả chúng đều có cùng một biểu ngữ quảng cáo. Các bài phân tích kỹ thuật chuyên sâu của chúng tôi trông giống như quảng cáo. Điều này làm tổn hại đến uy tín của chúng tôi.

Vấn đề rất đơn giản. Mã nguồn của chúng tôi có một quy tắc dự phòng (fallback). Nếu một bài viết không có ảnh đại diện (featured image), nó sẽ sử dụng một biểu ngữ quảng cáo mặc định. Vì chúng tôi không thiết lập ảnh đại diện cho 42 bài viết, nên mọi bài viết đều sử dụng cùng một hình ảnh.

Chúng tôi có hai lựa chọn:

  • Lựa chọn A: Tạo thủ công 42 hình ảnh. Việc này tốn thời gian và tạo thêm khối lượng công việc cho mỗi bài viết mới.
  • Lựa chọn B: Xây dựng một trình tạo hình ảnh động. Việc này sẽ tự động tạo một hình ảnh tùy chỉnh cho mỗi bài viết.

Chúng tôi đã chọn Lựa chọn B. Chúng tôi đã xây dựng một công cụ nhỏ sử dụng PHP GD.

Dưới đây là cách nó hoạt động:

  • Công cụ tạo một tệp PNG 1200x630 theo yêu cầu.
  • Nó sử dụng nền tối và tiêu đề bài viết.
  • Nó lấy tiêu đề từ cơ sở dữ liệu.
  • Nó lưu hình ảnh vào ổ đĩa sau lần hiển thị đầu tiên.
  • Mọi yêu cầu sau đó sẽ sử dụng tệp đã được lưu trong bộ nhớ đệm (cache). Điều này giúp nó hoạt động rất nhanh.

Chúng tôi đã giải quyết được hai vấn đề cụ thể trong quá trình xây dựng này:

  1. Hỗ trợ ngôn ngữ: Việc chỉ sử dụng các phông chữ Latinh như Inter đã khiến văn bản tiếng Nhật hiển thị dưới dạng các ô vuông trống. Chúng tôi đã thêm một bước kiểm tra để chuyển sang Noto Sans JP cho các tiêu đề tiếng Nhật.

  2. Phong cách hình ảnh: Các blog công nghệ chuyên nghiệp như Vercel hay PlanetScale sử dụng các thẻ (cards) tối giản và tông màu tối. Chúng tôi đã mô phỏng phong cách này để xây dựng niềm tin với độc giả.

Những bài học chính dành cho bạn:

  • Hãy kiểm tra lại các bản xem trước trên mạng xã hội của bạn. Sử dụng một công cụ để kiểm tra xem các thẻ og:image có hoạt động hay không.
  • Tránh việc thiết kế thủ công cho mọi bài viết. Việc đó không thể mở rộng quy mô được.
  • Sử dụng một bộ công cụ (stack) đơn giản. PHP GD kết hợp với bộ nhớ đệm ổ đĩa rất nhẹ và hiệu quả.
  • Hãy lập kế hoạch cho đa ngôn ngữ. Luôn bao gồm một phông chữ hỗ trợ đầy đủ bộ ký tự của bạn.

Hình ảnh blog đại diện cho thương hiệu của bạn. Đừng để một hình ảnh dự phòng mặc định làm hỏng ấn tượng đầu tiên.

Nguồn: https://dev.to/susumun/implementing-a-dynamic-ogp-image-generator-for-our-blog-php-gd-per-post-1200-630-cards-46al