Sử dụng thẻ Open graph là một trong những kỹ thuật cao trong quá trình làm SEO. Tuy nhiên trên thực tế lại không có quá nhiều người quan tâm đến công cụ này. Vậy Open graph là gì? Bài viết dưới đây khotenmien.vn sẽ giúp bạn có cái nhìn toàn diện về thuật ngữ này.
Để đi đến những kiến thức sâu hơn, trước tiên bạn cần hiểu rõ về khái niệm.
Open Graph là gì?
Facebook Open Graph là 1 giao thức sử dụng để giao tiếp giữa Website của bạn với mạng xã hội Facebook. Open Graph giúp trang Facebook hiểu, tóm gọn & hiển thị được nội dung Web 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.
Các tính chất của Open Graph là gì?
Dướ đây là một số những thuộc tính căn 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 nghiên cứ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 Content của bạn với số kí tự ít hơn 95.
Og:type là gì
- Og:type là nơi miêu 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 Keyword. Thay vì vậy, 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 chính là cách làm nổi bật status của bạn vì trang Facebook sẽ công bố một hình ảnh thumbnail URL của bạn được sẻ chia & một hình ảnh nhỏ sẽ hiển thị bên cạnh nội dung bạn sẻ chia.
Og:url là gì
- Og:url: Dùng để đặt đường dẫn 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 trang Facebook tên của Website mặc dù vậy nó không thực sự quan trọng.
fb:admins là gì
- fb:admins: Thẻ này chỉ cho Facebook bạn là chủ nhân của một fanpage & 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.
Open Graph tác động SEO như thế nào?
Đối với SEO, Open Graph có tác dụng làm chủ nội dung chia sẻ trên Internet xã hội, nâng cao kết quả hiển thị, tăng tỉ lệ tương tác & chuyển đổi (CTR). Thế nên, nó có ý nghĩa quan trọng trong việc kích thích hiệu quả SEO.
Với các tính chất cơ bản của Open Graph, bài viết & Web của bạn có thể được hỗ trợ để sửa đổi và cải thiện trên các công cụ tìm kiếm.
Hướng dẫn chèn Open Graph vào Website
Đối với Website WordPress thì thao tác chèn Open Graph sẽ đơn giản hơn khá là nhiều so với những Website hoạt động trên các nền tảng khác. Phía bên dưới đây là hướng dẫn chi tiết cách chèn Open Graph vào bằng Plugin WordPress & bằng việc thủ công
Sử dụng plugin trong WordPress
Chúng ta sẽ dùng plugin Yoast SEO để cấu hình Open Graph.
Bước 1: Trước tiên là vào Social, chọn Facebook, sau đó chọn Enabled.
Image URL: Nếu bài Post của bạn không có ảnh đại diện, Facebook nó sẽ tự động lấy ảnh này.
Facebook Insights and admins: Điền APP ID vào phần Facebook App ID.
Bước 2: Bấm nút Save Changes để kết thúc quy trình.
Chỉ dẫn chèn thủ công Open Graph
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!
Bước 2: Một khi thêm, hàm này sẽ tự động được chèn vào thẻ của Website. Tiếp tục thêm hàm 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-chen-vao-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: 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: Khai báo Open Graph tại
add_action(‘wp_head’, ‘fb_opengraph’, 5);
Bước 5: Móc hàm này vào hook để tự động móc các thẻ open graph vào thẻ
Tổng kết
Tận dụng trang Facebook như một nền tảng để phát triển & quảng cáo Website là sự chọn lựa 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 & đa dạng ảnh thumbnail, description,… để tăng lượng tương tác trên mạng xã hội. Đây là bài viết của mình tổng hợp lại về open graph là gì? Và cấu hình Open graph và website. Mình hy vọng bài viết phía trên đây mà mình vừa chia sẻ sẽ phần nào giúp cho bạn có thêm nhiều kiến thức về lĩnh vực này!
Xem thêm : Schema.org là gì? Tất cả những gì bạn cần biết về Schema.org
Thanh Xuân – Tổng hợp, bổ sung
