Bài đăng ngày: 7/20/2015 12:40:00 PM
Blogminhvan
Hiện thị đúng hình ảnh Blog của bạn trên facebook. Có bao giờ bạn thử share bài viết từ Blog của mình lên mạng nhưng hình ảnh kèm theo không như mong muốn hoặc không có không? Vấn đề luôn luôn tìm thấy với chia sẻ URL trên Facebook là bạn thường không kiểm soát được hình ảnh và văn bản mô tả đi kèm với URL.
Vậy, làm thế nào để bảo với facebook rằng với link bạn sẽ post, share sẽ đi với hình ảnh này…Tất nhiên là chúng ta phải tuân theo chuẩn để facebook có thể hiểu và hiển thị đúng hình ảnh mong muốn. Chúng ta sẽ sử dụng Open Graph Tags
Để thêm Open Graph Tags vào Blog của bạn trước hết bạn sao lưu temp đã có.
sau đó các bạn thêm đoạn sau vào trước thẻ <head>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'
xmlns:fb='http://www.facebook.com/2008/fbml'
xmlns:og='http://ogp.me/ns#'>
Open Graph Tags cho phép các nhà phát triển web để biến trang web của họ vào đối tượng Facebook “Graph”, cho phép một mức độ nhất định tuỳ biến thông tin được thực hiện qua từ một trang web khi một trang được “recommended”, “liked” , hoặc chỉ chia sẻ chung chung. Thông tin được thiết lập thông qua các thẻ META tùy chỉnh trên trang nguồn. Chúng ta hãy nhìn vào thẻ META Facebook khác nhau sử dụng để cho phép bạn tùy chỉnh như thế nào trang web của bạn được chia sẻ.
Tất cả các thẻ meta Open Graph Tags được bắt đầu với og:, sau đó tiếp tục thiết lập với các giá trị cụ thể. Các dữ liệu liên quan đều thiết lập nội dung trong thuộc tính content:
<meta property=”og:{tagName}” content=”{tagValue}”/>
Các bạn theme đoạn bên dưới vào sau thẻ <head> và trước thẻ </head>
<!-- Open Graph Meta Tags BEGIN -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<!-- Open Graph Meta Tags END -->
Sử dụng thẻ META đơn giản này, bạn có thể nói cho Facebook những hình ảnh, văn bản, và nhiều hơn nữa để sử dụng khi chia sẻ trang web của bạn. Chúng ta hãy xem xét một vài thẻ META quan trọng!
image
Thẻ META hình ảnh chỉ cho Facebook sử dụng hình ảnh cụ thể khi trang được chia sẻ, tùy trang mà bạn có thể lập trình các hình ảnh khác nhau:
<meta property=”og:image” content=”” />
Tốt nhất là sử dụng hình ảnh vuông, như Facebook sẽ hiển thị chúng trong vấn đề này. Hình ảnh đó phải có ít nhất 50×50 trong bất kỳ hình thức hình ảnh thường được hỗ trợ (JPG, PNG, vv)
title
Tiêu đề đi cùng với URL
<meta property=”og:title” content=”” />
Trong hầu hết các trường hợp sẽ là tiêu đề bài viết hoặc tiêu đề trang.
url
URL phải là địa chỉ của một trang nhất định:
<meta property=”og:url” content=”” />
site_name
Facebook cung cấp các tên mà bạn muốn trang web của bạn được công nhận bởi:
<meta property=”og:site_name” content=”“/>
Điều này là rất hữu ích cho Facebook có thể không có cách nào biết được ngoài thẻ META này.
type
Facebook cung cấp các loại trang web mà bạn muốn trang web của bạn được phân loại theo:
<meta property=”og:type” content=”blog” />
Thêm về Facebook Open Graph META Tags
Các thẻ META cung cấp ở trên chỉ là một vài trong số các thẻ Facebook Open Graph META Tags. Nó còn quy định các thẻ META cho:
- Facebook cài đặt ứng dụng cụ thể, nếu trang web của bạn cũng có một ứng dụng Facebook.
- Hoạt động.
- Doanh nghiệp.
- Nhóm
- Địa điểm.
Chia sẻ Kiến thức - Thủ thuật - Kinh nghiệm mà tôi đã học được từ nhiều nguồn khác nhau cho bạn. Hy vọng với kiến thức đã chọn lọc, nhỏ bé này sẽ giúp ích cho bạn. Hãy thường xuyên ghé thăm Blog Minh Văn để cùng tôi trải nghiệm, khám phá những kiến thức mới và đừng quên chia sẻ kiến thức này cho bạn bè của bạn. Thank you!
