Giới thiệu
Giao thức Open Graph cho phép bất kỳ trang web nào trở thành đối tượng phong phú trong biểu đồ xã hội. Ví dụ, giao thức này được sử dụng trên Facebook để cho phép bất kỳ trang web nào có cùng chức năng như bất kỳ đối tượng nào khác trên Facebook.
Mặc dù có nhiều công nghệ và lược đồ khác nhau và có thể kết hợp với nhau, nhưng không có một công nghệ nào cung cấp đủ thông tin để biểu diễn phong phú bất kỳ trang web nào trong biểu đồ xã hội. Giao thức Open Graph xây dựng trên các công nghệ hiện có này và cung cấp cho các nhà phát triển một thứ để triển khai. Sự đơn giản của nhà phát triển là mục tiêu chính của giao thức Open Graph, giao thức này đã đưa ra nhiều quyết định thiết kế kỹ thuật .
Siêu dữ liệu cơ bản
Để biến các trang web của bạn thành các đối tượng đồ thị, bạn cần thêm siêu dữ liệu cơ bản vào trang của mình. Chúng tôi đã dựa phiên bản ban đầu của giao thức trên RDFa , nghĩa là bạn sẽ đặt <meta>các thẻ bổ sung vào <head>trang web của mình. Bốn thuộc tính bắt buộc cho mỗi trang là:
og:title- Tiêu đề của đối tượng sẽ xuất hiện trong biểu đồ, ví dụ: "The Rock".og:type- Kiểu đối tượng của bạn, ví dụ: "video.movie". Tùy thuộc vào kiểu bạn chỉ định, các thuộc tính khác cũng có thể được yêu cầu.og:image- URL hình ảnh phải thể hiện đối tượng của bạn trong biểu đồ.og:url- URL chuẩn của đối tượng sẽ được sử dụng làm ID cố định trong biểu đồ, ví dụ: "https://www.imdb.com/title/tt0117500/".
Ví dụ, sau đây là đánh dấu giao thức Open Graph cho The Rock trên IMDB :
<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
Siêu dữ liệu tùy chọn
Các thuộc tính sau đây là tùy chọn cho bất kỳ đối tượng nào và thường được khuyến nghị:
og:audio- Một URL tới tệp âm thanh đi kèm với đối tượng này.og:description- Mô tả đối tượng của bạn trong một đến hai câu.og:determiner- Từ xuất hiện trước tiêu đề của đối tượng này trong một câu. Một enum của (a, an, the, "", auto). Nếuautođược chọn, người dùng dữ liệu của bạn sẽ phải chọn giữa "a" hoặc "an". Mặc định là "" (trống).og:locale- Vị trí các thẻ này được đánh dấu. Theo định dạnglanguage_TERRITORY. Mặc định làen_US.og:locale:alternate- Trang này có sẵn ở nhiều ngôn ngữ khác nhau.og:site_name- Nếu đối tượng của bạn là một phần của một trang web lớn hơn, tên sẽ được hiển thị cho toàn bộ trang web. Ví dụ: "IMDb".og:video- URL tới tệp video bổ sung cho đối tượng này.
Ví dụ (ngắt dòng chỉ nhằm mục đích hiển thị):
<meta property="og:audio" content="https://example.com/bond/theme.mp3" />
<meta property="og:description"
content="Sean Connery found fame and fortune as the
suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="https://example.com/bond/trailer.swf" />
Sơ đồ RDF (trong Turtle ) có thể được tìm thấy tại ogp.me/ns .
Thuộc tính có cấu trúc
Một số thuộc tính có thể có siêu dữ liệu bổ sung được đính kèm vào chúng. Những siêu dữ liệu này được chỉ định theo cùng cách như các siêu dữ liệu khác với propertyvà content, nhưng propertysẽ có thêm :.
Thuộc tính này og:imagecó một số thuộc tính có cấu trúc tùy chọn:
og:image:url- Giống hệt vớiog:image.og:image:secure_url- Một url thay thế để sử dụng nếu trang web yêu cầu HTTPS.og:image:type- Kiểu MIME cho hình ảnh này.og:image:width- Số lượng pixel rộng.og:image:height- Số lượng điểm ảnh cao.og:image:alt- Mô tả về nội dung trong hình ảnh (không phải chú thích). Nếu trang chỉ định og:image thì phải chỉ địnhog:image:alt.
Một ví dụ hình ảnh đầy đủ:
<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />
Thẻ này og:videocó các thẻ giống hệt như og:image. Sau đây là một ví dụ:
<meta property="og:video" content="https://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />
Thẻ này og:audiochỉ có 3 thuộc tính đầu tiên (vì kích thước không có ý nghĩa đối với âm thanh):
<meta property="og:audio" content="https://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />
Mảng
Nếu một thẻ có thể có nhiều giá trị, chỉ cần đặt nhiều phiên bản của cùng một <meta>thẻ trên trang của bạn. Thẻ đầu tiên (từ trên xuống dưới) được ưu tiên trong các xung đột.
<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image" content="https://example.com/rock2.jpg" />
Đặt các thuộc tính có cấu trúc sau khi bạn khai báo thẻ gốc của chúng. Bất cứ khi nào một phần tử gốc khác được phân tích cú pháp, thuộc tính có cấu trúc đó được coi là đã hoàn thành và một phần tử khác được bắt đầu.
Ví dụ:
<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="https://example.com/rock2.jpg" />
<meta property="og:image" content="https://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />
có nghĩa là có 3 hình ảnh trên trang này, hình ảnh đầu tiên là 300x300, hình ảnh ở giữa có kích thước không xác định và hình ảnh cuối cùng có 1000chiều cao tính theo px.
Các loại đối tượng
Để đối tượng của bạn được biểu diễn trong biểu đồ, bạn cần chỉ định loại của nó. Điều này được thực hiện bằng cách sử dụng og:typethuộc tính:
<meta property="og:type" content="website" />
Khi cộng đồng đồng ý về lược đồ cho một kiểu, nó được thêm vào danh sách các kiểu toàn cục. Tất cả các đối tượng khác trong hệ thống kiểu là CURIE có dạng
<head prefix="my_namespace: https://example.com/ns#">
<meta property="og:type" content="my_namespace:my_type" />
Các kiểu toàn cục được nhóm thành các kiểu dọc. Mỗi kiểu dọc có không gian tên riêng. og:typeCác giá trị cho một không gian tên luôn được thêm tiền tố là không gian tên và sau đó là dấu chấm. Điều này nhằm giảm sự nhầm lẫn với các kiểu không gian tên do người dùng định nghĩa luôn có dấu hai chấm trong đó.
Âm nhạc
- URI không gian tên:
https://ogp.me/ns/music#
og:typegiá trị:
music:duration- số nguyên >=1 - Độ dài của bài hát tính bằng giây.music:album- mảng music.album - Album chứa bài hát này.music:album:disc- số nguyên >=1 - Bài hát này nằm ở đĩa nào của album.music:album:track- số nguyên >=1 - Đây là bài hát nào.music:musician- mảng hồ sơ - Nhạc sĩ đã sáng tác bài hát này.
music:song- music.song - Bài hát trong album này.music:song:disc- số nguyên >=1 - Giống nhưmusic:album:discnhưng ngược lại.music:song:track- số nguyên >=1 - Giống nhưmusic:album:tracknhưng ngược lại.music:musician- tiểu sử - Nhạc sĩ đã sáng tác bài hát này.music:release_date- datetime - Ngày phát hành album.
music:song- Giống hệt như trên music.albummusic:song:discmusic:song:trackmusic:creator- profile - Người tạo danh sách phát này.
music:creator- profile - Người tạo ra đài này.
Băng hình
- URI không gian tên:
https://ogp.me/ns/video#
og:typegiá trị:
video:actor- mảng hồ sơ - Diễn viên trong phim.video:actor:role- chuỗi - Vai trò mà họ đảm nhiệm.video:director- mảng hồ sơ - Đạo diễn của bộ phim.video:writer- mảng hồ sơ - Người viết kịch bản phim.video:duration- số nguyên >=1 - Độ dài của phim tính bằng giây.video:release_date- datetime - Ngày phát hành phim.video:tag- mảng chuỗi - Thẻ từ liên quan đến bộ phim này.
video:actor- Giống hệt video.movievideo:actor:rolevideo:directorvideo:writervideo:durationvideo:release_datevideo:tagvideo:series- video.tv_show - Tập phim này thuộc bộ phim nào.
Một chương trình truyền hình nhiều tập. Siêu dữ liệu giống hệt với video.movie .
Một video không thuộc bất kỳ danh mục nào khác. Siêu dữ liệu giống hệt với video.movie .
Không có chiều dọc
Đây là những đối tượng được xác định toàn cầu, không phù hợp với một chiều dọc nào nhưng lại được sử dụng rộng rãi và được chấp thuận.
og:typegiá trị:
article- URI không gian tên:https://ogp.me/ns/article#
article:published_time- datetime - Thời gian bài viết được xuất bản lần đầu.article:modified_time- datetime - Thời gian bài viết được thay đổi lần cuối.article:expiration_time- datetime - Khi bài viết trở nên lỗi thời sau đó.article:author- mảng hồ sơ - Người viết bài viết.article:section- chuỗi - Tên phần cấp cao. Ví dụ Công nghệarticle:tag- mảng chuỗi - Gắn thẻ các từ khóa liên quan đến bài viết này.
book- URI không gian tên:https://ogp.me/ns/book#
book:author- mảng hồ sơ - Ai đã viết cuốn sách này.book:isbn- chuỗi - ISBNbook:release_date- datetime - Ngày phát hành sách.book:tag- mảng chuỗi - Gắn thẻ các từ liên quan đến cuốn sách này.
profile- URI không gian tên:https://ogp.me/ns/profile#
profile:first_name- chuỗi - Tên thường được cha mẹ đặt cho một cá nhân hoặc do chính họ tự đặt.profile:last_name- chuỗi - Tên được thừa hưởng từ gia đình hoặc hôn nhân và là tên mà cá nhân thường được gọi.profile:username- chuỗi - Một chuỗi ký tự ngắn duy nhất để nhận dạng chúng.profile:gender- enum (nam, nữ) - Giới tính của họ.
website- URI không gian tên:https://ogp.me/ns/website#
Không có thuộc tính bổ sung nào khác ngoài những thuộc tính cơ bản. Bất kỳ trang web nào không được đánh dấu đều phải được coi là og:typetrang web.
Các loại
Các kiểu sau đây được sử dụng khi xác định thuộc tính trong giao thức Open Graph.
| Kiểu | Sự miêu tả | Nghĩa đen |
|---|---|---|
| Boolean | Boolean biểu diễn giá trị đúng hoặc sai | đúng, sai, 1, 0 |
| Ngày giờ | DateTime biểu thị một giá trị thời gian bao gồm ngày (năm, tháng, ngày) và thành phần thời gian tùy chọn (giờ, phút) | Tiêu chuẩn ISO8601 |
| Số đếm | Một kiểu bao gồm tập hợp giới hạn các giá trị chuỗi hằng số (thành viên liệt kê). | Một giá trị chuỗi là thành viên của phép liệt kê |
| Trôi nổi | Một số dấu phẩy động 64 bit có dấu | Tất cả các số nguyên tuân theo các định dạng sau: 1.234 -1.234 1.2e3 -1.2e3 7E-10 |
| Số nguyên | Số nguyên có dấu 32 bit. Trong nhiều ngôn ngữ, số nguyên trên 32 bit trở thành số thực, do đó chúng tôi giới hạn giao thức Open Graph để dễ sử dụng đa ngôn ngữ. | Tất cả các ký tự tuân theo các định dạng sau: 1234 -123 |
| Sợi dây | Một chuỗi các ký tự Unicode | Tất cả các ký tự được tạo thành từ các ký tự Unicode không có ký tự thoát |
| Địa chỉ URL | Một chuỗi ký tự Unicode dùng để xác định một nguồn tài nguyên Internet. | Tất cả các URL hợp lệ sử dụng giao thức https:// hoặc https:// |
Thảo luận và hỗ trợ
Bạn có thể thảo luận về Giao thức đồ thị mở trong nhóm Facebook hoặc trên danh sách gửi thư của nhà phát triển . Hiện tại, giao thức này đang được Facebook ( xem tài liệu của họ ), Google ( xem tài liệu của họ ) và mixi sử dụng . Giao thức này đang được IMDb, Microsoft, NHL, Posterous, Rotten Tomatoes, TIME, Yelp và nhiều trang web khác xuất bản.
Triển khai
Cộng đồng nguồn mở đã phát triển một số trình phân tích cú pháp và công cụ xuất bản. Hãy cho nhóm Facebook biết nếu bạn cũng đã xây dựng được thứ gì đó tuyệt vời!
- Facebook Object Debugger - Trình phân tích cú pháp và trình gỡ lỗi chính thức của Facebook
- Công cụ kiểm tra Google Rich Snippets - Hỗ trợ giao thức Open Graph trong các ngành dọc và công cụ tìm kiếm cụ thể.
- Trình xác thực và tạo đánh dấu PHP - Trình xác thực đầu vào OGP 2011 và trình tạo đánh dấu trong các đối tượng PHP5
- PHP Consumer - một thư viện nhỏ để truy cập dữ liệu Open Graph Protocol trong PHP
- OpenGraphNode trong PHP - một trình phân tích cú pháp đơn giản cho PHP
- PyOpenGraph - một thư viện được viết bằng Python để phân tích thông tin giao thức Open Graph từ các trang web
- OpenGraph Ruby - Ruby Gem phân tích các trang web và trích xuất đánh dấu giao thức Open Graph
- OpenGraph cho Java - lớp Java nhỏ được sử dụng để biểu diễn giao thức Open Graph
- RDF::RDFa::Parser - Bộ phân tích cú pháp Perl RDFa hiểu được giao thức Open Graph
- Plugin WordPress - Plugin WordPress chính thức của Facebook, bổ sung siêu dữ liệu Open Graph vào các trang web chạy bằng WordPress.
- Plugin WordPress OGP thay thế - Một plugin WordPress nhẹ đơn giản giúp thêm siêu dữ liệu Open Graph vào các trang web chạy bằng WordPress.
