Sử dụng thẻ Open Graph trong SEO là một kỹ thuật nâng cao có thể giúp 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 lại đượ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 Vietnix tìm hiểu chi tiết trong bài viết sau ngay nhé.
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. Trong đó, người dùng có thể tùy chỉnh các thuộc tính này thông qua plugin hoặc code.
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
Đối với mỗi website sử dùng Open Graph đều chứa các thuộc tính cơ bản, bao gồm:
- 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 để bạn mô tả tổng quan về nội dung bài viết, chứa tối đa 297 ký tự. Lưu ý: Nội dung mô tả không nên chèn nhiều từ khóa, chỉ nhấn mạnh vào sự hấp dẫn, thu hút người đọc để tăng traffic.
- 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 (hay canonical url) 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 này đượ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 đến website.
Open Graph có cần thiết với website không?
Đối với website, giao thức Open Graph là một yếu tố cần thiết. Bởi vì giao thức này chính là cầu nối giúp cho website hiển thị một phần trên mạng xã hội. Thông qua đó, người dùng có thể dễ dàng thực hiện các hoạt động quảng cáo web và nhận được nhiều sự tương tác hơn.
Cách kiểm tra Facebook Open Graph
Để kiểm tra Facebook Open Graph nhanh chóng và đơn giản, bạn sử dụng công cụ Facebook Debugger với các bước hướng dẫn được chi tiết sau đây:
Facebook Debugger là gì?
Facebook Debugger là một công cụ nổi bật với khả năng phân tích và kiểm tra các lỗi xuất hiện ở website trong quá trình xử lý og tags. Ngoài ra, ở công cụ này còn có tính năng preview giúp bạn xem trước trạng thái hiển thị của đường link khi chia sẻ trên Facebook.
Cách để sử dụng công cụ Facebook Debugger cũng khá đơn giản, không cần bạn phải đăng ký tài khoản đặc biệt. Thay vào đó, bạn chỉ cần một tài khoản Facebook thông thường là đã có thể đăng nhập và tiến hành kiểm tra Facebook Open Graph.
Các bước kiểm tra Open Graph
Chi tiết các bước kiểm tra Open Graph gồm:
- Bước 1: Truy cập vào công cụ Facebook Debugger thông qua đường link sau: https://developers.facebook.com/tools/debug/.
- 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ề website trên Facebook cũng đượ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.
Lưu ý: Facebook sẽ lấy hình ảnh từ trong bộ nhớ cache. Do đó, bạn có thể gặp tình trạng Facebook vẫn hiển thị ảnh cũ trong thẻ og:image dù đã thay ảnh mới. Lúc này, bạn cần xóa cache Facebook bằng công cụ Sharing Debugger. Đây là một công cụ cho phép bạn thu thập và làm mới lại bộ nhớ đệm. Điều này sẽ giúp cho các nội dung luôn cập nhật phiên bản mới nhất mỗi khi chia sẻ website lên Facebook.
Ảnh hưởng của Open Graph đến SEO
Giao thức Open Graph đóng vai trò quan trọng trong việc thúc đẩy hiệu quả hoạt động SEO web. Bằng cách dựa vào những thuộc tính cơ bản của giao thức này, bài viết cũng như trang web của người dùng được hỗ trợ tối ưu hóa trên công cụ tìm kiếm. Ngoài ra, trong quá trình SEO, Open Graph còn có thể giúp SEOer kiểm soát nội dung chia sẻ lên mạng xã hội, gia tăng tỷ lệ tương tác, nâng cao thứ hạng hiển thị cũng như tỷ lệ chuyển đổi (CTR).
Thẻ meta trong Open Graph có nhiệm vụ gì?
Thẻ meta Open Graph là một loại thẻ nằm ở phần <head> của trang, có khả năng cung cấp thông tin về trang (meta tag). Người dùng sử dụng thẻ meta Open Graph có thể giúp các mạng xã hội (Facebook, Zalo, Twitter,…) xác định được các thông tin về trang web đã chia sẻ. Không những vậy, thẻ còn cho phép hiển thị các thông tin này mỗi khi có người dùng chia sẻ về trang web trên mạng xã hội. Hiểu đơn giản, thẻ meta Open Graph chính là một loại structured data (dữ liệu có cấu trúc) mà mạng xã hội Facebook có thể hiểu.
Một số thẻ Open Graph nâng cao
Nếu bạn muốn sử dụng Open Graph ở mức độ chuyên sâu hơn thì cần nắm thêm một số thuộc tính nâng cao của giao thức này, bao gồm:
- og:audio: Nơi để bạn thêm đường link dẫn đến file audio.
- og:description: Nơi để bạn mô tả cụ thể về website mà mình muốn chia sẻ trên mạng xã hội.
- og:determiner: Thẻ thuộc tính này giúp hiển thị các mạo từ “a”, “an”, “the”, “”, “auto” trước object’s title của website. Nếu bạn tùy chỉnh phần content là “auto” dữ liệu sẽ hiển thị là “a” hoặc “an”. Còn nếu để mặc định sẽ xuất hiện “”.
- og:site_name: Thuộc tính này được dùng trong trường hợp trang web là một phần của một trang web lớn hơn. Ví dụ: website A thuộc công ty B (có website B).
- og:video: Nơi chứa đường link dẫn đến file video.
Hướng dẫn chi tiết cách chèn Open Graph vào website
Có 2 cách để bạn chèn Open Graph vào website đơn giản và dễ dàng, đó là sử dụng plugin và thực hiện thủ công. Cụ thể:
Các bước sử dụng plugin trong WordPress
Đối với cách chèn này, plugin được sử dụng để cấu hình Open Graph sẽ là Yoast SEO. Chi tiết các thao tác thực hiện bạn có thể tham khảo qua hướng dẫn sau:
- Bước 1: Truy cập vào mục Social và chọn Facebook. Sau đó, bạn nhấn chọn Enabled.
- Bước 2: Trên màn hình, tại phần Facebook Insights and admins bạn cần điền APP ID vào mục Facebook App ID. Lưu ý: Nếu bài viết chưa có ảnh đại diện thì Facebook sẽ tự động lấy ảnh ở Image URL.
- Bước 3: Nhấn 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
Nếu không sử dụng plugin Yoast SEO, bạn cũng có thể thực hiện chèn Open Graph bằng cách thủ công với các bước thực hiện sau:
- Bước 1: Bạn mở file functions.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. Kế tiếp, bạn thêm đoạn code sau:
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');
}
?>
<meta property="og:title" content="<?php echo the_title(); ?>"/>
<meta property="og:description" content="<?php echo $excerpt; ?>"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="<?php echo the_permalink(); ?>"/>
<meta property="og:site_name" content="<?php echo get_bloginfo(); ?>"/>
<meta property="og:image" content="<?php echo $img_src; ?>"/>
<?php
} else {
return;
}
}
add_action('wp_head', 'fb_opengraph', 5);- Bước 3: Tiếp tục thêm thẻ Open Graph:
<meta property="og:title" content="<?php echo the_title(); ?>"/>
<meta property="og:description" content="<?php echo $excerpt; ?>"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="<?php echo the_permalink(); ?>"/>
<meta property="og:site_name" content="<?php echo get_bloginfo(); ?>"/>
<meta property="og:image" content="<?php echo $img_src; ?>"/>- 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>.
Các lỗi thường gặp trong Open Graph là gì?
Khi thêm thẻ Open Graph vào website, bạn thường gặp phải một số lỗi phổ biến như sau:
Facebook không load được hình khi share link từ website
Người dùng Facebook khi nhấp vào những đường link được chia sẻ từ website thường gặp tình trạng không load được hình ảnh. Điều này được đánh giá là do người dùng chưa tích hợp Facebook Open Graph Meta Data hoặc do bot Facebook trong quá trình thu thập dữ liệu từ link đã xảy ra sự cố về cache, kết nối server,…
Lỗi Incorrect Open Graph Tags
Incorrect Open Graph Tags là lỗi xảy ra do các thẻ og không được hệ thống ghi nhận hoặc thông tin không được hiển thị chính xác.
Hướng dẫn tạo thẻ Open Graph nhanh nhất
Để khởi tạo nhanh chóng thẻ Open Graph, bạn thực hiện theo hướng dẫn sau:
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 code đó vào mã nguồn.
Tạo thẻ meta Open Graph với Zalo
Các bước khởi tạo thẻ meta Open Graph trên Zalo cũng được thực hiện tương tự như trên Facebook.
Ví dụ:
<meta property="og:url" content="https://developers.zalo.me/" />
<meta property="og:title" content="Zalo For Developers" />
<meta property="og:image" content="https://developers.zalo.me/web/static/prodution/zalo.png" />
<meta property="og:description" content="Trang thông tin về Zalo dành cho cộng đồng lập trình viên" />Câu hỏi thường gặp
Các thuộc tính của Open Graph là gì?
Các thẻ metadata nằm trong phần <head> của website chính là các thuộc tính của Open Graph, bao gồm:
Các thuộc tính cơ bản như:
– Og:title
– Og:type
– Og: description
– Og:image
– Og:url
– Og:site_name
– fb:admins
Các thuộc tính nâng cao như:
– og:audio
– og:description
– og:determiner
– og:site_name
– og:video
Open Graph là gì?
Open Graph là giao thức có thể giúp các nền mạng xã hội hiểu, tóm tắt và hiển thị được các nội dung của website dựa trên đường link được chia sẻ lên mạng hội đó.
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. Trong quá trình cài đặt, nếu còn chỗ nào vướng mắc, bạn hãy để lại bình luận bên dưới cho mọi người cùng tham khảo và hỗ trợ giải đáp nhé.
