Cấp bậc tác giả:

SEO

Giải quyết vấn đề đưa liên kết lên FaceBook hay các Mạng xã hội

Được viết bởi webmaster ngày 19/04/2015 lúc 12:58 PM
Chắc nhiều bạn cũng biết nhiều về MXH rồi nhỉ, nói nữa đâm ra nó thừa. MXH là một môi trường quảng bá web khá tốt cho những bạn làm website nói riêng và những người buôn bán thông qua kênh Internet nói chung.
  • 0
  • 1906

Giải quyết vấn đề đưa liên kết lên FaceBook hay các Mạng xã hội

Loading...

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ụ:

faceboo-photo-link-1.jpg

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ả:

faceboo-photo-link-2.jpg

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

Loading...

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML