1. Vấn đề khi share link Techmaster lên Facebook

Khi chia sẻ link các khoá học, bài viết của Techmaster trên Facebook, có một số trường hợp hiển thị thumbnail là ảnh Google nhìn không được đẹp cho lắm. Ví dụ với khoá Flutter:

Khi share trên tường cá nhân
Khi share trên tường cá nhân và gửi messenger

 

Khi paste link vào phần comment
Khi paste link vào phần comment

 Có 2 nguyên nhân:

  1. Ảnh có chiều rộng quá lớn (khoảng 1920px)

  2. Ảnh có chiều rộng quá bé (khoảng 500px)

Như trong trường hợp trên, ảnh thumbnail của khoá Flutter đang có chiều rộng là 517px:

Chiều rộng 517px
Chiều rộng 517px

Với trường hợp ảnh có chiều rộng quá lớn (khoảng 1920px), ví dụ như khoá UI/UX:

Cũng không hiện ảnh thumbnail như mong muốn
Cũng không hiện ảnh thumbnail như mong muốn

2. Cách khắc phục

Các ảnh thumbnail cho khoá học và blog cần có:

  • Chiều rộng tối thiểu là 600px và tối đa là 1280px
  • Tỉ lệ chiều rộng/chiều cao là 1.4

Ví dụ, với khoá Flutter, mình resize lại ảnh để chiều rộng tăng lên 600px, sau đó truy cập vào trang https://developers.facebook.com/tools/debug để yêu cầu Facebook thu thập lại thông tin URL

Paste link rồi bấm Debug
Paste link rồi bấm Debug
Bấm Thu thập lại
Bấm Thu thập lại
Thu thập lại xong thì bấm Debug
Thu thập lại xong thì bấm Debug

OK, giờ mình share lại trên Facebook:

Ảnh thumbnail đã hiển thị đúng
Ảnh thumbnail đã hiển thị đúng

 

Paste link vào comment giờ cũng đẹp hơn
Paste link vào comment giờ cũng đẹp hơn

Tương tự, với khoá UI/UX, mình sẽ resize ảnh để chiều rộng chỉ còn 1280px, sau đó lại yêu cầu Facebook thu thập lại thông tin ảnh thumbnail:

Quy trình Debug
Quy trình Debug

 Share lại trên Facebook nào:

Đẹp hơn rồi đó
Đẹp hơn rồi đó

3. Chốt lại lần nữa nhé

Các ảnh thumbnail cho khoá học và blog cần có:

  • Chiều rộng tối thiểu là 600px và tối đa là 1280px
  • Tỉ lệ chiều rộng/chiều cao là 1.4