Trong thế giới kết nối mạng ngày nay, Open Graph đã trở thành một phần quan trọng trong việc chia sẻ thông tin trên mạng xã hội. Nhưng bạn đã biết Open Graph là gì và tại sao nó quan trọng cho website của bạn? Trong bài viết này, chúng ta sẽ khám phá khái niệm Open Graph, vai trò quan trọng của nó trong việc tối ưu hóa hiển thị trên mạng xã hội và cách đơn giản để cài đặt Open Graph cho website của bạn. Đừng bỏ lỡ cơ hội tạo ấn tượng mạnh mẽ trên các nền tảng xã hội – hãy cùng Game Bài Đổi Thưởng tìm hiểu nhé!
TÓM TẮT
Open Graph là gì?
Open Graph là một chuẩn giao thức có chức năng gắn kết thông tin giữa các trang web và các mạng xã hội, chẳng hạn như Facebook. Điều này giúp mạng xã hội hiểu và tổng hợp nội dung từ các liên kết được chia sẻ. Mục tiêu của Open Graph là tối ưu hóa hiển thị trang web trên các nền tảng mạng xã hội, giúp tạo ra những “thẻ” chứa thông tin quan trọng như hình ảnh thumbnail, mô tả ngắn gọn và tiêu đề.
Trong cơ cấu của Open Graph, website được coi như một đối tượng chứa các thuộc tính cần thiết cho việc chia sẻ trên mạng xã hội. Người dùng có thể tùy chỉnh những thuộc tính này thông qua plugin hoặc mã nguồn.
Ví dụ, khi bạn chia sẻ một liên kết từ một trang web trên Facebook, nếu trang web sử dụng Open Graph, thông tin trên Facebook sẽ hiển thị hình ảnh nhỏ xem trước (thumbnail), phần mô tả và tiêu đề đầy đủ, tạo ra một trải nghiệm hấp dẫn cho người dùng.
Các thuộc tính cơ bản của Open Graph
Đối với mỗi trang web sử dụng Open Graph, các thuộc tính cơ bản được sử dụng để tối ưu hóa việc chia sẻ thông tin trên các mạng xã hội bao gồm:
- Og:title: Đây là nơi bạn đặt tiêu đề của bài viết, hạn chế tối đa 95 ký tự.
- Og:type: Được dùng để xác định thể loại nội dung được chia sẻ như ảnh, bài đăng blog hay video.
- Og:description: Chỗ để bạn tạo mô tả tổng quan về nội dung bài viết, tối đa 297 ký tự. Lưu ý, mô tả nên tập trung vào sự hấp dẫn, thu hút độc giả thay vì chứa quá nhiều từ khóa.
- Og:image: Được dùng để hiển thị hình ảnh thumbnail của bài viết khi chia sẻ trên Facebook.
- Og:url: Đặt URL chính (hoặc URL kanon) của trang web được chia sẻ. Điều này đảm bảo rằng tất cả các chia sẻ trên Facebook đều trỏ về một URL gốc đã được xác định trước.
- Og:site_name: Thuộc tính giúp xác định tên trang web.
- fb:admins: Thuộc tính này liên kết trang web với trang quản trị fanpage trên Facebook, giúp hiểu rằng bạn là người quản trị và kết nối hai nền tảng này.
Thông qua việc tùy chỉnh các thuộc tính này, bạn có thể tối ưu hóa cách thông tin được hiển thị và chia sẻ trên mạng xã hội, tạo ra trải nghiệm hấp dẫn cho người dùng.
Open Graph có cần thiết với website không?
Đối với các trang web, Open Graph là một phần quan trọng không thể thiếu. Giao thức này đóng vai trò quan trọng trong việc kết nối trang web với mạng xã hội, cho phép nội dung của trang web được hiển thị và chia sẻ một cách tối ưu trên các nền tảng xã hội. Nhờ Open Graph, người dùng có thể thuận tiện thực hiện các hoạt động quảng cáo trực tuyến và tận hưởng nhiều sự tương tác tích cực hơn từ cộng đồng mạng.
Cách kiểm tra Facebook Open Graph
Để dễ dàng và nhanh chóng kiểm tra Open Graph trên Facebook, bạn có thể sử dụng công cụ Facebook Debugger theo các bước hướng dẫn dưới đây:
Facebook Debugger là gì?
Công cụ Facebook Debugger là một giải pháp nổi bật, giúp phân tích và kiểm tra các lỗi xuất hiện trong quá trình xử lý các thẻ Open Graph trên website. Đặc biệt, công cụ này cung cấp tính năng xem trước (preview), cho phép bạn nhận thấy cách đường liên kết sẽ hiển thị khi được chia sẻ trên Facebook. Điều này giúp bạn kiểm tra và điều chỉnh tối ưu hóa hiển thị nội dung trên mạng xã hội.
Cách sử dụng công cụ Facebook Debugger rất đơn giản và không yêu cầu bạn phải đăng ký một tài khoản đặc biệt. Bạn chỉ cần sử dụng tài khoản Facebook thông thường để đăng nhập và thực hiện kiểm tra Open Graph.
Các bước kiểm tra Open Graph
Dưới đây là hướng dẫn chi tiết về các bước để kiểm tra Open Graph bằng công cụ Facebook Debugger:
Bước 1: Truy cập vào công cụ Facebook Debugger qua đường link sau: https://developers.facebook.com/tools/debug/.
Bước 2: Nhập đường link mà bạn muốn phân tích vào thanh tìm kiếm và nhấn nút “Gỡ lỗi”. Khi đó, trang sẽ hiển thị thông tin về các Open Graph tags đang bị lỗi, cùng với thông báo về việc Facebook đã truy cập vào liên kết (scraped link). Ngoài ra, bạn cũng có thể xem trước cách đường link sẽ hiển thị khi được chia sẻ trên Facebook.
Bước 3: Tiến hành chỉnh sửa các lỗi hiển thị trên màn hình.
Chú ý rằng Facebook thường sử dụng hình ảnh từ bộ nhớ cache. Điều này có nghĩa là bạn có thể gặp tình trạng mà Facebook vẫn hiển thị hình ảnh cũ từ thẻ og:image mặc dù bạn đã thay đổi hình ảnh mới. Trong trường hợp này, để giải quyết vấn đề, bạn cần xóa cache của Facebook bằng công cụ Sharing Debugger.
Sharing Debugger là một công cụ mạnh mẽ cho phép bạn thu thập và làm mới bộ nhớ cache. Thực hiện việc này sẽ giúp đảm bảo rằng các nội dung được chia sẻ trên Facebook luôn hiển thị phiên bản mới nhất của bạn, đảm bảo tính chính xác và cập nhật của thông tin trên mạng xã hội.
Ảnh hưởng của Open Graph đến SEO
Giao thức Open Graph đóng một vai trò quan trọng trong việc thúc đẩy hiệu quả hoạt động tối ưu hóa công cụ tìm kiếm (SEO) cho trang web. Dựa vào các thuộc tính cơ bản của giao thức này, bài viết và trang web của người dùng được hỗ trợ để tối ưu hoá hiển thị trên các công cụ tìm kiếm. Hơn nữa, trong quá trình thực hiện SEO, Open Graph cũng giúp cho các chuyên gia tối ưu hóa tìm kiếm kiểm soát nội dung được chia sẻ trên các mạng xã hội. Điều này mang lại nhiều lợi ích bao gồm việc tăng tỷ lệ tương tác, nâng cao xếp hạng hiển thị trên kết quả tìm kiếm, và cải thiện tỷ lệ chuyển đổi (CTR). Điều này đồng nghĩa với việc giao thức Open Graph không chỉ tạo ra sự kết nối mạnh mẽ giữa website và mạng xã hội, mà còn góp phần quan trọng trong việc xây dựng chiến lược SEO hiệu quả.
Thẻ meta trong Open Graph có nhiệm vụ gì?
Thẻ meta Open Graph là một dạng thẻ nằm trong phần <head> của trang web, được sử dụng để cung cấp thông tin meta về trang. Người dùng sử dụng thẻ meta Open Graph nhằm giúp các mạng xã hội như Facebook, Zalo, Twitter và các nền tảng khác hiểu rõ thông tin về trang web khi chia sẻ nó. Quan trọng hơn, thẻ này cho phép mô tả và hiển thị thông tin này mỗi khi người dùng chia sẻ nội dung từ trang web trên các mạng xã hội. Đơn giản, thẻ meta Open Graph đóng vai trò như dữ liệu có cấu trúc (structured data) mà mạng xã hội Facebook và các nền tảng khác có thể hiểu và sử dụng để hiển thị thông tin chính xác.
Một số thẻ Open Graph nâng cao
Khi bạn mong muốn tận dụng Open Graph ở mức độ chuyên sâu hơn, hãy hiểu thêm về các thuộc tính nâng cao của giao thức này, bao gồm:
- og:audio: Cho phép bạn liên kết đến file âm thanh.
- og:description: Cho phép bạn cung cấp mô tả chi tiết về trang web dành cho việc chia sẻ trên mạng xã hội.
- og:determiner: Được sử dụng để xác định mạo từ như “a”, “an”, “the”, “”, “auto” đặt trước tiêu đề object của trang web. Nếu bạn chọn “auto”, mạo từ sẽ tự động chọn là “a” hoặc “an”. Nếu
- bạn không chọn, sẽ không có mạo từ hiển thị.
- og:site_name: Sử dụng khi trang web là một phần của một trang web lớn hơn. Ví dụ, trang web A là một phần của công ty B (có trang web B).
- og:video: Cho phép bạn đính kèm đường link đến file video.
- Những thuộc tính này cung cấp khả năng tùy chỉnh và mở rộng cho việc hiển thị thông tin chia sẻ trên mạng xã hội, giúp bạn tạo ra trải nghiệm tốt hơn và chính xác hơn cho người dùng.
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
Để thực hiện cách chèn này, một trong những plugin phổ biến được sử dụng để cấu hình Open Graph là Yoast SEO. Dưới đây là các bước thực hiện chi tiết:
Bước 1: Truy cập vào mục “Social” và chọn “Facebook”. Tiếp theo, bật chế độ “Enabled”.
Bước 2: Tại phần “Facebook Insights and admins”, bạn cần điền “APP ID” vào ô “Facebook App ID”. Lưu ý: Nếu bài viết không có ảnh đại diện, Facebook sẽ tự động sử dụng ảnh từ “Image URL”.
Bước 3: Sau khi hoàn tất cấu hình, nhấn “Save Changes” để lưu thay đổi.
Việc sử dụng Yoast SEO giúp bạn dễ dàng tùy chỉnh và quản lý các thông tin liên quan đến Open Graph cho trang web của mình.
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ì?
Có một số lỗi thường gặp khi làm việc với Open Graph, bao gồm:
- Lỗi Thiếu Thẻ: Nếu thiếu các thẻ cơ bản như og:title, og:type, og:description, og:image, hoặc og:url, thông tin trang web của bạn sẽ không được hiển thị đầy đủ và chính xác trên mạng xã hội.
- Lỗi Dữ Liệu Không Đúng Định Dạng: Nếu dữ liệu trong các thẻ Open Graph không đúng định dạng hoặc không tương thích với mạng xã hội, thông tin hiển thị có thể bị sai lệch hoặc không hiển thị đúng.
- Lỗi Ảnh Không Tải Được: Nếu ảnh được xác định trong thẻ og:image không tải được hoặc không tồn tại, hình ảnh thumbnail khi chia sẻ sẽ không hiển thị hoặc thay thế bằng ảnh mặc định.
- Lỗi Cache: Các mạng xã hội thường lưu trữ bộ nhớ cache về dữ liệu Open Graph. Nếu bạn đã thay đổi thông tin mà mạng xã hội vẫn sử dụng dữ liệu cũ, bạn cần xóa cache để cập nhật thông tin mới.
- Lỗi Hạn Chế Truy Cập: Nếu trang web yêu cầu đăng nhập hoặc có hạn chế truy cập, các mạng xã hội có thể không thể lấy được thông tin Open Graph, dẫn đến việc hiển thị không đầy đủ thông tin khi chia sẻ.
- Lỗi Kiểm Tra Debugger: Nếu khi sử dụng Facebook Debugger mà vẫn gặp lỗi, đôi khi đó có thể là do lỗi kỹ thuật hoặc liên quan đến cách website của bạn được cấu hình.
Để tránh các lỗi trên, bạn nên kiểm tra kỹ càng các thẻ Open Graph và sử dụng các công cụ kiểm tra như Facebook Debugger để đảm bảo thông tin hiển thị đúng và chính xác khi chia sẻ trên mạng xã hội.
Hướng dẫn tạo thẻ Open Graph nhanh nhất
Để tạo thẻ Open Graph một cách nhanh chóng, bạn có thể tuân theo các bước sau:
Bước 1: Lựa chọn một công cụ hỗ trợ tạo thẻ Open Graph từ danh sách sau:
- Duplichecker: Truy cập https://www.duplichecker.com/open-graph-generator.php.
- Smallseotool: Truy cập https://smallseotools.com/open-graph-generator/.
- Web Code: Truy cập https://webcode.tools/open-graph-generator.
Bước 2: Điền đầy đủ thông tin yêu cầu vào các ô tương ứng. Sau đó, nhấn “Enter” để nhận được các đoạn mã cần thiết.
Bước 3: Sao chép và dán các đoạn mã này vào phần mã nguồn của trang web của bạ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" />
Kết luận
Tóm lại, Open Graph là một công cụ quan trọng trong việc tối ưu hoá trang web cho mạng xã hội và tạo sự tương tác tốt hơn với người dùng. Việc cài đặt và sử dụng Open Graph có thể đơn giản hơn với sự hỗ trợ của các công cụ như Yoast SEO và các trình tạo thẻ Open Graph trực tuyến. Bằng việc tối ưu hóa các thuộc tính cơ bản và nâng cao của giao thức này, bạn có thể tạo ra những trải nghiệm chia sẻ tốt hơn trên các nền tảng mạng xã hội và nâng cao hiệu quả hoạt động SEO của trang web của mình.
