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.
Để đ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.
Mục lục:
Open graph là gì?
Open graph hay tên gọi đầy đủ là Facebook Open Graph được Facebook khởi xướng và áp dụng từ năm 2010. Đây là cách thức giao tiếp giữa trang web của bạn và mạng xã hội Facebook. Chúng giúp Facebook có thể hiểu, tóm tắt và hiển thị nội dung trang web thông qua đường dẫn được chia sẻ.
Nói một cách đơn giản hơn, khi bạn chia sẻ một liên kết trên nền tảng mạng xã hội. Nếu trang web của bạn có sử dụng công cụ Open graph thì đường link chia sẻ website trên Facebook sẽ hiển thị đầy đủ thumbnail, tiêu đề, mô tả (description),…
Để thực hiện việc này, thẻ Open graph xem website như đối tượng có đầy đủ thuộc tính mà mạng xã hội yêu cầu. Tất cả thuộc tính phụ thuộc vào việc bạn thiết lập bằng code hay bằng plugin.
Tiếp theo, chúng ta sẽ tìm hiểu chi tiết hơn từng loại có trong Open graph.
Các thuộc tính của Open graph
Open graph bao gồm các loại thuộc tính cơ bản sau:
Og:title: là nơi đặt tiêu đề cho nội dung bài viết với số ký tự ít hơn 95.
Og:type: là nơi mô tả hình thức 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 yêu cầu chứa nhiều từ khóa. Thay vào đó, hãy đầu tư nội dung mô tả 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 trội dòng trạng thái 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 website 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 biết 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 chủ của một fanpage và nó kết nối fanpage đó tới website của bạn, để bạn nhận được nhiều dữ liệu trong Facebook Insights.
Bạn đã hiểu sơ lược khái niệm Open graph là gì, vậy chúng có vai trò gì đối với trang web?
Tại sao website cần có Open graph?
Open graph có thể không quan trọng nếu bạn chỉ gửi bài viết cho riêng một người, nhưng nếu bạn chia sẻ nó trên một nền tảng rộng hơn và những nền tảng này sử dụng bản xem trước cho mỗi chia sẻ liên kết đến web, bạn chắc chắn sẽ muốn bản xem trước của mình được hiển thị càng phong phú càng tốt. Vì vậy, Open graph sẽ giúp bạn thực hiện việc này chuyên nghiệp hơn, thúc đẩy người dùng nhấp vào xem nội dung bài viết bạn chia sẻ.
Đồng thời, các thuộc tính cơ bản của Open Graph sẽ giúp tối ưu bài viết và trang web của bạn trên các công cụ tìm kiếm
Đặt biệt đối với SEO, Open Graph có tác dụng giám sá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 suất SEO.
Tầm quan trọng của Open graph đối với website là không thể thiếu. Phần tiếp theo, Forza sẽ chia sẻ đến bạn cách đưa Open graph vào trang web.
Chèn Open Graph vào website bằng cách nào?
Nếu bạn đang sử dụng website WordPress thì các thao tác chèn Open graph sẽ đơn giản hơn các trang web hoạt động trên các nền tảng khác. Có hai cách để đưa Open graph vào trang web là bằng plugin và bằng cách thủ công.
Chèn Open graph bằng plugin WordPress
Yoast SEO là một plugin WordPress SEO lý tưởng mà bạn có thể sử dụng để chèn thêm các dữ liệu Open graph vào WordPress.
Bước 1: Bạn truy cập SEO → Social, sau đó di chuyển đến mục Add Open Graph metadata và chọn Enable.
Image URL: Bạn hoàn toàn có thể thiết lập một hình ảnh mặc định, hình ảnh này sẽ được dùng khi trong bài viết hoặc page không có ảnh đại diện nào
Facebook Insights and Admins: Hãy nhập Facebook app ID của mình vào nếu bạn sử dụng Facebook Page và cần thêm dữ liệu cho Facebook insights. Hoặc bạn cũng có thể thay đổi dữ liệu Open graph cho title, description (mô tả) và hình thumbnail cho trang chủ.
Bước 2: Nhấn vào nút Save Changes để kết thúc quá trình.
Chèn Open graph bằng thủ công
Bước 1: Mở file functions.php, kéo xuống dưới và viết hàm như dưới đâ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 hoàn thành bước đầu tiên, hàm này sẽ tự động được chèn vào thẻ <head> của trang web. 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: Chèn 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: Thực hiện 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 để nó tự động móc các thẻ Open graph vào thẻ <head>.
Giờ bạn đã hiểu các bước chèn Open graph là gì rồi, nhưng có một số lưu ý bạn cần nhớ rõ trong quá trình thực hiện việc này.
Các lỗi thường gặp khi chèn Open Graph
Dưới đây là một số lỗi thường gặp.
Facebook không load được hình khi share link website WordPress?
Mặc dù đã tích hợp Open Graph, trang web của bạn vẫn có thể gặp lỗi không hiện hình ảnh, mô tả, tiêu đề… khi share link lên Facebook. Lý do của việc này là bở bots Facebook không thể kết nối với trang của bạn tại thời điểm mà nó thu thập dữ liệu. Và điều đáng bận tâm hơn là Facebook sẽ lưu lại kết quả này gần như vô thời hạn.
Vậy cách để khắc phục việc này là gì?
Bước 1: Truy cập trang Sharing Debugger của Facebook. Dán link cần sửa lỗi vào Sharing Debugger (Công cụ gỡ lỗi chia sẻ) → Debug (Gỡ lỗi).
Bước 2: Sau khi quá trình Debug (Gỡ lỗi) hoàn tất. Bạn nhấn tiếp vào nút Scrape Again.
Bạn chờ trong vài giây để bots của Facebook tiến hành thu thập lại dữ liệu. Nếu trang đã tích hợp Facebook Open Graph, lỗi của bạn sẽ được khắc phục hoàn toàn.
Lỗi Incorrect Open Graph Tags
Đây là lỗi không nhận được các thẻ og hoặc hiển thị không chính xác thông tin các thẻ og. Để khắc phục lỗi này không khó, bạn cần thực hiện theo các bước như sau.
Bước 1: Đảm bảo trang web định nghĩa sẵn các thẻ og title, og description và og image.
Bước 2: Mở link https://developers.facebook.com/tools/debug/og/object/ để kiểm tra tình trạng bài viết hiện đang được Facebook lưu trữ trong cơ sở dữ liệu nào. Tiếp đến, dán các url cần xử lý lỗi vào ô url, sau đó nhấn Debug.
Bước 3: Di chuyển đến cuối trang, nhấp vào dòng Trình gỡ lỗi đối tượng trong Open Graph để chuyển sang trang gỡ lỗi. Tiếp tục nhấn 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 hãy chia sẻ bài viết với đầy đủ thông tin về ảnh, tên bài viết và nội dung.
Chia sẻ thông tin trên các nền tảng mạng xã hội như Facebook dường như đã trở thành một xu hướng của người làm Marketing nói chung và người làm SEO nói riêng. Bài viết là ghi nhận những kinh nghiệm của mình trong quá trình sử dụng công cụ Open graph. Hi vọng với những thông tin trên có thể giúp bạn hiểu tổng quát về khái niệm Open graph là gì và cải thiện những vấn đề đang có.
Chúc bạn thành công.
Tìm hiểu thêm: Kiến thức Marketing, Onpage, Offpage
