Tuy nhiên, vấn đề post link ở các MXH đôi lúc làm người post khó chịu bởi nội dung do MXH lấy chẳng ăn nhập gì cả. Mình lấy FaceBook làm một ví dụ:
Có lẽ phần mô tả như trên không thể làm cho bạn hài lòng được, mặc dù FaceBook đã có nhiều chỉnh sửa nhằm giúp cho việc lấy nội dung được chính xác hơn nhưng cũng chưa thể triệt để, và ngay cả tính năng cho phép người dùng tự edit title, description cũng trở nên thừa thải vì người<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" /> dùng... siêu làm biếng
Giải pháp:
Lần mò trên mạng tôi tìm được 2 phương pháp giải quyết cho vấn đề này:
Phương pháp 1: Thay thế hình ảnh bằng tag link
Phương pháp này có hạn chế là chỉ giúp bạn thay đổi được hình ảnh đại diện cho bài viết (phần chính tạo nên sự chú ý cho người dùng) mà không thể giúp bạn chỉnh sửa tiêu đề, mô tả.
Code:
<link rel="image_src" href="link_to_thumbnail" />
Bạn chỉ cần thay thế liên kết đến thumbnail hoặc ảnh bạn muốn lấy làm thumbnail cho bài viết và đặt thẻ này ở header của trang là được. Đối với các bạn lập trình viên, các bạn có thể thay đổi nhiều thứ ở link như logo cho link trang chủ, thumbnail cho nội dung trang...
Nhưng tuyệt đối từng thay đổi những giá trị khác nhé. Giờ hãy thử chèn đoạn mã trên vào header và cảm nhận.
Phương pháp 2: Sử dụng Open Graph Tags
Bộ thư viện Open Graph Tags được nhiều MXH dùng để trích lọc nội dung từ một link nào đó khá nhiều. Trang develop của FaceBook cũng có bài hướng dẫn và giới thiệu về Open Graph Tags dùng cho nút Like, nếu bạn quan tâm bạn có thể đọc sơ qua.
Open Graph tags là dạng tag bạn dùng để bổ sung thêm vào các blog, các website cá nhân rất hiệu quả khi nó tuơng tác với các MXH. Open Graph tags có thể viết như thế này:
Code:
<meta property="og:tag name" content="tag value"/>
Trong đó tag name là tên của loại Open Graph tags và tag value chính là giá trị của nó.
Bạn có bản danh sách các tag name như sau:
og:title - định dạng tiêu đề trang
og:type - loại dữ liệu. Bạn phải chọn từ danh sách value tương ứng của nó mà không thể tự khai báo bậy bạ.
og:image - URL đến phần hình ảnh đại diện. Hình ảnh nên có chuẩn 50px x 50px sẽ tốt hơn.
og:url - đường dẫn canonical (có ai biết nó là gì không vậy?). Nếu bạn không biết về nó, hãy đọc bài này (rel="canonical" - chỉ định bản gốc, bản sao chép (google)).
og:site_name - thay thế bằng tên Website của bạn nhé.
Như vậy, để định dạng dữ liệu cho phần link trên MXH tôi có một vài tag sau:
Code:
<meta property="og:image" content="link đến ảnh đại diện"/>
<meta property="og:title" content="Tiêu đề"/>
<meta property="og:site_name" content="Tên website"/>
<meta property="og:url" content="link đến bài viết"/>
<meta property="og:description" content="mô tả cho nội dung" />
Còn nhiều định dạng tag nữa mà có thể bạn quan tâm, các bạn xem thêm ở link này nhé.
Những Open Graph tags chúng ta cũng bổ sung ở header luôn nhé mọi người.
Và đây là kết quả: