Thẻ meta Open Graph là gì? Có tác dụng gì trong SEO?

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 nhiều người để ý đến công cụ SEO 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. Muốn sửa phải làm sao?

Đó chính là lúc cần biết cách sử dụng các thẻ Open Graph (viết tắt là OG).

Vậy, thực sự thì thẻ meta Open Graph là gì? Cách sử dụng ra sao? Và cách tối ưu thể nào để đạt hiệu quả SEO cao nhất?

Đó là những nội dung chính của bài viết này. Nếu bạn muốn hình dung ngay xem thẻ này trông thế nào trong mã nguồn, thì có thể xem trong hình dưới. Rồi sau đó đọc tiếp từng phần nội dung chi tiết trong bài nhé.

Thẻ Open Graph của trang web này

Các thẻ Open Graph của trang web này

Và đây là nội dung chính của bài:

Trước hết, tôi muốn trao đổi về khái niệm...

Thẻ meta Open Graph là gì?

Thẻ Open Graph là loại thẻ cung cấp thông tin về trang web (meta tag), được đặt trong phần <head> của trang. Mục đích của thẻ OG là để giúp các mạng xã hội như Facebook, Twitter hay Zalo... xác định được những thông tin chính về trang web của bạn, và hiển thị những thông tin đó khi có ai đó chia sẻ trang web trên mạng xã hội.

Có thể coi thẻ OG như 1 loại dữ liệu có cấu trúc (structured data) mà Facebook có thể hiểu được.

Hãy thử nghĩ lại xem đã bao giờ bạn chia sẻ một trang web lên Facebook, và thấy thông tin xuất hiện một cách đơn điệu thế này chưa?

Xem trước chia sẻ trang web lên Facebook

Xem trước chia sẻ trang web lên Facebook

Tôi đã cố ý đưa thiếu thông tin trong mã nguồn để bạn thấy: Thiếu ảnh đại diện, nội dung sơ sài, kém hấp dẫn… Phải vậy không?

Nguyên nhân là do trong mã nguồn không khai báo đủ, do đó Facebook không xác định được thông tin quan trọng như ảnh đại diện (hoặc ảnh có kích thước quá nhỏ), tóm tắt nội dung của trang mà bạn vừa chia sẻ. Mạng xã hội này sẽ tự chọn những nội dung có sẵn, và kết quả là hình thức kém lôi cuốn như trên hình.

Nhưng chúng ta đang nói về chủ đề SEO web thì chia sẻ trên Facebook, hay các mạng xã hội khác, liệu có liên quan gì nhỉ?

Có đấy!

Mặc dù thẻ này không ảnh hưởng trực tiếp đến xếp hạng của công cụ tìm kiếm, nhưng lại tác động gián tiếp đến SEO website, thông qua việc tương tác của người dùng đến chia sẻ trên các mạng xã hội, điển hình như Facebook, Twitter, Pinterest, và ở Việt Nam là Zalo.

Thông tin chia sẻ sẽ ảnh hưởng đến lượng truy cập đến trang mà bạn chia sẻ. Nếu thông tin đó đầy đủ hấp dẫn, ảnh đại diện bắt mắt, thì sẽ thu hút người dùng trên Facebook nhấp vào xem trang của bạn nhiều hơn. Và ngược lại.

Số lượng người dùng đến trang đương nhiên sẽ ảnh hưởng đến kết quả SEO, một cách gián tiếp.

Để bạn thấy được sự khác nhau, tôi bổ sung thêm mã Open Graph vào web, và kết quả trước và sau sẽ thế này.

Chia sẻ trên Facebook nhưng chưa tối ưu Chia sẻ trên Facebook sau khi tối ưu
Không tối ưu thì chia sẻ sẽ thế này Chia sẻ trên Facebook sau khi tối ưu

Bạn thấy tác dụng của thẻ OG rồi chứ. Chắc hẳn trường hợp có đủ thông tin khai báo với Facebook, thì post mà bạn chia sẻ sẽ hấp dẫn người dùng hơn nhiều.

Ở trên tôi mới minh họa Facebook, với nhiều mạng xã hội khác như Twitter, LinkedIn, Pinterest hay Zalo, thì thẻ OG cũng có tác dụng tương tự.

Cách sử dụng thẻ meta Open Graph thế nào?

Trước hết tôi nói qua một chút về giao thức Open Graph.

Đây là giao thức giúp cho website giao tiếp với mạng xã hội được nhanh chóng hiệu quả. Mạng xã hội lấy thông tin quan trọng trên trang được nhanh gọn, những thông tin như: url, tiêu đề trang, tóm tắt nội dung, ảnh đại diện…

Giao thức này do Facebook khởi xướng và áp dụng từ năm 2010, nên có tên đầy đủ là Facebook Open Graph. Sau đó nhiều mạng xã hội khác cũng phát triển công cụ để kết nối với website: hoặc dùng chung cú pháp của Facebook OG, hoặc phát triển giao thức khác có cấu trúc tương tự (Twitter dùng Twitter Cards).

Cú pháp của Facebook Open Graph có 5 nội dung chính, cùng với nhiều tùy chọn đi kèm. Để hiểu rõ hơn, bạn nhìn vào ảnh dưới đây:

Thông tin chia sẻ trên Facebook: Vinfast tăng giá xe

Nội dung chính của các thẻ OG

Khi chia sẻ hoặc chỉ cần gõ Url của 1 trang web, Facebook nạp trước thông tin, và bạn đã có thể thấy được 4 nội dung - tương ứng với 4 loại thẻ OG:

  1. Ảnh đại diện (image)
  2. Nhan đề (title)
  3. Url của trang web đang được chia sẻ (dưới title và ẩn trong image)
  4. Đoạn mô tả ngắn (description)

Để có những thông tin này, thì trong thẻ <head> bạn cần chèn đoạn mã như sau:

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

Giờ chúng ta sẽ tìm hiểu từng loại:

og:title

Đây là nhan đề, hay nhiều người gọi là tiêu đề trang cũng được. Phần này sẽ hiển thị là tiêu đề trên phần chia sẻ.

Thẻ này tương tự như thẻ <title>, và bạn có thể lấy luôn nội dung của title trang là ổn. Facebook cũng lấy nội dung title, nếu không tìm thấy og:title trong mã code.

Để người dùng quan tâm, bạn cần viết phần này thật lôi cuốn. Độ dài thường khoảng từ 60 đến 90 ký tự để hiển thị vừa đẹp trong không gian chia sẻ. Tham khảo thêm về cách viết thẻ tiêu đề tại đây.

og:type

Thuộc tính này là để mô tả loại đối tượng thông tin (object) mà bạn đang muốn chia sẻ. Trong ví dụ tôi nêu ở phía trên là với trang bài viết (article), thì cú pháp sẽ thế này:

<meta property="og:type" content="article"/>

Thực tế, bạn có thể chia sẻ nhiều loại đối tượng, trong số đó có những loại phổ biến như:

  • Liên quan đến web: Website, Blog, Bài viết (article)
  • Trong lĩnh vực giải trí: sách (book), trò chơi (game), phim (movie), đồ ăn (food)
  • Về nơi chốn: đất nước (country), thành phố (city)
  • Về con người: diễn viên (actor), tác giả (author), chính trị gia (politician)
  • Trong kinh doanh: Công ty (company), nhà hàng (restaurant), khách sạn (hotel)

Bạn có thể tra cứu danh sách đầy đủ các loại OG tại đây.

og:url

Phần này thể hiện url của trang mà bạn chia sẻ.

Lưu ý: cần nhập Canonical URL - nghĩa là đường dẫn của trang chính, nếu có 2 hay nhiều trang trùng lặp nội dung. >> Tìm hiểu thêm về Canonical URL tại đây.

Ví dụ:

<meta property="og:url" content="https://carly.com.vn/blog/tu-khoa-lsi-la-gi/"/>

og:image

Đây chính là thuộc tính thể hiện ảnh đại diện cho trang bạn chia sẻ trên Facebook. Thuộc tính này nên được cung cấp rõ ràng, ngay cả khi Facebook có thể tự suy ra giá trị từ các thẻ khác.

Ví dụ:

<meta property="og:image" content="https://carly.com.vn/media/1219/carly-logo-2.png" />

Bạn nên chọn 1 ảnh đại diện đẹp và phù hợp với nội dung, đồng thời hấp dẫn người xem.

Nếu không có thẻ og:image này thì Facebook sẽ tự tìm 1 ảnh nào đó trên trang, và rất có thể đó là 1 tấm hình banner quảng cáo nào đó có nội dung chẳng liên quan. Chắc hẳn khi làm SEO, bạn không muốn để Facebook tự xác định ảnh cần hiển thị vậy.

Chẳng hạn, nếu không chỉ định bằng thẻ og:image, thì rất có thể trang của bạn sẽ thế này trên Facebook:

Không có thẻ og:image thì chia sẻ sẽ thế này

Không có thuộc tính og:image thì khi chia sẻ có thể xấu thế này

Thuộc tính ảnh này có tác dụng rất lớn trong marketing, vì ảnh chụp có nhiều ý nghĩa với người dùng, và rất dễ thu hút chú ý, từ đó người dùng nhấp chuột vào trang để đọc chi tiết. Điều này làm tăng tỷ lệ chuyển đổi (conversion rate).

Vì vậy, hãy hướng dẫn cho mạng xã hội biết ảnh nào (đẹp) làm ảnh đại diện (thumbnail) khi ai đó chia sẻ bài viết trên Facebook. Có thể dùng nhiều ảnh, mỗi ảnh khai báo trên 1 dòng og:image.

Và cũng khá thú vị khi biết rằng, bạn có thể sử dụng ảnh không có trên trang web mà bạn đang chia sẻ. Nghĩa là có thể lấy ảnh khác (nhưng nên liên quan) để thu hút người lướt Facebook. Ngoài ra, nên dùng ảnh kích thước lớn (dưới 5MB) để tận dụng tối đa hiệu ứng với người dùng.

Nhiều chuyên gia SEO khuyên nên dùng ảnh có độ phân giải 1200 x 627 pixel (tỉ lệ 1.91/1). Tôi dùng thử, thì hình chia sẻ rất lớn, nhìn rõ ràng và bắt mắt, như thế này:

Chia sẻ bài viết có ảnh thumbnail lớn
Có ảnh cỡ lớn được hiển thị trên chia sẻ

Trường hợp bạn dùng ảnh có kích thước nhỏ hơn 400 x 209 pixel, thì Facebook sẽ xén bớt ảnh để tạo thumbnail hình vuông, và sẽ như dưới đây. Lưu ý phần ảnh ở trung tâm sẽ hiển thị, 2 bên sẽ bị cắt xén, vì thế nếu ảnh có dòng ký tự nào đó, thì nên để ở chính giữa (tránh bị cắt đi).

Chia sẻ trên Facebook với ảnh thumbnail nhỏ
Chia sẻ trên Facebook với ảnh thumbnail nhỏ

Rõ ràng, hình trên kích thước lớn hơn, nhìn bắt mắt hơn nhiều. Và chúng ta làm marketing đều muốn như vậy. Vậy bạn nên lưu ý chi tiết kích thước này để tận dụng lợi thế.

og:description

Thẻ này cũng tương tự như thẻ Meta description trong SEO Onpage. Tại đây, bạn tóm tắt nội dung chính của trang. Nhưng thay vì để thông báo cho Google, thì thẻ này để cung cấp nội dung phần mô tả tóm tắt của trang khi chia sẻ trên Facebook. Mục đích là giống nhau.

Ví dụ:

<meta property="og:description" content="Tóm tắt nội dung trang tại đây, cần viết cho hấp dẫn người đọc."/>

Do không phải là thẻ Meta Description, nên không ảnh hưởng trực tiếp đến SEO. Vì vậy, bạn không cần mất quá nhiều thời gian để trau chuốt, hay cũng không cần cố nghĩ cách hay để đưa từ khóa chính vào làm gì. Mặc dù thế, bạn vẫn nên viết nội dung này sao cho hấp dẫn, để luôi cuốn người dùng nhấp chuột vào xem chi tiết trang.

Một số thẻ Open Graph nâng cao

Nếu không có thời gian hoặc chỉ cần đơn giản, bạn dùng 5 loại thẻ tôi giới thiệu ở phần trên là đủ. Trường hợp, bạn muốn dùng chuyên sâu hơn, thì đây là một số thuộc tính của thẻ Open Graph có thể xem xét thêm:

  • og:locale – định nghĩa ngôn ngữ, mặc định là “en_US” cho tiếng Anh - Mỹ, bạn nên chuyển về “vi” cho website tiếng Việt.
  • og:site_name – nếu trang (đối tượng) bạn đang chia sẻ là một phần của một mạng lưới lớn hơn.
  • og:audio hoặc og:video – để thêm file dạng audio hoặc video vào đối tượng chia sẻ.
  • fb:app_id – để liên kết đối tượng chia sẻ tới ứng dụng Facebook (ví dụ: Facebook Comments).

Ngoài những thẻ nêu trên, nếu bạn có nhu cầu áp dụng thêm, thì có thể tham khảo danh sách đầy đủ hơn các thẻ Open Graph tại đây.

Cách tạo thẻ Open Graph nhanh

Bạn có thể sử dụng một số công cụ open graph generator để khởi tạo mã OG cho nhanh và chính xác. Chẳng hạn như:

  • https://webcode.tools/open-graph-generator
  • https://smallseotools.com/open-graph-generator/
  • https://www.duplichecker.com/open-graph-generator.php

Cách thực hiện khá đơn giản. Bạn nhập nội dung cần thiết vào các ô có sẵn rồi Enter là sẽ nhận được những mã cần thiết.

Chẳng hạn, tôi dùng smallseotools.com, thì khi nhập thông tin như sau:

Nhập thông tin để tạo Open Graph trên SmallSeoTools

Nhập thông tin để tạo Open Graph trên SmallSeoTools

sẽ được kết quả như hình dưới:

Tạo mã các thẻ Open Graph bằng SmallSeoTool

Tạo mã các thẻ Open Graph bằng SmallSeoTool

Tiếp đó, bạn chỉ cần Copy và dán những dòng code này vào mã nguồn là xong. Khá đơn giản phải không!

Kiểm tra thẻ meta Open Graph thế nào?

Khi thêm thẻ OG xong, có lẽ bạn cũng muốn xem trước (preview) 1 trang khi chia sẻ lên Facebook thì trông sẽ như thế nào.

Cách làm đơn giản thôi, bạn dùng luôn trình gỡ lỗi chia sẻ (Open Graph Debugger) của Facebook.

Chỉ cần nhập Url của trang vào ô văn bản rồi nhấn nút Debug hoặc phím Enter. Bạn sẽ thấy hệ thống báo những lỗi hoặc những gợi ý với trang, nếu có. Bạn cũng sẽ thấy được nội dung các thẻ og:title nhìn thế nào, og:image trông ra sao…

Căn cứ vào thông báo Facebook đưa ra để bổ sung chỉnh sửa cho phù hợp.

Dùng công cụ Open Graph Debugger của Facebook

Thử test công cụ Open Graph Debugger của Facebook cho ivivu.com

Một điều cần lưu ý: dùng chức năng này sẽ xóa cache (bộ nhớ đệm) với Facebook. Nó hoạt động thế này: khi bạn dùng 1 ảnh trong thẻ og:image và chia sẻ trang trên Facebook. Lúc đó, bạn chưa ứng ý, và quay lại thay ảnh khác, và chia sẻ lại. Kỳ lạ thay, tấm ảnh cũ vẫn hiển thị trên đó. Đó là vì Facebook lấy ảnh trong bộ nhớ cache. Để có ảnh mới, bạn cần xóa cache Facebook, và một cách là dùng chính công cụ Sharing Debugger mà tôi đang trình bày ở đây.

Công cụ này sẽ thu thập lại và làm mới (refresh) lại bộ nhớ đệm, và bạn sẽ có nội dung cập nhật khi chia sẻ trang lên Facebook.

Thẻ meta Open Graph với Zalo

Zalo cũng sử dụng cú pháp giống như Facebook. Do đó, bạn chỉ cần làm xong các bước ở trên cho Facebook, cũng có thể dùng luôn được với Zalo.

Ví dụ của Zalo:

<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" />

Có thể tìm hiểu thêm cách tạo liên kết để chia sẻ trên Zalo tại đây.

Kết luận

Sử dụng thẻ meta Open Graph để chia sẻ trang web của bạn lên các mạng xã hội là một trong các kỹ thuật mà người làm SEO cần biết và áp dụng. Bạn có thể áp dụng cho những thuộc tính cơ bản, hoặc nếu có thể, thì cả các thuộc tính nâng cao.

Mặc dù không có tác dụng trực tiếp, nhưng sử dụng đúng thẻ meta loại này sẽ giúp tăng tương tác, tăng truy cập, và cải thiện tỷ lệ chuyển đổi.

Đến đây tôi xin kết thúc bài viết. Bạn muốn chia sẻ gì về kinh nghiệm của mình khi áp dụng các thẻ Open Graph này? Kết quả thế nào?


Bình luận trên Facebook

Bài viết gần đây