Open Graph là gì? Cách cài đặt Open Graph dễ dàng cho website

Sử dụng thẻ Open Graph trong SEO là một kỹ thuật nâng cao có thể giúp cho website gia tăng thứ hạng hiển thị cũng như thu hút traffic hiệu quả. Tuy nhiên kỹ thuật này được ít SEOer biết đến. Vậy Open Graph là gì? và cách cài đặt như thế nào? Hãy cùng tìm hiểu chi tiết trong bài viết này nhé!

1. Open Graph là gì?

Open Graph hay Facebook Open Graph là một giao thức được sử dụng để làm cầu nối giao tiếp giữa website với mạng xã hội. Có thể hiểu, giao thức này giúp nền tảng mạng xã hội như Facebook hiểu, tóm tắt cũng như hiển thị được nội dung của trang web dựa trên đường link dẫn chia sẻ.

Đối với giao thức Open Graph, website đóng vai trò như một đối tượng chứa các thuộc tính cần thiết cho một mạng xã hội.

Ví dụ: Bạn share một liên kết từ website bất kỳ lên dòng trạng thái trên Facebook. Lúc này, nếu trang web có sử dụng giao thức Open Graph thì đường link chia sẻ ở Facebook sẽ hiển thị đầy đủ ảnh thumbnail, phần mô tả,…

Các thuộc tính cơ bản của Open Graph

Og:title: Nơi đặt tiêu đề bài viết, chứa tối đa <95 ký tự.

Og:type: Nơi mô tả thể loại nội dung được chia sẻ như ảnh, bài đăng blog hay video,...

Og:description: Nơi mô tả tổng quan về nội dung bài viết, chứa tối đa 297 ký tự.

Og:image: Nơi hiển thị hình ảnh thumbnail của bài viết được chia sẻ trên Facebook.

Og:url: Nơi đặt url chính của website được chia sẻ. Thuộc tính này bắt buộc phải có nhằm đảm bảo các chia sẻ trên Facebook đều trỏ về một URL gốc đã chỉ định trước đó.

Og:site_name: Thuộc tính được sử dụng để giúp Facebook nhận biết tên website.

fb:admins: Thuộc tính này giúp Facebook hiểu bạn là người quản trị fanpage. Đồng thời, thuộc tính còn giúp kết nối fanpage tới website

2. Các bước kiểm tra Open Graph

Bước 1: Truy cập vào công cụ Facebook Debugger thông qua đường link sau:

Bước 2: Nhập vào thanh tìm kiếm đường link mà bạn cần phân tích. Sau đó, nhấn nút Gỡ lỗi. Lúc này trên màn hình sẽ hiển thị các og tags đang bị lỗi, cùng với đó là thông báo Facebook đã truy cập vào link hay scraped link. Bản xem trước liên kết chia sẻ về wesite trên Facebook được hiển thị tại đây.

Bước 3: Tiến hành chỉnh sửa các lỗi hiển thị trên màn hình

3. Hướng dẫn chi tiết cách chèn Open Graph vào website

Các bước sử dụng plugin trong WordPress

Plugin được sử dụng để cấu hình Open Graph là Yoast SEO

Bước 1: Truy cập vào mục Social và chọn Facebook. Sau đó bạn nhấn chọn Enable

Bước 2: Trên màn hình tại phần Facebook Insight and admins bạn cần điền APP ID vào mục Facebook App ID.

Bước 3: Nhấp vào Save Changes để hoàn tất quá trình chèn Open Graph

Các bước chèn thủ công Open Graph

Bước 1: Bạn mở file function.php và thêm đoạn code sau vào trong thẻ <?php?> của file function.

function doctype_opengraph($output) {

return $output . '

xmlns:og="http://opengraphprotocol.org/schema/"

xmlns:fb="http://www.facebook.com/2008/fbml"';

}

add_filter('language_attributes', 'doctype_opengraph');

Bước 2: Đoạn code sau khi thêm vào file sẽ tự động chèn vào thẻ <head> của website.

function fb_opengraph() {

global $post;

if(is_single()) {

if(has_post_thumbnail($post->ID)) {

$img_src = get_the_post_thumbnail_url(get_the_ID(),'full');

} else {

$img_src = get_stylesheet_directory_uri() . 'wp-content/uploads/2019/08/open-graph-la-gi-cach-cai-dat-de-dang-cho-website.jpg';

}

if($excerpt = $post->post_excerpt) {

$excerpt = strip_tags($post->post_excerpt);

$excerpt = str_replace("", "'", $excerpt);

} else {

$excerpt = get_bloginfo('description');

}

<?php

} else {

return;

}

add_action('wp_head', 'fb_opengraph', 5);

Bước 3: Tiếp tục thêm thẻ Open Graph

Bước 4: Bạn tiến hành khai báo thẻ Open Graph cho website bằng lệnh

add_action(‘wp_head’, ‘fb_opengraph’, 5);

Bước 5: Móc hàm trên vào hook để các thẻ Open Graph được móc tự động vào thẻ <head>

Hướng dẫn tạo thẻ Open Graph nhanh nhất

Bước 1: Lựa chọn sử dụng một trong số các công cụ hỗ trợ tạo thẻ Open Graph sau:

Duplichecker qua đường link: https://www.duplichecker.com/open-graph-generator.php.

Smallseotool qua đường link: https://smallseotools.com/open-graph-generator/.

Web Code qua đường link: https://webcode.tools/open-graph-generator.

Bước 2: Điền các thông tin được yêu cầu vào ô trống tương ứng sau đó nhấn Enter để nhận về các đoạn mã cần thiết

Bước 3: Sao chép và dán đoạn mã code đó vào mã nguồn

Lời kết:

Trên đây là bài viết chia sẻ các thông tin về Open Graph là gì cũng như hướng dẫn cách cài đặt Open Graph nhanh chóng, dễ dàng cho website. Hy vọng bài viết sẽ giúp bạn hiểu và áp dụng thành công giao thức này cho website của mình.

Nếu bạn cần học kiến thức về Digital Marketing mà chưa biết bắt đầu từ đâu hãy nhanh tay đăng kí khóa học Digital Marketing tại trung tâm IMTA đào tạo Digital Marketing từ cơ bản đến nâng cao

Tìm kiếm Blog này

Digital Marketing Mới Bắt Đầu