Hướng dẫn chèn thẻ Open Graph vào wordpress không dùng plugin

Open Graph là gì?

Facebook Open Graph là 1 giao thức dùng để giao tiếp giữa website của bạn với mạng xã hội facebook. Open Graph giúp Facebook hiểu, tóm tắt và hiển thị được nội dung website chỉ qua đường dẫn được chia sẻ. Để làm việc này, Open Graph xem trang web như một đối tượng có các thuộc tính mà mạng xã hội đòi hỏi. Các thuộc tính này do ta thiết lập, bằng code hoặc bằng plugin.

Khi chia sẻ, thích một liên kết hoặc cập nhật một liên kết trên status, nếu website của bạn có sử dụng Open Graph thì link chia sẻ website trên facebook sẽ có đầy đủ ảnh thumbnail, description,…

Các thuộc tính của Open Graph là gì?

Dướ đây là một số những thuộc tính cơ bản của Open Graph:

Og:title
Og:type
Og:description
Og:image
Og:url
Og:site_name
fb:admins

Hãy cùng tìm hiểu chi tiết về những thuộc tính trên!

Og:title là gì

Og:title là nơi bạn đặt tiêu đề cho nội dung bài viết của bạn với số kí tự ít hơn 95.

Og:type là gì

Og:type là nơi mô tả loại hình nội dung mà bạn chia sẻ như video, ảnh, bài viết blog,…

Og:description là gì

Og: description: Dùng để mô tả nội dung trong khoảng 297 kí tự mà không đòi hỏi chứa nhiều từ khóa. Thay vào đó, hãy đầu tư nội dung desciption hấp dẫn và chất lượng để tăng lượng tương tác.

Og:image là gì

Og:image: Đây là cách làm nổi bật status của bạn vì Facebook sẽ đưa ra một hình ảnh thumbnail url của bạn được chia sẻ và một hình ảnh nhỏ sẽ xuất hiện bên cạnh nội dung bạn chia sẻ.

Og:url là gì

Og:url: Dùng để đặt url chính (canonical url) của trang bạn chia sẻ để đảm bảo tất cả những chia sẻ trên facebook đều đi đến 1 url gốc mà bạn chỉ đinh.

Og:site_name là gì

Og:site_name: Chỉ cho Facebook tên của website nhưng nó không thực sự cần thiết.

fb:admins là gì

fb:admins: Thẻ này chỉ cho Facebook bạn là chủ nhân của một fanpage và nó kết nối fanpage đó tới website của bạn, để bạn nhận đuợc nhiều dữ liệu trong Facebook Insights.

Hướng dẫn kiểm tra Facebook Open Graph

Facebook Debugger Tool là gì?

Facebook Debugger Tool là công cụ giúp bạn phân tích website để kiểm tra xem có lỗi nào xuất hiện trong quá trình xử lý og tags hay không. Bạn có thể dùng tính năng preview để xem trước link sẽ hiện như thế nào trên Facebook khi chia sẻ. Với Facebook Debugger Tool, tài khoản Facebook thông thường có thể sử dụng mà không cần đăng ký tài khoản đặc biệt.

Hướng dẫn kiểm tra Open Graph

Bước 1: Truy cập Facebook Debugger Tool.

Bước 2: Gõ link bạn cần phân tích vào. Nhấn nút Debug. Bạn sẽ thấy thông báo og tag nào đang bị lỗi. Ở phía dưới, bạn sẽ thấy thông báo Facebook đã truy cập vào link hoặc “scraped” link. Sau đó bạn sẽ nhìn thấy một bản preview Facebook diễn dịch URL của bạn khi bạn chia sẻ link.

Bước 3: Sửa lỗi được hiển thị trên cửa sổ.

Open Graph tác động SEO như thế nào?

Đối với SEO, Open Graph có tác dụng kiểm soát nội dung chia sẻ trên mạng xã hội, nâng cao kết quả hiển thị, tăng tỉ lệ tương tác và chuyển đổi (CTR). Vì vậy, nó có ý nghĩa quan trọng trong việc đẩy mạnh hiệu quả SEO.

Với các thuộc tính cơ bản của Open Graph, bài viết và website của bạn sẽ được hỗ trợ để tối ưu hóa trên các công cụ tìm kiếm.

Open Graph có ý nghĩa quan trọng với SEO

Thẻ meta trong Open Graph

Các thẻ meta quan trọng trong Open Graph cung cấp siêu dữ liệu về tài liệu HTML, được hỗ trợ bởi hầu hết các trình duyệt. Các thẻ meta thường được đặt ở trong thẻ <head>, dùng để mô tả, từ khóa, tác giả, thời gian… và không hiển thị trên website.

Hướng dẫn chèn thẻ Open Graph vào wordpress

Bước 1: Mở file functions.php, kéo xuống dưới và viết hàm sau đây:

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');
// Chú ý chèn vào trong thẻ <?php ?> của file function nhé!

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');

// Chú ý chèn vào trong thẻ <?php ?> của file function nhé!

Đây là hàm sẽ khai báo nền tảng để trình duyệt có khả năng phân tích một cách chính xác nhất cấu trúc dữ liệu thẻ open graph mà bạn khai báo sau đây. Sau khi thêm hàm này vào thì nó sẽ tự động được chèn vào thẻ <head> của website.

Bước 2: Tiếp theo bạn code thêm hàm sau vào ngay phía dưới của hàm phía trên nhé, đây là hàm sẽ khai báo các thẻ open graph cho web của bạn đấy.

 function bantuhoc_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/2020/06/Sach-hay-khuyen-doc.png
 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', 'bantuhoc_opengraph', 5);

function bantuhoc_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/2020/06/Sach-hay-khuyen-doc.png

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', 'bantuhoc_opengraph', 5);

Đấy, như vậy là mình đã hướng dẫn xong cách để chèn thẻ open graph cho wordpress rồi nhé! Các bạn thêm vào xong xuôi nhấn f5 một cái là đã web đã có thẻ open graph ngon lành rồi đó!

Những lỗi Open Graph thường gặp

Nguyên nhân của việc Facebook không load được hình khi share link website WordPress là do website của bạn chưa được tích hợp Facebook Open Graph Meta Data hoặc bots Facebook gặp lỗi cache, lỗi kết nối với server,… trong quá trình thu thập dữ liệu từ liên kết.

Lỗi Incorrect Open Graph Tags là gì?

Incorrect Open Graph Tags là lỗi không nhận được các thẻ og hoặc hiển thị sai thông tin các thẻ og. Hãy thử các bước sau với công cụ Facebook Debugger Tools để sửa nhé!

Bước 1: Đảm bảo website định nghĩa sẵn các thẻ og title, og description và og image.

Bước 2: Kiểm tra tình trạng bài viết hiện đang được Facbook lưu trong cơ sở dữ liệu bằng cách mở link sau https://developers.facebook.com/tools/debug/og/object/. Sau đó, dán các url cần xử lý lỗi vào ô URL rồi bấm DEBUG.

Bước 3: Chuyển đến cuối trang, bấm vào dòng “Trình gỡ lỗi đối tượng trong Open Graph” để sang trang gỡ lỗi. Sau đó, bấm “Tìm nạp thông tin trích xuất mới” để facebook nạp lại các dữ liệu. Dựa vào thông báo để xử lý lỗi cho đến khi hết lỗi.

Bước 4: Sau khi facebook cập nhật các thông tin mới, bạn chia sẻ bài viết với đầy đủ thông tin về ảnh, tên bài viết và nội dung.

Tận dụng facebook như một nền tảng để phát triển và quảng bá website là sự lựa chọn mang tính chiến lược của các marketer thời đại 4.0. Với Open Graph, bạn hoàn toàn có thể tạo kết nối hữu ích và đầy đủ ảnh thumbnail, description,… để tăng lượng tương tác trên mạng xã hội.

Thủ thuật Wordpress, Blog

Hướng dẫn chèn thẻ Open Graph vào wordpress không dùng plugin

Open Graph là gì?

Các thuộc tính của Open Graph là gì?

Og:title là gì

Og:type là gì

Og:description là gì

Og:image là gì

Og:url là gì

Og:site_name là gì

fb:admins là gì

Hướng dẫn kiểm tra Facebook Open Graph

Facebook Debugger Tool là gì?

Hướng dẫn kiểm tra Open Graph

Open Graph tác động SEO như thế nào?

Thẻ meta trong Open Graph

Hướng dẫn chèn thẻ Open Graph vào wordpress

Những lỗi Open Graph thường gặp

Lỗi Incorrect Open Graph Tags là gì?

Trả lời Hủy

Open Graph là gì?

Các thuộc tính của Open Graph là gì?

Og:title là gì

Og:type là gì

Og:description là gì

Og:image là gì

Og:url là gì

Og:site_name là gì

fb:admins là gì

Hướng dẫn kiểm tra Facebook Open Graph

Facebook Debugger Tool là gì?

Hướng dẫn kiểm tra Open Graph

Open Graph tác động SEO như thế nào?

Thẻ meta trong Open Graph

Hướng dẫn chèn thẻ Open Graph vào wordpress

Những lỗi Open Graph thường gặp

Vì sao Facebook không load được hình khi share link website WordPress?

Lỗi Incorrect Open Graph Tags là gì?

Trả lời Hủy