Thẻ Open Graph là gì? Cài đặt Open Graph cho website nhanh

Thẻ Open Graph là gì? Việc sử dụng thẻ meta Open Graph là một trong những kỹ thuật nâng cao làm SEO Website. Không có nhiều người để ý 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 phải sử dụng đến Open Graph. Sau đây sẽ là những nội dung đáng chú ý trong bài viết của Xuyên Việt Media hôm nay.

Thẻ Open Graph là gì?

Hầu hết SEOer không để ý đến việc tận dụng thẻ meta Open Graph. Trong khi đó đa phần người dùng ít nghe đến cụm từ này khi tìm hiểu về SEO. Vậy thẻ Open Graph là gì? Nếu bạn tối ưu nội dung và hình ảnh website, bạn sẽ không thấy sự hữu dụng của thẻ Open Graph. Tuy nhiên trong quá trình SEO, sẽ không tránh khỏi việc chia sẻ bài viết từ website sang nền tảng mạng xã hội khác. 

Nếu bạn thấy bài viết chia sẻ sang Facebook không hiển thị tiêu đề, avatar hay đoạn tóm tắt một cách trực quan, đẹp mắt. Đó là lúc cần tối ưu thẻ meta Open Graph.Thực chất nguyên nhân việc bài viết hiển thị kém hấp dẫn ở nền tảng khác là do mã nguồn không khai báo đầy đủ. Tiếp đó dẫn đến việc Facebook chỉ hiển thị nội dung có sẵn.

Như vậy, hiểu nôm na thẻ Open Graph có chức năng giúp bạn khai báo thành phần nội dung trang một cách đầy đủ. Từ đó điều chỉnh kết quả hiển thị bài viết khi chia sẻ từ website sang nền tảng khác. Open Graph cũng được coi là dạng dữ liệu có cấu trúc mà nền tảng mạng xã hội có thể hiểu được.

Thẻ Open Graph là gì?
Thẻ Open Graph là gì

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

Một số cách chèn Open Graph vào Website cực kỳ đơn giản mà ai cũng phải biết: 

Cách 1: Chèn Open Graph vào plugin WordPress

Yoast SEO là một plugin WordPress SEO lý tưởng bạn có thể sử dụng để chèn thêm dữ liệu Open graph vào WordPress.

  • Bước 1: Bạn truy cập SEO → Social, sau đó di chuyể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 hình ảnh mặc định, hình ảnh này đượ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à 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
Hướng dẫn chèn Open Graph vào Website
Hướng dẫn chèn Open Graph vào Website

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 dưới đây: 

function doctype_opengraph($output) { return $output. 

 xmlns:og=”https://opengraphprotocol.org/schema/”

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

Chú ý chèn vào trong thẻ file function.

  • Bước 2: Sau khi hoàn thành bước đầu tiên, hàm 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’);

  • 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 để tự động móc thẻ Open graph vào thẻ.

Xem Thêm >>

Các thuộc tính có trong Open Graph

Một số thuộc tính có trong Open Graph mà bạn có thể biết đó là:

  • og Title: Đây là nơi bạn đặt tiêu đề cho nội dung bài viết trên website của bạn. Bạn có thể nghĩ thuộc tính này tương tự như thẻ title HTML mà Search Engine đang sử dụng. Khi tạo title, nên giữ số ký tự ít hơn 25.
  • og Type: Đây là nơi bạn mô tả loại hình nội dung mà mình sẽ chia sẻ trong bài viết trên website. Các nội dung đó có thể là hình ảnh, video, bài viết, blog,… Đây cũng là danh sách đầy đủ bạn có thể sử dụng để nghiên cứu khi định hình nội dung.
  • og Description: Tương tự như meta Description HTML, thuộc tính này sử dụng cho mục đích mô tả nội dung. Bạn không cần quan tâm phần mô tả có chứa nhiều từ khóa hay không, thay vào đó, nên tiếp cận cách viết mô tả hấp dẫn để thu hút và nhận được nhiều lượt click.
  • og Image: Facebook bằng cách sử dụng thẻ này đưa ra một hình ảnh Thumbnail ngay khi có người chia sẻ URL của bạn. Ngay lúc này, một hình ảnh nhỏ xuất hiện bên cạnh nội dung mà bạn chia sẻ. Đây được xem là cách để status của bạn trở nên nổi bật hơn so với status được cập nhật bằng text.
  • og URL: Với thẻ này, bạn sẽ đặt URL chính trên trang bạn chia sẻ. Đây là thuộc tính quan trọng bởi đôi lúc bạn sẽ cần nhiều hơn một URL cho cùng một nội dung của trang web. Sử dụng thẻ này, bạn đảm bảo mọi thứ mà người dùng chia sẻ trên Facebook đều cùng đi đến một URL gốc mà chính bạn chỉ định và tránh được việc phân tán.
  • og Sitename: Thẻ này sẽ chỉ cho Facebook tên website của bạn. Thẻ này không thực sự cần thiết bởi nó không ảnh hưởng quá nhiều nếu nó không có.
the open graph la gi 3
Các thuộc tính có trong Open Graph

 Kết luận

Trên đây là một số thông tin chính về thẻ Open Graph là gì? và vai trò của thẻ đối với SEO website. Mong rằng bài viết của Xuyên Việt Media giúp bạn giải đáp thắc mắc Open Graph là gì. Theo dõi để biết thêm về các thủ thuật SEO hiệu quả nhé!

Lê

Cảm nhận về bài viết

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bài viết liên quan