Thông báo

Ưu đãi

Tin tức

Kỹ thuật

Open Graph là gì?

Tin tức

15/06/2021, 10:45 am

2,866

Mục lục [Ẩn]

1. Open Graph là gì?
2. Các thuộc tính của Open Graph
3. Tại sao Website cần phải có Open Graph?
4. Hướng dẫn chèn Open Graph vào Website
- Cách 1: Chèn Open Graph vào plugin WordPress
- Cách 2: Chèn Open Graph bằng cách thủ công
5. Khi chèn Open Graph thường gặp những lỗi sai nào?
- Facebook không load được hình khi share link website WordPress
- Lỗi Incorrect Open Graph Tags
6. Kết luận

Việc sử dụng thẻ meta Open Graph là một trong những kỹ thuật nâng cao khi làm SEO Website. Không có nhiều người để ý đến công cụ này cho đến khi thử chia sẻ trang Web lên Facebook hay Zalo. Thông tin hiển thị trên đó như: Ảnh đại diện, tiêu đề, nội dung tóm tắt,... không hay, không đẹp. Nếu muốn sửa cho chuẩn thì phải sử dụng đến Open Graph. Vậy chính xác thẻ meta Open Graph là gì, sử dụng như thế nào? Đây sẽ là những nội dung đáng chú ý trong bài viết hôm nay.

1. Open Graph là gì?

Facebook Open Graph là một giao thức dùng để giao tiếp giữa Website của bạn với mạng xã hội Facebook. Hay nói cách khác Open Graph chính là cầu nối giúp Website của bạn trở thành một phần của mạng xã hội giúp việc quảng bá Website và tương tác mạng xã hội được dễ dàng hơn.

Facebook Open Graph bao gồm một tập hợp meta tags giúp bạn định nghĩa nội dung trên Website thành dữ liệu có cấu trúc mà Facebook có thể hiểu được. Khi bạn share hay like 1 link hoặc cập nhật 1 link trên status, nếu Website của bạn không sử dụng Open Graph thì Facebook chỉ nhận ra link bài viết.

Khi chèn Open Graph vào Website nó sẽ làm cho Web pages mà bạn chia sẻ trở thành đối tượng có các thuộc tính mà mạng xã hội yêu cầu như title, description, ảnh thumbnail,... Chính vì vậy, link chia sẻ sẽ có đầy đủ ảnh thumbnail, description do bạn chỉ định để lôi kéo người đọc click theo chủ ý của bạn.

>>> Xem thêm: Description là gì? Cách viết thẻ mô tả Meta Description chuẩn SEO

2. Các thuộc tính của Open Graph

Og:title

Đây là nơi bạn đặt tiêu đề cho nội dung bài viết của bạn. Hãy nghĩ nó giống như thẻ title HTML mà Search Engine sử dụng. Khi tạo or:title hãy giữ số ký tự ít hơn 95

Og:type

Đây là nơi bạn mô tả loại hình nội dung mà bạn chia sẻ. Nó có thể là video, ảnh, bài viết Blog…Đây là danh sách đầy đủ bạn có thể nghiên cứu khi định hình nội dung cho mình

Og: description

Giống như meta Description HTML, nó sẽ dùng mô tả nội dung. Bạn không quan trọng nó có nhiều từ khóa trong đó hay không thay vì đó bạn nên tiếp cận việc viết Description hấp dẫn lôi cuốn để nhận được nhiều click. Giới hạn trong khoảng 297 kí tự

Og:image

Bằng cách sử dụng thẻ này, Facebook sẽ đưa ra một hình ảnh Thumbnail khi ai đó chia sẻ url của bạn, và một hình ảnh nhỏ sẽ xuất hiện bên cạnh nội dung bạn chia sẻ. Đây là cách làm nổi bật status của bạn so với các status được cập nhật bằng text trên timeline người khác

Vậy làm thế nào có thể sử dụng thẻ này? Facebook có vài điều kiện như là ảnh phải có kích thước ít nhất 50pxx50px nhưng hình ảnh chuẩn nên là một ảnh lớn hơn tầm 200x200px. Và kích thước không được nhiều hơn 5MB

Og:url

Thẻ này bạn sẽ đặt URL chính (Canonical URL) của trang bạn chia sẻ nó quan trọng bởi vì đôi lúc bạn sẽ có nhiều hơn 1 URL cho cùng 1 nội dung.. Sử dụng thẻ này sẽ đảm bảo tất cả những gì người khác chia sẻ trên Facebook đều đi đến 1 url gốc mà bạn chỉ đinh, tránh phân tán, nó sẽ giúp bạn về facebook Edgerank

Og:title, og:description, og:image, og:url sẽ là 4 thứ tối thiểu bạn phải sử dụng khi thiết lập Open Graph cho website

Og:site_name

Chỉ cho Facebook tên của Website. Bạn không thực sự cần thẻ này nhưng nó cũng không ảnh hưởng gì nhiều nếu có nó

fb:admins

Nếu bạn có 1 Fanpage và bạn muốn nhận được nhiều dữ liệu trong Facebook Insights, thì bạn phải dùng thẻ này. Nó chỉ cho cho Facebook bạn là chủ site và nó kết nối facebook fanpage tới Website của bạn

Như vậy các thẻ meta không chỉ dành riêng cho công cụ tìm kiếm mà các trang mạng xã hội cũng sử dụng. Bạn tối ưu các thẻ meta trên Website cho công cụ tìm kiếm để tăng click và cải thiện vị trí xếp hạng thì bạn cũng nên làm điều đó với Facebook thông qua các thẻ meta trong giao thức Open Graph

>>> Xem thêm: URL là gì? Bí kíp tối ưu URL chuẩn SEO lên top Google

3. Tại sao Website cần phải 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.

>>> Xem thêm: SEO là gì? Tại sao SEO Website luôn được ưu tiên trong Marketing

4. Hướng dẫn chèn Open Graph vào Website

Cách 1: Chèn Open Graph vào 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.

Cách 2: Chèn Open Graph bằng cách 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=”https://opengraphprotocol.org/schema/”

xmlns:fb=”https://www.facebook.com/2008/fbml”‘;

}

add_filter(‘language_attributes’, ‘doctype_opengraph’);

// Chú ý chèn vào trong thẻ 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ẻ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’);

}

”/>

} else {

return;

}

add_action(‘wp_head’, ‘fb_opengraph’, 5);

- Bước 3: Chèn thẻ Open Graph.

”/>

- 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ẻ.

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.

5. Khi chèn Open Graph thường gặp những lỗi sai nào?

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ởi 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

Incorrect Open Graph Tags là lỗi không nhận được các thẻ og hoặc hiển thị sai thông tin các thẻ og. Hãy thử các bước sau với công cụ Facebook Debugger Tools để sửa.

- Bước 1: Đảm bảo website định nghĩa sẵn các thẻ og title, og description và og image.

- Bước 2: Kiểm tra tình trạng bài viết hiện đang được Facbook lưu trong cơ sở dữ liệu bằng cách mở link sau https://developers.facebook.com/tools/debug/og/object/. Sau đó, dán các URL cần xử lý lỗi vào ô URL rồi bấm DEBUG.

- Bước 3: Chuyển đến cuối trang, bấm vào dòng “Trình gỡ lỗi đối tượng trong Open Graph” để sang trang gỡ lỗi. Sau đó, bấm “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 chia sẻ bài viết với đầy đủ thông tin về ảnh, tên bài viết và nội dung.

6. Kết luận

Tận dụng Facebook như một nền tảng để phát triển và quảng bá Website là sự lựa chọn 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 và đầy đủ ảnh Thumbnail, Description,… để tăng lượng tương tác trên mạng xã hội.