Open Graph là gì? Hướng dẫn cài đặt Open Graph cho Website
Thịnh Văn Hạnh 24/11/2022 1371 Lượt xem Chia sẻ bài viết
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 sẽ giúp bạn có cái nhìn toàn diện về thuật ngữ này.
Open Graph là gì?
Tóm Tắt Bài Viết
Open Graph là gì?
Open Graph giúp Facebook hiểu, tóm tắt và hiển thị nội dung trang web chỉ thông qua các liên kết được chia sẻ. Để làm điều này, Open Graph hiển thị một trang web dưới dạng một đối tượng có các thuộc tính cần thiết cho một mạng xã hội. Open Graph xác định các thuộc tính này bằng mã hoặc trong plugin.
Khi bạn chia sẻ, dưới dạng liên kết hoặc cập nhật liên kết trạng thái, nếu trang web của bạn sử dụng Open Graph, liên kết chia sẻ trang Facebook sẽ có đầy đủ ảnh thumbnail, description,…
Các thuộc tính của Open Graph là gì?
Hãy cùng tìm hiểu chi tiết về những thuộc tính của Open Graph nhé.
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à 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: 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: Đâ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: 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: Chỉ cho Facebook tên của website nhưng nó không thực sự cần thiết.
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.
Open Graph tác động SEO như thế nào?
Trong SEO, Open Graph quản lý nội dung được chia sẻ trên mạng xã hội, cải thiện kết quả hiển thị và tăng mức độ tương tác và chuyển đổi (CTR). Do đó, nó có tác động đáng kể đến việc thúc đẩy tối ưu hóa công cụ tìm kiếm hiệu quả. Với các tính năng chính của Open Graph, các bài viết và trang web của bạn được tối ưu hóa cho các công cụ tìm kiếm.
Thẻ meta trong Open Graph
Các thẻ meta quan trọng của Open Graph cung cấp siêu dữ liệu về tài liệu HTML được hầu hết các trình duyệt hỗ trợ. Các trường mô tả 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 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á nhiều so với những website hoạt động trên các nền tảng khác. Dưới đây là hướng dẫn chi tiết cách chèn Open Graph vào bằng Plugin WordPress và bằng cách thủ công
Sử dụng plugin trong WordPress
Chúng ta sẽ sử dụng plugin Yoast SEO để cấu hình Open Graph.
Bước 1: Đầu tiên là vào Social, chọn Facebook, sau đó chọn Enabled.
Image URL: Nếu bài viết 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 quá trình.
Hướng 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: Sau khi thêm, hàm này sẽ tự động được chèn vào thẻ <head> 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ẻ <head>.
Xem thêm: Hướng dẫn cách sử dụng WordPress từ A-Z mới nhất 2022
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ý do Facebook không thể tải lên hình ảnh khi chia sẻ liên kết từ trang web WordPress là do trang web của bạn không được tích hợp với siêu dữ liệu Open Graph của Facebook hoặc bot Facebook đã phát hiện ra lỗi bộ đệm, kết nối máy chủ,… trong quá trình thu thập dữ liệu từ liên kết của Facebook.
Lỗi Incorrect Open Graph Tags là gì?
Incorrect Open Graph Tags là lỗi trong đó thẻ og không được chấp nhận hoặc thông tin không chính xác về thẻ og được hiển thị. Hãy thử các bước sau với Công cụ gỡ lỗi của Facebook để khắc phục sự cố!
Bước 1: Đảm bảo trang web của bạn có tiêu đề og, mô tả og và thẻ hình ảnh og được xác định trước.
Bước 2: Kiểm tra tình trạng bài viết được lưu trong cơ sở dữ liệu của Facebook bằng cách mở liên kết tại đây. Sau đó, dán các URL bạn muốn xử lý vào trường URL và nhấp vào DEBUG.
Bước 3: Đi đến cuối trang và nhấp vào nút “Open Graph Object Elbugger” để chuyển đến trang gỡ lỗi. Sau đó nhấn “Get New Extracted Data” để Facebook tải lại 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 thông tin mới, bạn chia sẻ bài viết với đầy đủ các thông tin về ảnh, tiêu đề bài viết và nội dung.
Lời kết
Như vậy, qua bài viết của BKNS, hy vọng bạn đã có những kiến thức thú vị về Open Graph. Sử dụng Facebook làm nền tảng phát triển website và quảng cáo là lựa chọn chiến lược của các marketer trong thời đại 4.0. Chúc các bạn thành công với công cụ này.
Cảm ơn bạn đã đón đọc bài viết. Có thể bạn cũng quan tâm đến: