Thẻ open graph là gì?
Các bạn có để ý là mỗi khi chia sẻ bài viết trên blog của mình lên facebook thì thường bài viết chỉ hiển thị link hoặc những hình ảnh hiển thị lên cũng không phải là ảnh thumbnail của bài viết và thường hiển thị không đẹp mắt. Vậy để giải quyết vấn đề đó thì bạn cần phải thêm thẻ open graph cho website của bạn giúp việc hiển thị bài viết lên mạng xã hội tốt hơn.
Nói cách khác khi chèn thẻ open graph vào rồi thì khi chia sẻ link thì facebook sẽ tự động nhận thumbnail, tiêu đề, url và mô tả của bài viết mà bạn không cần phải làm thủ công nữa.
Các thẻ cơ bản của open graph facebook bao gồm:
<meta property="og:title" content="" /> <meta property="og:type" content="" /> <meta property="og:url" content="" /> <meta property="og:image" content="" />
Gải thích các thẻ:
- Thẻ og:title: đây là thẻ khai báo tiêu đề của bài viết.
- Thẻ og:type: đây là thẻ khai báo loại nội dung hiển thị là gì, có nhiều loại cho thẻ này
- Thẻ og:url: Đây là thẻ khai báo url của bài viết.
- Thẻ og:image: là thẻ khai báo hình ảnh.
Nói sơ qua cho bạn hiểu thôi, bây giờ mình không vòng vo nữa mà vào chủ đề chính luôn.
Hướng dẫn chèn thẻ Open Graph vào wordpress
Đầu tiên bạn mở file functions.php lên, kéo xuống dưới và viết đoạn code hàm sau đây vào:
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 khia 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.
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 laovu_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/2017/07/logolaovu.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', 'laovu_opengraph', 5);
Giải thích hàm nhé:
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/2017/07/logolaovu.png';
}
=> Sau khi xác định biến toàn cục là một bài viết thì hàm này sẽ kiểm tra xem bài viết có post humbnail hay chưa nếu có thì lấy đường dẫn của thumbnail còn không thì lấy một hình ảnh mặc định được cài đường dẫn sẵn.
Các bạn chú ý thanh đường dẫn /wp-content/uploads/2017/07/logolaovu.png thành đường dẫn tới ảnh mặc định của bạn nhé!
if($excerpt = $post->post_excerpt) {
$excerpt = strip_tags($post->post_excerpt);
$excerpt = str_replace("", "'", $excerpt);
} else {
$excerpt = get_bloginfo('description');
}
=> Đây là phần lấy mô tả của bài viết, hàm này sẽ kiểm tra xem bài viết có chứa một đoạn mô tả nào không, nếu có chứa thì hàm strip_tag và str_replace sẽ đưa nó về dạng văn bản thuần túy sau đó gán nó vào biến $excerpt, còn nếu bài viết này không chưa đoạn mô tả nào thì hàm sẽ tự động lấy mô tả của trang web để chèn vào.
Cuối cùng là thêm thẻ open graph vào:
<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; ?>"/>
Đây là phần chính thức khai báo các thẻ open graph vào trang của bạn.
add_action(‘wp_head’, ‘fb_opengraph’, 5);
Và cuối cùng chúng ta móc hàm này vào hook để nó được thực thi hàm này sẽ sử dụng hàm wp_head để tự động móc các thẻ open graph vào thẻ <head>.
Kết quả mà mình có được là:
Kết quả đạt được sau khi code xong hàm
Đấy, như vậy là mình đã hướng dẫn xong cách để chèn thẻ open graph cho worpress 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 đó!
Các bạn hãy chờ đón những bài viết tiếp theo của mình nhé, hứa hẹn sẽ còn nhiều thủ thuật vui nữa đấy.
