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://www.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://www.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://www.inithtml.com/wp-content/uploads/2017/04/facebook-api-580x315.jpg">
Kết quả:
Tham khảo thêm:
Chúc các bạn thành công!