Nhiều bạn hỏi tại sao web thanhnha.xyz khi like và share Facebook cũng như Google plus thì ra hình đại diện và đầy đủ cả tên bài viết, mô tả,... Hôm này mình xin tổng hợp và giới thiệu các bạn một giao thức mới có tên là Open Graph sẽ giúp chúng ta giải quyết vấn đề trên
Đầu tiên chúng ta tìm hiểu Open Graph là gì?
Facebook Open Graph là gì?
Facebook Open Graph là 1 giao thức dùng để giao tiếp giữa website của bạn với mạng xã hội facebook. Hay nói cách khác Open Graph chính là cầu nối giúp website của bạn trở thành một phần của mạng xã hội để cho việc quảng bá website và tương tác mạng xã hội được dễ dàng hơn.
Facebook Open Graph bao gồm một tập hợp meta tags giúp bạn định nghĩa nội dung trên website thành dữ liệu có cấu trúc mà Facebook có thể hiểu được. khi bạn share, like 1 link hoặc cập nhật 1link trên status, nếu website của bạn không có sử dụng Opne Graph thì Facebook chỉ nhận ra link bài viết mà thôi.
Khi chèn Open Graph vào website nó sẽ làm cho web pages mà bạn chia sẻ trở thành đối tượng có các thuộc tính mà mạng xã hội yêu cầu như là title, description, ảnh thumbnail…Vì thế link chia sẻ sẽ có đầy đủ ảnh thumbnail, description do bạn chỉ định để lôi kéo người đọc click theo chủ ý của bạn.
Cách chèn Facebook Open Graph vào website
Nếu bạn thiết kế website bằng wordpress bạn có thể xem xét sử dụng plugin SEO by Yoast hoặc plugin này. Sau khi cài Yoast wordpress SEO bạn cấu hình như sau: vào SEO->social->check vào Add OpenGraph meta data.
Nếu bạn không dùng wordpress thì phải làm bằng tay để chèn các thẻ này vào phần
Khai báo ứng dụng Facebook vào web
Đầu tiên là chúng ta cần đăng ký một ứng dụng Facebook và chèn vào website như code dưới đây.
Code mẫu
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '258681227639874',
xfbml: true,
version: 'v2.3'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) { return; }
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/vi_VN/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
Chú ý là ứng dụng cho chính xác tên miền của bạn, appId: '258681227639874' - đây chính là id app bạn đăng ký được.
Một số thuộc tính của Facebook Open Graph
Og:title: Đây là nơi bạn đặt tiêu đề cho nội dung bài viết của bạn. Hãy nghĩ nó giống như thẻ title html mà Search Engine sử dụng. Khi tạo or:title hãy giữ số kí tự ít hơn 95.
Ví dụ:
Code mẫu
<meta property="og:title" content="Mạng thư viện"> </meta>
Og:type: Đây là nơi bạn mô tả loại hình nội dung mà bạn chia sẻ. Nó có thể là video, ảnh, bài viết blog…Đây là danh sách đầy đủ bạn có thể nghiên cứu khi định hình nội dung cho mình.
Ví dụ:
Code mẫu
<meta property="og:title" content="Mạng thư viện"> </meta>
<meta property="og:type" content="article"> </meta>
og: description: Giống như meta description html, nó sẽ dùng mô tả nội dung. Bạn không quan trọng nó có nhiều từ khóa trong đó hay không thay vì đó bạn nên tiếp cận việc viết descipton hấp dẫn lôi cuốn để nhận được nhiều click. Giới hạn trong khoảng 297 kí tự.
Ví dụ:
Code mẫu
<meta property="og:title" content="Mạng thư viện"> </meta>
<meta property="og:type" content="article"> </meta>
<meta property="og:description" content="Cùng làm SEO là một đội ngũ yêu thích công việc làm SEO, giúp bạn cũng như doanh nghiệp bạn đưa sản phẩm và thương hiệu tới người tiêu dùng"> </meta>
og:image: Bằng cách sử dụng thẻ này, Facebook sẽ đưa ra một hình ảnh thumbnail khi ai đó chia sẻ url của bạn, và một hình ảnh nhỏ sẽ xuất hiện bên cạnh nội dung bạn chia sẻ. Đây là cách làm nổi bật status của bạn so với các status được cập nhật bằng text trên timeline người khác.
Vậy làm thế nào có thể sử dụng thẻ này. Facebook có vài điều kiện như là ảnh phải có kích thước ít nhất 50pxx50px nhưng hình ảnh chuẩn nên là một ảnh lớn hơn tầm 200x200px. Và dung lượng không được nhiều hơn 5mb.
Chuẩn Nha hay dùng kích thước 960x540px
Og:url: Thẻ này bạn sẽ đặt url chính (canonical url) của trang bạn chia sẻ nó quan trọng bởi vì đôi lúc bạn sẽ có nhiều hơn 1 URL cho cùng 1 nội dung.. Sử dụng thẻ này sẽ đảm bảo tất cả những gì người khác chia sẻ trên facebook đều đi đến 1 url gốc mà bạn chỉ định, tránh phân tán, nó sẽ gúp bạn về facebook Edgerank.
Og:title, og:descipton, og:image, og:url sẽ là 4 thứ tối thiểu bạn phải sử dụng khi thiết lập Open Graph cho website.
Og:site_name: Chỉ cho Facebook tên của website. Bạn không thực sự cần thẻ này nhưng nó cũng không ảnh hưởng gì nhiều nếu có nó.
fb:admins: Nếu bạn có 1 fanpage và bạn muốn nhận đuợc nhiều dữ liệu trong facebook Insights, thì bạn phải dùng thẻ này. Nó chỉ cho cho Facebook bạn là chủ site và nó kết nối facebook fanpage tới website của bạn.
Như vậy các thẻ meta không chỉ dành riêng cho công cụ tìm kiếm mà các trang mạng xã hội cũng sử dụng. Bạn tối ưu các thẻ meta trên website cho công cụ tìm kiếm để tăng click và cải thiện vị trí xếp hạng thì bạn cũng nên làm điều đó với Facebook thông qua các thẻ meta trong giao thức Open Graph.
Lỗi của Facebook Open Graph thường gặp
Một lỗi hay gặp của Open Graph đó là không lấy được hình ảnh, tiêu đề, hay mô tả...
- Để khắc phục lổi này thì bạn nên kiểm tra lại các thẻ META Open Graph đã đúng chưa ?
- Hoặc vào công cụ mà Debug của facebook cung cấp để xóa cache đi.
Và ngay bây giờ hãy tối ưu website của mình để dễ dàng chia sẻ trên mạng xã hội Facebook hơn tạo sự tương tác tốt nhất với người dùng và website.