Open Graph là gì?

Đối với những webmaster thường hay tiếp xúc với mạng xã hội Facebook thì họ không còn lạ lẫm với Open Graph.

Giới thiệu về Open Graph

Open graph là gì, open graph la gi — Open graph la gi

Giao thức Open Graph được tạo bởi Facebook, với chức năng làm cho bất kỳ trang web nào cũng có thể có các chức năng tương tự như các đối tượng (object) trên Facebook, hay với chức năng làm cho nội dung của website chúng ta dễ dàng được nhận ra bởi các mạng xã hội, khi ai đó chia sẻ nội dung của chúng ta thì với việc sử dụng Open Graph, mạng xã hội có thể hiển thị thông tin chính xác về nội dung được chia sẻ.

Bạn có thể kiểm tra đầy đủ tại trang web của Open Graph.

Ví dụ về việc sử dụng Open Graph cho WordPress

Sử dụng Open Graph cho website WordPress như thế nào, dưới đây là một ví dụ về việc chúng ta sẽ lấy tiêu đề, trích đoạn (excerpt), URL và hình ảnh thumbnail của bài viết và sử dụng chúng như Metadata của Open Graph.

Nhưng đầu tiên giải thích tại sao chúng ta lại chọn ví dụ này, vì chức năng này khá quan trọng, mỗi lần chia sẻ thông tin thì Facebook sẽ hiển thị Title, URL, Thumbnail và trích đoạn chuẩn theo nội dung của bài viết gốc.

Chúng ta sẽ sử dụng các Open Graph metadata như sau:

function wptuts_opengraph_for_posts() {
    if ( is_singular() ) {
        global $post;
        setup_postdata( $post );
        $output = '<meta property="og:type" content="article" />' . "\n";
        $output .= '<meta property="og:title" content="' . esc_attr( get_the_title() ) . '" />' . "\n";
        $output .= '<meta property="og:url" content="' . get_permalink() . '" />' . "\n";
        $output .= '<meta property="og:description" content="' . esc_attr( get_the_excerpt() ) . '" />' . "\n";
        if ( has_post_thumbnail() ) {
            $imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
            $output .= '<meta property="og:image" content="' . $imgsrc[0] . '" />' . "\n";
        }
        echo $output;
    }
}
add_action( 'wp_head', 'wptuts_opengraph_for_posts' );

Đoạn code này sẽ chèn các Open Graph metadata vào trong cặp thẻ <head>. Dán đoạn code trên vào vị trí cuối cùng của file functions.php của themes bạn đang dùng. Hãy xem mã nguồn trang web thay đổi (nằm trong cặp thẻ <head>) trước và sau khi dán đoạn code này vào.

Tiếp theo, chúng ta cập nhật phần thẻ mở <html> của WordPress

Phần thẻ <html> mặc định như sau:

<html <?php language_attributes(); ?>>

Chúng ta sẽ đổi thành:

<html <?php language_attributes(); ?> prefix="og: http://ogp.me/ns#">

Tiến hành Save lại.

Đến đây là xong rồi, các bài viết, page đã tương thích với Open Graph, đơn giản quá phải không. Bạn hãy thử test lại bằng việc chia sẻ một bài viết lên facebook và xem thử các thông tin Title, URL, Thumbnail và trích đoạn hiển thị đó có chuẩn (khác với lúc chưa sử dụng Open Graph) hay không :sexy:

Chúc bạn thành công!

Giới thiệu về Open Graph

Ví dụ về việc sử dụng Open Graph cho WordPress

Bài viết liên quan:

Reader Interactions

Leave a Reply Cancel reply