Open Graph là gì và tại sao ta cần nó?

[quote style=”1″]The Open Graph protocol enables any web page to become a rich object in a social graph.[/quote]

Bài viết này giới thiệu Open Graph, cách chèn Open Graph vào website bằng code và plugin của WordPress để có thể Like, Share trang web dễ dàng lên Facebook, Twitter.

Open Graph là gì

Open Graph là gì?

Open Graph là gì?

Nói một cách dễ hiểu, các mạng xã hội như Facebook, Twitter… không thể tự nhận ra các thông tin trên trang web của bạn. Vì vậy, khi bạn muốn Like hay Share một bài viết, nhiều nhất thì Facebook chỉ nhận ra link bài viết thôi. Muốn nó biết bài viết đó có tiêu đề là gì, phần mô tả (description), thumbnail… thì mình phải chỉ cho nó các phần đó.

Để làm việc này, ta dùng Open Graph. Open Graph đơn giản là một cách để làm cho trang web thành một đối tượng có các thuộc tính mà mạng xã hội đòi hỏi. Các thuộc tính này do ta thiết lập, bằng code hoặc bằng plugin.

Chèn Open Graph vào trang web rồi, khi bạn dán link trang web đó vào status Facebook, nó tự động nhận được title, thumbnail, description, url như thiết lập.

Cách chèn Open Graph vào trang web

Facebook nhận được title, thumbnail… dựa vào Open Graph

Chi tiết về Open Graph

Open Graph sử dụng các thẻ meta trong HTML, với các thuộc tính property và content để đưa thông tin cần thiết vào. Ví dụ, để quy định tiêu đề, ta làm như sau:

<meta property="og:title" content="Open Graph là gì và tại sao ta cần nó?" />

Bốn thuộc tính bắt buộc có trên mỗi trang web là:

  • og:title – Tiêu đề trang web. Ví dụ, “Open Graph là gì và tại sao ta cần nó?”.
  • og:type – Loại đối tượng, ví dụ, “video.movie”. Tùy loại đối tượng mà ta cần khai báo thêm một số thuộc tính khác. Chẳng hạn, hình ảnh thì cần khai báo thêm kích thước.
  • og:image – Đường dẫn tới ảnh thumbnail sẽ hiển thị (khi bạn like, share…).
  • og:url – Đường dẫn tới trang web, ví dụ, “http://cosmospham.com/blog/open-graph-la-gi/&#8221;.

Tham khảo thêm các thuộc tính khác tại: http://ogp.me/

Dùng plugin để tự động chèn Open Graph

Yoast WordPress SEO là một plugin rất tốt cho WordPress. Sau khi cài đặt, vào phần Yoast WordPress SEO: Social, check mục Add OpenGraph meta data và Add Twitter card meta data để thêm các thẻ ứng với mạng Facebook và Twitter.

Cách thêm Open Graph vào Blog WordPress

Check chọn hai mục như trong hình

4 thoughts on “Open Graph là gì và tại sao ta cần nó?

  1. Giờ mới biết trước giờ tại sao khi share link trên FB hay G+ không ra dc thông tin mình muốn, cứ nghĩ là khai báo meta description là xong. Cảm ơn bài viết và tác giả nhiều🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s