Open Graph và Twitter Cards cơ bản

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 Thích hay Chia sẻ một bài viết, nhiều nhất thì Facebook chỉ nhận ra liên kết bài viết thôi. Muốn nó biết bài viết đó có tiêu đề là gì, phần mô tả, hình đại diện… thì mình phải chỉ cho nó các phần đó.

Open Graph và Twitter Cards 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ụ trên Facebook.

Và trên Twitter.

Cấu trúc cơ bản của Open Graph và Twitter Cards

Bạn thêm các meta sau vào giữa cặp thẻ <head></head>.

<meta property="og:url" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:type" content="">
<meta property="og:image" content="">
<meta property="og:site_name" content="">
<meta property="og:locale" content="">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">

og:url: Đường dẫn của trang.
og:title, twitter:title: Tiêu đề trang.
og:description, twitter:description: Mô tả.
og:type: Loại, thường có giá trị là:
- website: Dành cho trang chủ.
- object: Dành cho trang chuyên mục, thẻ…
- article: Dành cho trang bài viết.
- book: Nếu là trang liên quan đến sách.
og:image, twitter:image: Đường dẫn đến hình ảnh muốn hiển thị.
og:site_name: Tên của trang.
og:locale: Vị trí của trang.
twitter:site: Tên người dùng của tài khoản Twitter.

Xem một ví dụ

<meta property="og:url" content="https://inithtml.com/html-css/nhung-facebook-vao-website-cua-ban/">
<meta property="og:title" content="Nhúng Facebook vào website của bạn – Init HTML">
<meta property="og:description" content="Bài viết này hướng dẫn nhúng Facebook: Trang, Bình luận, Thích, Chia sẻ, Gửi... vào website của bạn.">
<meta property="og:site_name" content="Init HTML">
<meta property="og:type" content="article">
<meta property="og:image" content="https://inithtml.com/wp-content/uploads/2017/04/facebook-api-580x315.jpg">
<meta property="og:locale" content="vi_VN">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@InitHTML">
<meta name="twitter:title" content="Nhúng Facebook vào website của bạn – Init HTML">
<meta name="twitter:description" content="Bài viết này hướng dẫn nhúng Facebook: Trang, Bình luận, Thích, Chia sẻ, Gửi... vào website của bạn.">
<meta name="twitter:image" content="https://inithtml.com/wp-content/uploads/2017/04/facebook-api-580x315.jpg">

Kết quả: