Open Graph là gì? Cách tích hợp Open Graph tags vào website

Bạn đã bao giờ chia sẻ một bài viết của website lên Facebook hoặc LinkedIn nhưng hình ảnh hiển thị lại không đúng, tiêu đề bị cắt hoặc phần mô tả hoàn toàn không liên quan đến nội dung? Những vấn đề này thường xuất phát từ cách website khai báo Open Graph tags. Đây là nhóm thẻ meta giúp các nền tảng mạng xã hội đọc và xác định thông tin cần hiển thị khi một URL được chia sẻ. Không chỉ giúp kiểm soát tiêu đề, mô tả và hình ảnh, Open Graph còn góp phần tạo trải nghiệm chia sẻ nhất quán và chuyên nghiệp hơn cho website.
 

 

Open Graph là gì?

Open Graph là một tập hợp các thẻ meta được sử dụng để khai báo thông tin của một trang web với các nền tảng mạng xã hội. Các thẻ này thường được đặt trong phần < head > của mã HTML, giúp hệ thống bên ngoài hiểu trang đang chia sẻ nội dung gì và nên hiển thị thông tin nào khi người dùng đăng URL lên mạng xã hội.

Một số thuộc tính Open Graph phổ biến gồm:

- og:title để xác định tiêu đề.

- og:description cho phần mô tả. 

- og:image chỉ định hình ảnh đại diện.

- og:url xác định URL chính của nội dung. 

Ví dụ, khi người dùng chia sẻ một bài viết lên Facebook, nền tảng này có thể đọc các thẻ Open Graph trên trang để tạo thành một giao diện xem trước gồm tiêu đề, hình ảnh và mô tả. Nếu website không khai báo hoặc khai báo sai, mạng xã hội có thể tự động lấy dữ liệu từ nội dung trang, dẫn đến hình ảnh hoặc tiêu đề hiển thị không đúng mong muốn.
 

;

 

Cách thức hoạt động của Open Graph meta

Open Graph hoạt động dựa trên việc website cung cấp các thông tin được chuẩn hóa trong mã HTML. Khi một URL được chia sẻ, nền tảng mạng xã hội hoặc công cụ thu thập dữ liệu sẽ truy cập vào trang và đọc những thẻ Open Graph được khai báo trong phần < head >.

Chẳng hạn, website có thể khai báo og:title cho tiêu đề, og:description cho phần mô tả và og:image cho hình ảnh đại diện. Hệ thống mạng xã hội sẽ sử dụng những dữ liệu này để tạo preview cho URL được chia sẻ. Vì vậy, thay vì để nền tảng tự chọn nội dung từ trang, quản trị viên có thể chủ động xác định những thông tin quan trọng muốn người dùng nhìn thấy.

Quá trình này có thể được hiểu đơn giản theo các bước: người dùng chia sẻ URL → nền tảng truy cập website → đọc Open Graph meta → lấy dữ liệu → tạo giao diện preview. Nếu các thẻ được cấu hình chính xác, nội dung chia sẻ sẽ có tiêu đề, hình ảnh và mô tả phù hợp với mục đích truyền thông của trang.
 

Vai trò của Open Graph đối với website

Open Graph không phải là yếu tố trực tiếp quyết định thứ hạng tìm kiếm trên Google, nhưng có vai trò quan trọng trong cách nội dung website xuất hiện trên mạng xã hội. Cấu hình đúng Open Graph giúp kiểm soát hình thức hiển thị, tăng tính chuyên nghiệp và tạo điều kiện để người dùng chú ý hơn đến liên kết được chia sẻ.

1. Kiểm soát nội dung hiển thị khi chia sẻ

Open Graph cho phép website chủ động xác định những thông tin xuất hiện trong phần preview khi URL được chia sẻ. Thay vì để nền tảng mạng xã hội tự động lựa chọn một đoạn văn hoặc hình ảnh bất kỳ trên trang, website có thể chỉ định chính xác tiêu đề, mô tả, hình ảnh và URL muốn sử dụng.

Điều này đặc biệt hữu ích với các trang có nhiều nội dung như bài blog, trang dịch vụ, sản phẩm hoặc landing page. Mỗi trang có thể được thiết lập thông tin Open Graph riêng, giúp nội dung hiển thị đúng với chủ đề và mục tiêu của trang đó.

2. Tăng khả năng thu hút lượt click

Một preview có tiêu đề rõ ràng, mô tả ngắn gọn và hình ảnh phù hợp thường dễ tạo sự chú ý hơn một liên kết chỉ hiển thị dưới dạng URL. Open Graph giúp website tối ưu những thành phần này để nội dung nổi bật hơn trong dòng thời gian hoặc các cuộc trò chuyện có chia sẻ liên kết.

Đặc biệt, og:image có thể được sử dụng để lựa chọn hình ảnh đại diện phù hợp với từng nội dung. Khi kết hợp hình ảnh có chất lượng tốt với tiêu đề và mô tả hấp dẫn, website có thể tạo ra một preview trực quan hơn, từ đó hỗ trợ tăng khả năng người dùng quan tâm và truy cập vào trang.

3. Định hình hình ảnh thương hiệu

Open Graph meta cũng góp phần duy trì sự nhất quán về hình ảnh thương hiệu trên các nền tảng bên ngoài website. Doanh nghiệp có thể lựa chọn hình ảnh, tiêu đề và cách mô tả phù hợp với bộ nhận diện cũng như thông điệp truyền thông của mình.

Ví dụ, một thương hiệu có thể sử dụng hình ảnh đại diện được thiết kế đồng bộ về logo, màu sắc và phong cách hình ảnh cho các bài viết quan trọng. Khi nhiều nội dung được chia sẻ, cách trình bày nhất quán giúp người dùng dễ nhận diện thương hiệu hơn và tạo cảm giác chuyên nghiệp trong quá trình tiếp cận.

4. Cải thiện trải nghiệm khi chia sẻ nội dung

Open Graph giúp quá trình chia sẻ nội dung trở nên trực quan hơn đối với cả người đăng và người xem. Khi một URL được chia sẻ, người nhận có thể nhanh chóng biết liên kết dẫn đến nội dung gì thông qua tiêu đề, hình ảnh và mô tả được hiển thị trong preview.

Điều này đặc biệt quan trọng với những nội dung được chia sẻ qua mạng xã hội, ứng dụng nhắn tin hoặc các nền tảng hỗ trợ xem trước liên kết. Một preview đầy đủ giúp người dùng có thêm thông tin trước khi quyết định nhấp vào URL, đồng thời giảm tình trạng liên kết hiển thị thiếu dữ liệu hoặc không đúng ngữ cảnh.

5. Hỗ trợ SEO gián tiếp

Open Graph không phải là một yếu tố xếp hạng SEO trực tiếp của Google. Tuy nhiên, việc tối ưu Open Graph tags có thể hỗ trợ hoạt động SEO theo hướng gián tiếp thông qua khả năng cải thiện mức độ tương tác và chia sẻ nội dung website trên mạng xã hội.

Khi nội dung được trình bày hấp dẫn hơn, người dùng có thể dễ chú ý, truy cập và chia sẻ URL hơn. Những lượt truy cập hoặc tín hiệu lan truyền này không đồng nghĩa với việc website được Google tăng thứ hạng trực tiếp, nhưng có thể góp phần mở rộng khả năng tiếp cận nội dung, tăng nhận diện thương hiệu và tạo thêm cơ hội để người dùng tìm đến website từ nhiều nguồn khác nhau.

 

 

Các thẻ Open Graph cốt lõi (Core OG Tags)

Các thẻ Open Graph cốt lõi giúp website xác định những thông tin quan trọng sẽ được sử dụng khi một URL được chia sẻ trên mạng xã hội. Mỗi thẻ đảm nhiệm một vai trò riêng, từ tiêu đề, mô tả, hình ảnh đến URL và loại nội dung. Khai báo đầy đủ và chính xác các thuộc tính này giúp preview của bài viết hiển thị đúng nội dung, hạn chế tình trạng sai tiêu đề, thiếu hình ảnh hoặc mô tả không phù hợp. 

1. og:title

og:title là thẻ dùng để xác định tiêu đề của nội dung khi URL được chia sẻ trên các nền tảng hỗ trợ Open Graph. Đây thường là phần thông tin nổi bật nhất trong preview, giúp người dùng nhanh chóng nhận biết nội dung của liên kết trước khi quyết định truy cập.

Giá trị của og:title nên ngắn gọn, rõ ràng và phản ánh chính xác nội dung trang. Trong nhiều trường hợp, website có thể sử dụng tiêu đề SEO làm cơ sở nhưng không nhất thiết phải giống hoàn toàn với thẻ < title >. Nếu muốn tối ưu nội dung hiển thị trên mạng xã hội, quản trị viên có thể viết một tiêu đề phù hợp hơn với ngữ cảnh chia sẻ.

Ví dụ: < meta property="og:title" content="Hướng dẫn tối ưu SEO Onpage cho website" >. Khi URL được chia sẻ, nền tảng mạng xã hội có thể sử dụng giá trị “Hướng dẫn tối ưu SEO Onpage cho website” làm tiêu đề trong phần preview.

Để og:title phát huy hiệu quả, nên tránh đặt tiêu đề quá dài, sử dụng nội dung chung chung hoặc nhồi nhét từ khóa. Tiêu đề càng cụ thể và phù hợp với nội dung trang thì người dùng càng dễ hiểu giá trị của liên kết ngay từ phần xem trước.

2. og:description

og:description là thẻ Open Graph dùng để xác định phần mô tả ngắn hiển thị bên dưới tiêu đề khi một URL được chia sẻ trên mạng xã hội. Nội dung này giúp người dùng hiểu nhanh trang web cung cấp thông tin gì, từ đó có thêm cơ sở để quyết định có nhấp vào liên kết hay không.

Giá trị của og:description nên được viết ngắn gọn, dễ hiểu và tập trung vào lợi ích hoặc nội dung chính của trang. Thay vì sao chép nguyên một đoạn văn dài từ bài viết, nên tạo mô tả riêng cho mạng xã hội, ưu tiên thông tin có khả năng thu hút sự chú ý và phù hợp với ngữ cảnh chia sẻ.

Ví dụ: < meta property="og:description" content="Tìm hiểu cách tối ưu Open Graph giúp website kiểm soát nội dung hiển thị khi chia sẻ và tăng khả năng thu hút lượt truy cập từ mạng xã hội." >.

Khi người dùng chia sẻ URL, nền tảng hỗ trợ Open Graph có thể sử dụng nội dung trên để tạo phần mô tả trong preview. Nếu không khai báo og:description, nền tảng có thể tự động lấy một đoạn nội dung bất kỳ trên trang, khiến phần mô tả không đúng trọng tâm hoặc thiếu hấp dẫn.

Để tối ưu thẻ này, nên đảm bảo mô tả phản ánh đúng nội dung trang, tránh nhồi nhét từ khóa và hạn chế sử dụng câu quá dài. Với những trang quan trọng như bài viết, trang dịch vụ hoặc landing page, việc thiết lập og:description riêng giúp kiểm soát tốt hơn thông tin xuất hiện khi nội dung được chia sẻ.

3. og:image

og:image là thẻ Open Graph dùng để xác định hình ảnh đại diện được hiển thị khi URL của website được chia sẻ trên mạng xã hội. Đây là một trong những thẻ quan trọng vì hình ảnh thường là yếu tố trực quan đầu tiên thu hút sự chú ý của người dùng trong phần preview.

Thay vì để nền tảng mạng xã hội tự động lựa chọn hình ảnh từ nội dung trang, website có thể sử dụng og:image để chỉ định chính xác hình ảnh muốn hiển thị. Hình ảnh nên liên quan trực tiếp đến nội dung, có chất lượng tốt và được thiết kế phù hợp với bố cục preview của từng nền tảng.

Ví dụ: < meta property="og:image" content="https: //example.com/images/open-graph.jpg" >. Khi URL được chia sẻ, nền tảng có thể lấy hình ảnh tại địa chỉ được khai báo trong content để tạo ảnh preview. Nếu og:image bị thiếu, đường dẫn sẽ bị không hợp lệ hoặc hình ảnh không thể truy cập, dẫn đến nền tảng có thể không hiển thị ảnh hoặc tự chọn một hình ảnh khác trên trang.

Để tối ưu og:image, nên sử dụng hình ảnh có độ phân giải phù hợp, dung lượng được tối ưu để không ảnh hưởng đến tốc độ tải và nội dung trực quan dễ nhận diện. Với website doanh nghiệp, hình ảnh Open Graph cũng nên đồng bộ với nhận diện thương hiệu như logo, màu sắc hoặc phong cách thiết kế.

4. og:url

og:url là thẻ Open Graph dùng để xác định URL chuẩn của trang web được chia sẻ. Thẻ này giúp các nền tảng mạng xã hội nhận biết chính xác địa chỉ đại diện cho nội dung, đặc biệt trong trường hợp một trang có thể được truy cập thông qua nhiều URL khác nhau. Ví dụ: < meta property = "og:url" content = "https:// example.com/huong-dan-open-graph" >.

Giá trị trong og:url nên là URL tuyệt đối, chính xác và trỏ đến phiên bản URL mà website muốn sử dụng làm địa chỉ chính. Nên hạn chế sử dụng URL có tham số theo dõi, URL tạm thời hoặc các phiên bản khác nhau của cùng một nội dung nếu không cần thiết.

Khai báo og:url đặc biệt hữu ích với những website có nhiều biến thể URL do tham số truy vấn, bộ lọc hoặc các cấu trúc điều hướng khác nhau. Khi người dùng chia sẻ nội dung, nền tảng có thể dựa vào URL được khai báo để xác định trang đại diện thay vì phải tự suy đoán từ URL được cung cấp.

 

 

5. og:type

og:type là thẻ Open Graph dùng để xác định loại nội dung của một trang web. Thông tin này giúp nền tảng mạng xã hội hiểu URL đang được chia sẻ là bài viết, website, sản phẩm hay một dạng nội dung khác, từ đó xử lý và hiển thị thông tin phù hợp.

Ví dụ, với một bài viết trên blog, website có thể khai báo: < meta property="og:type" content="article" >.

Một số giá trị thường gặp của og:type gồm:

- website: Dùng cho trang chủ hoặc các trang web mang tính tổng quát.

- article: Dùng cho bài viết, tin tức, blog hoặc nội dung biên tập.

- book: Dùng cho trang giới thiệu sách.

- profile: Dùng cho trang hồ sơ cá nhân.

Lựa chọn đúng og:type giúp phân loại nội dung chính xác hơn khi được chia sẻ. Chẳng hạn, một bài blog nên sử dụng article thay vì website, trong khi trang chủ thường phù hợp với website.

6. og:site_name

og:site_name là thẻ Open Graph dùng để xác định tên website hoặc tên thương hiệu gắn với nội dung được chia sẻ. Thẻ này cung cấp thêm thông tin về nguồn của trang, giúp người dùng nhận biết nội dung thuộc website hoặc thương hiệu nào khi xem preview trên các nền tảng hỗ trợ Open Graph.

Ví dụ: < meta property="og:site_name" content="Phương Nam Vina" >

Khác với og:title, thẻ og:site_name không dùng để đặt tiêu đề của từng bài viết hay từng trang. og:title thay đổi tùy theo nội dung được chia sẻ, trong khi og:site_name thường giữ cố định để đại diện cho toàn bộ website hoặc thương hiệu.

Chẳng hạn, một bài viết có thể được khai báo kết hợp như sau:

< meta property="og:title" content="Hướng dẫn tối ưu Open Graph cho website" >

< meta property="og:site_name" content="Phương Nam Vina" >

Trong trường hợp này, og:title xác định tên của bài viết, còn og:site_name cho biết bài viết thuộc website Phương Nam Vina. Phân tách hai thông tin giúp dữ liệu Open Graph rõ ràng và nhất quán hơn. 

og:site_name đặc biệt hữu ích với các website doanh nghiệp, blog hoặc nền tảng xuất bản có nhiều nội dung được chia sẻ trên mạng xã hội. Khi tên thương hiệu được hiển thị nhất quán, người dùng có thể dễ dàng nhận diện nguồn nội dung, từ đó góp phần củng cố mức độ nhận biết thương hiệu.
 

 

Khám phá Open Graph tags nâng cao

Bên cạnh các thẻ Open Graph cơ bản như og:title, og:description, og:image và og:url, website có thể sử dụng thêm các thuộc tính nâng cao để cung cấp thông tin chi tiết hơn cho nền tảng mạng xã hội. Những thẻ này chủ yếu hỗ trợ kiểm soát cách hình ảnh và nội dung được xử lý, đặc biệt hữu ích với website có nhiều bài viết, sản phẩm hoặc nội dung được chia sẻ thường xuyên.

1. og:image:width

og:image:width là thuộc tính Open Graph dùng để khai báo chiều rộng của hình ảnh được chỉ định trong og:image, tính bằng pixel. Thông tin này giúp nền tảng xử lý hình ảnh nhanh chóng và xác định kích thước của ảnh trước khi tải hoặc hiển thị trong phần preview.

Ví dụ:

< meta property="og:image" content="https ://example.com/images/open-graph.jpg" > 

< meta property="og:image:width" content="1200" >

Trong ví dụ trên, giá trị 1200 cho biết hình ảnh Open Graph có chiều rộng 1.200 pixel. Thuộc tính này nên được khai báo chính xác và phải tương ứng với kích thước thực tế của file hình ảnh.

2. og:image:height

og:image:height là thuộc tính Open Graph dùng để khai báo chiều cao của hình ảnh được sử dụng trong thẻ og:image, với đơn vị tính bằng pixel. Thuộc tính này cung cấp thêm thông tin về kích thước thực tế của hình ảnh, giúp nền tảng mạng xã hội có dữ liệu đầy đủ hơn khi xử lý và tạo preview cho URL được chia sẻ.

Ví dụ:

< meta property="og:image" content="https://example.com/images/ open-graph.jpg" >

< meta property="og:image:height" content="630" >

Trong ví dụ này, giá trị 630 cho biết hình ảnh được khai báo có chiều cao 630 pixel. Giá trị này cần khớp với kích thước thực tế của file ảnh để tránh cung cấp dữ liệu không chính xác cho nền tảng xử lý.

3. og:image:alt

og:image:alt là thuộc tính Open Graph dùng để cung cấp văn bản thay thế cho hình ảnh được khai báo trong og:image. Nội dung này mô tả ngắn gọn hình ảnh, giúp cung cấp thêm ngữ cảnh về hình ảnh cho các nền tảng và trường hợp hình ảnh không thể hiển thị như mong muốn.

Ví dụ:

< meta property="og:image" content="https://example.com/images/open-graph.jpg" >

< meta property="og:image: alt" content="Hướng dẫn tối ưu Open Graph cho website" >

Trong ví dụ này, og:image:alt mô tả nội dung chính của hình ảnh là “Hướng dẫn tối ưu Open Graph cho website”. Để tối ưu, bạn nên sử dụng văn bản ngắn gọn, chính xác và phản ánh đúng nội dung trực quan của hình ảnh thay vì chèn nhiều từ khóa không liên quan.

4. og:locale

og:locale là thẻ Open Graph dùng để xác định ngôn ngữ và khu vực (locale) của nội dung trên trang web. Thông tin này giúp các nền tảng hỗ trợ Open Graph hiểu nội dung đang được cung cấp cho thị trường hoặc nhóm người dùng ngôn ngữ nào.

Giá trị của og:locale thường được viết theo định dạng language_TERRITORY, trong đó phần đầu biểu thị ngôn ngữ và phần sau biểu thị khu vực. Ví dụ, với một website cung cấp nội dung bằng tiếng Việt cho người dùng tại Việt Nam, có thể khai báo: < meta property="og:locale" content="vi_VN" >.

Một số giá trị thường gặp khác gồm:

- en_US: Tiếng Anh - Hoa Kỳ.

- en_GB: Tiếng Anh - Vương quốc Anh.

- fr_FR: Tiếng Pháp - Pháp.

- ja_JP: Tiếng Nhật - Nhật Bản.

- de_DE: Tiếng Đức - Đức.

5. Open Graph tags dành cho bài viết

Đối với các trang bài viết, Open Graph cung cấp thêm một nhóm thuộc tính chuyên biệt giúp mô tả rõ hơn thông tin của nội dung. Những thẻ này đặc biệt hữu ích với blog, trang tin tức hoặc website thường xuyên xuất bản bài viết, vì có thể cung cấp thông tin về tác giả, thời gian xuất bản, thời gian cập nhật và chuyên mục của nội dung.

Một số thuộc tính thường được sử dụng gồm:

- article:author: Xác định tác giả của bài viết.

- article:published_time: Khai báo thời điểm bài viết được xuất bản.

- article:modified_time: Khai báo thời điểm nội dung được cập nhật gần nhất.

- article:section: Xác định chuyên mục mà bài viết thuộc về.

- article:tag: Khai báo các chủ đề hoặc thẻ liên quan đến bài viết.

Các thuộc tính này bổ sung ngữ cảnh cho bài viết bên cạnh những thẻ Open Graph cốt lõi. Tuy nhiên, không phải tất cả đều bắt buộc. Website nên lựa chọn và khai báo những thuộc tính phù hợp với loại nội dung, đồng thời đảm bảo thông tin cung cấp chính xác và nhất quán với nội dung thực tế trên trang.

 

 

Hướng dẫn cài đặt Open Graph vào website

Cài đặt Open Graph không quá phức tạp và có thể thực hiện theo nhiều cách tùy thuộc vào nền tảng, hệ thống quản trị nội dung và quyền truy cập mã nguồn của website. Với website được xây dựng bằng HTML thuần, có thể thêm trực tiếp các thẻ meta vào phần < head >. Trong khi đó, các website sử dụng CMS như WordPress có thể triển khai thông qua plugin hoặc cấu hình từ hệ thống quản trị.

Cách 1: Chèn trực tiếp bằng mã HTML thủ công

Đây là phương pháp phù hợp với website HTML thuần hoặc những trường hợp bạn có quyền chỉnh sửa mã nguồn. Các thẻ Open Graph được thêm trực tiếp vào phần < head > của từng trang để xác định thông tin sẽ xuất hiện khi URL được chia sẻ.

Ví dụ, một bộ Open Graph cơ bản có thể được khai báo như sau:

< head > 

< meta property="og:title" content="Hướng dẫn tối ưu Open Graph cho website"> 

< meta property="og:description" content="Tìm hiểu cách cài đặt và tối ưu Open Graph để kiểm soát nội dung hiển thị khi chia sẻ website." > 

< meta property="og:image" content="https://example.com/images/open-graph.jpg" > 

< meta property="og:url" content="https://example.com/huong-dan-open-graph" > 

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

< meta property="og:site_name" content="Example"> 

< meta property="og:locale" content="vi_VN"> 

< /head > 

Khi triển khai, cần thay đổi các giá trị trong thuộc tính content theo đúng thông tin của từng trang. Chẳng hạn, og:title nên chứa tiêu đề tương ứng, og:description là phần mô tả, og:image phải trỏ đến hình ảnh có thể truy cập công khai và og:url cần trỏ đến URL chính xác của trang.

Cách 2: Cài đặt qua plugin CMS

Nếu website sử dụng CMS như WordPress, bạn có thể cài đặt và quản lý Open Graph thông qua các plugin SEO thay vì chỉnh sửa trực tiếp mã HTML. Phương pháp này phù hợp với người không có nhiều kinh nghiệm lập trình hoặc muốn quản lý các thẻ Open Graph trực tiếp từ giao diện quản trị.

Quy trình thực hiện thường gồm các bước:

- Cài đặt plugin SEO: Bạn truy cập trang quản trị CMS, tìm và cài đặt một plugin SEO có hỗ trợ Open Graph.

- Kích hoạt tính năng Open Graph: Sau khi kích hoạt plugin, bạn tìm đến phần thiết lập liên quan đến Social, Social Media hoặc Open Graph và bật tính năng này nếu plugin yêu cầu.

- Thiết lập thông tin mặc định: Khai báo tên website, hình ảnh mặc định và các thông tin Open Graph chung để sử dụng khi từng trang chưa có thiết lập riêng.

- Tùy chỉnh từng bài viết hoặc trang: Khi chỉnh sửa nội dung, bạn có thể thiết lập riêng tiêu đề, mô tả và hình ảnh hiển thị khi chia sẻ.

- Lưu và kiểm tra: Lưu cấu hình, sau đó kiểm tra mã nguồn trang để đảm bảo các thẻ Open Graph được tạo đúng.

Ví dụ, với một bài viết, plugin có thể cung cấp các trường để nhập Social Title, Social Description và Social Image. Khi người dùng chia sẻ URL, plugin sẽ tự động chuyển những thông tin này thành các thẻ như og:title, og:description và og:image trong mã HTML.
 

 

Cách 3: Tích hợp trong các framework hiện đại

Với website được xây dựng bằng các framework hiện đại như Next.js, Nuxt, React hoặc Vue, Open Graph thường được cấu hình thông qua hệ thống quản lý metadata của framework thay vì chèn thủ công từng thẻ vào file HTML. Cách này đặc biệt phù hợp với các website có nhiều trang nội dung động, blog hoặc trang sản phẩm cần tạo metadata khác nhau cho từng URL.

Với các framework hỗ trợ rendering phía máy chủ (SSR) hoặc static generation, tạo Open Graph metadata theo từng trang đặc biệt hữu ích. Chẳng hạn, website thương mại điện tử có thể lấy tên sản phẩm, mô tả và hình ảnh từ cơ sở dữ liệu để tự động tạo og:title, og:description và og:image tương ứng.

Khi triển khai Open Graph trong framework, cần chú ý:

- Tạo metadata theo từng URL: Không nên sử dụng cùng một tiêu đề, mô tả và hình ảnh cho tất cả các trang.

- Đảm bảo URL và hình ảnh có thể truy cập công khai: Các nền tảng mạng xã hội cần truy cập được những tài nguyên được khai báo.

- Tránh tạo metadata trùng lặp: Kiểm tra để mỗi trang không xuất hiện nhiều phiên bản của cùng một thẻ Open Graph.

- Kiểm tra HTML đầu ra: Sau khi triển khai, xem mã nguồn hoặc HTML được render để xác nhận các thẻ Open Graph đã được tạo chính xác.

- Xử lý trang động: Với các trang sản phẩm, bài viết hoặc danh mục, nên xây dựng logic tự động lấy dữ liệu tương ứng thay vì nhập thủ công. 

Phương pháp này giúp việc quản lý Open Graph có tính hệ thống hơn, đặc biệt khi website có hàng trăm hoặc hàng nghìn URL. Khi nội dung thay đổi, metadata có thể được cập nhật tự động theo dữ liệu của từng trang thay vì phải chỉnh sửa từng file HTML.

Cách 4: Tự động tạo Open Graph cho website có nhiều trang

Với website có hàng trăm hoặc hàng nghìn URL như blog, website thương mại điện tử, trang tin tức hoặc hệ thống đăng sản phẩm, thiết lập Open Graph thủ công cho từng trang sẽ tốn nhiều thời gian và khó duy trì. Trong trường hợp này, có thể xây dựng cơ chế tự động tạo metadata dựa trên dữ liệu của từng trang.

Nguyên tắc cơ bản là hệ thống lấy các thông tin có sẵn trong cơ sở dữ liệu hoặc CMS, sau đó tự động đưa chúng vào các thuộc tính Open Graph tương ứng. Chẳng hạn, tên bài viết có thể được dùng cho og:title, phần mô tả cho og:description, hình ảnh đại diện cho og:image và URL chính cho og:url.

Có thể triển khai theo quy trình:

- Xác định dữ liệu nguồn: Xác định những trường thông tin sẽ sử dụng như tiêu đề, mô tả, hình ảnh, URL, tác giả hoặc thời gian xuất bản.

- Xây dựng template metadata: Tạo một mẫu Open Graph chung cho từng loại trang như bài viết, sản phẩm, danh mục hoặc trang dịch vụ.

- Kết nối với dữ liệu động: Khi trang được tạo hoặc truy cập, hệ thống sẽ tự động truy xuất dữ liệu tương ứng và đưa vào template.

- Thiết lập giá trị mặc định: Nếu một trang chưa có hình ảnh hoặc mô tả riêng, hệ thống có thể sử dụng hình ảnh và nội dung mặc định.

- Kiểm tra dữ liệu đầu ra: Đảm bảo mỗi URL tạo ra đúng tiêu đề, mô tả, hình ảnh và URL, đồng thời không phát sinh thẻ Open Graph bị trùng hoặc thiếu

Ví dụ, với một website bán hàng, hệ thống có thể tự động tạo metadata dựa trên thông tin sản phẩm:

< meta property="og:title" content="{{ product.name }}" > 

< meta property="og:description" content="{{ product.description }}"> 

< meta property="og:image" content="{{ product.image }}">

< meta property="og:url" content="{{ product.url }}"> 

< meta property="og:type" content="product">

Cách triển khai này giúp giảm đáng kể công việc quản trị khi website liên tục phát sinh nội dung mới. Khi sản phẩm hoặc bài viết được thêm vào hệ thống, Open Graph có thể được tạo tự động mà không cần nhân viên chỉnh sửa mã HTML cho từng URL. 

 

 

Cách kiểm tra Open Graph của website

Sau khi cài đặt Open Graph, bạn nên kiểm tra lại để đảm bảo các thẻ meta đã được thêm đúng vị trí, chứa thông tin chính xác và có thể được nền tảng mạng xã hội đọc. Có thể kiểm tra trực tiếp mã nguồn hoặc sử dụng các công cụ hỗ trợ để phát hiện thẻ bị thiếu, sai giá trị hoặc hình ảnh không thể tải.

1. Kiểm tra trực tiếp mã nguồn

Bạn có thể kiểm tra Open Graph trực tiếp trong mã nguồn HTML của trang để xác định các thẻ đã được khai báo đầy đủ và đúng thông tin hay chưa. Cách này phù hợp khi cần kiểm tra nhanh mà không phải sử dụng thêm công cụ bên ngoài.

Bước 1: Mở trang cần kiểm tra

Bạn hãy truy cập URL muốn kiểm tra Open Graph trên trình duyệt. Với website có nhiều loại trang, bạn nên kiểm tra riêng các URL quan trọng như trang chủ, bài viết, sản phẩm hoặc trang dịch vụ.

Bước 2: Mở mã nguồn HTML của trang

Bạn hãy nhấp chuột phải trên trang và chọn View Page Source hoặc Xem nguồn trang. Ngoài ra, bạn có thể nhấn Ctrl + U trên Windows để mở trực tiếp mã nguồn HTML.

Bước 3: Tìm các thẻ Open Graph

Bạn hãy nhấn Ctrl + F để mở chức năng tìm kiếm trong mã nguồn, sau đó nhập og:. Trình duyệt sẽ hiển thị các dòng mã có chứa thuộc tính Open Graph.

Bước 4: Kiểm tra các thuộc tính Open Graph quan trọng

Bạn hãy đối chiếu giá trị của từng thuộc tính với nội dung thực tế trên trang:

- og:title: Bạn cần kiểm tra tiêu đề có tồn tại, rõ ràng và phù hợp với nội dung trang hay không.

- og:description: Bạn cần xác nhận phần mô tả phản ánh đúng nội dung chính và không bị bỏ trống.

- og:image: Bạn cần kiểm tra URL hình ảnh có chính xác, hình ảnh có thể truy cập công khai và hình ảnh có đúng với nội dung trang hay không.

- og:url: Bạn cần đối chiếu URL được khai báo với URL chính của trang để đảm bảo liên kết trỏ đến đúng nội dung.

Bước 5: Kiểm tra thẻ bị trùng lặp

Bạn hãy đảm bảo các thuộc tính Open Graph quan trọng không xuất hiện nhiều lần ngoài ý muốn. Tình trạng này thường xảy ra khi website vừa chèn mã thủ công vừa sử dụng plugin SEO có khả năng tự tạo Open Graph.

Bước 6: Kiểm tra lại sau khi chỉnh sửa

Sau khi cập nhật Open Graph, bạn hãy tải lại mã nguồn để xác nhận thay đổi đã được áp dụng. Nếu website sử dụng plugin cache hoặc CDN, bạn nên xóa bộ nhớ đệm trước khi kiểm tra để tránh xem phiên bản HTML cũ.

 

 

2. Kiểm tra social preview

Kiểm tra social preview giúp bạn xem trước cách một URL sẽ hiển thị khi được chia sẻ trên mạng xã hội. Phương pháp này không chỉ giúp xác nhận các thẻ Open Graph đã được thiết lập mà còn cho phép phát hiện những lỗi về tiêu đề, mô tả, hình ảnh hoặc URL trước khi nội dung được chia sẻ rộng rãi.

Bạn có thể thực hiện theo các bước sau:

Bước 1: Chuẩn bị URL cần kiểm tra

Bạn hãy sao chép URL của trang muốn kiểm tra. Nên ưu tiên những trang quan trọng như bài viết, trang dịch vụ, sản phẩm hoặc landing page.

Bước 2: Sử dụng công cụ kiểm tra social preview

Bạn hãy nhập URL vào công cụ preview hoặc trình gỡ lỗi dành cho nền tảng mạng xã hội tương ứng. Công cụ sẽ đọc dữ liệu Open Graph trên trang và tạo bản xem trước dựa trên những thông tin đã khai báo.

Bước 3: Kiểm tra nội dung preview

Bạn hãy đối chiếu các thành phần được hiển thị với thông tin mong muốn:

- Tiêu đề: Kiểm tra tiêu đề có đúng với og:title và có bị cắt hoặc hiển thị sai nội dung hay không.

- Mô tả: Kiểm tra phần mô tả có đúng với og:description, dễ đọc và phản ánh đúng nội dung trang hay không.

- Hình ảnh: Kiểm tra og:image có hiển thị đúng hình ảnh, đúng tỷ lệ và không bị cắt mất những nội dung quan trọng khi chia sẻ hay không.

- URL: Kiểm tra liên kết có trỏ đến đúng trang và không xuất hiện URL sai hoặc không mong muốn hay không.

- Tên website: Nếu website khai báo og:site_name, bạn hãy kiểm tra tên thương hiệu có hiển thị chính xác hay không.

3. Kiểm tra bằng công cụ

Sử dụng công cụ chuyên dụng giúp kiểm tra Open Graph nhanh hơn và dễ phát hiện các lỗi mà việc xem mã nguồn thủ công có thể bỏ sót. Bạn chỉ cần nhập URL cần kiểm tra, công cụ sẽ phân tích metadata và hiển thị preview của nội dung khi được chia sẻ trên mạng xã hội.

Một số công cụ phổ biến có thể sử dụng gồm:

- Facebook Sharing Debugger: Kiểm tra cách Facebook đọc và hiển thị các thẻ Open Graph, đồng thời hỗ trợ làm mới dữ liệu đã được lưu trong bộ nhớ đệm.

- LinkedIn Post Inspector: Kiểm tra social preview khi URL được chia sẻ trên LinkedIn và xem các thông tin mà nền tảng thu thập từ website.

- OpenGraph.xyz: Phân tích các Open Graph tags và cung cấp bản xem trước trên nhiều nền tảng.

- opengraph.dev: Kiểm tra metadata của URL và hiển thị trực quan cách nội dung có thể xuất hiện khi chia sẻ.

- Meta tags: Cho phép kiểm tra thẻ Open Graph, Twitter Cards và xem trước cách nội dung website hiển thị trên các nền tảng khác nhau.

 

 

Những lỗi thường gặp khiến Open Graph không hiển thị & cách khắc phục

Dù đã khai báo Open Graph trong mã nguồn, nội dung khi chia sẻ lên Facebook, Zalo, LinkedIn hoặc các nền tảng khác vẫn có thể hiển thị thiếu hoặc không chính xác. Nguyên nhân thường liên quan đến cấu hình thẻ meta, URL hình ảnh, dữ liệu cache, cách website render nội dung hoặc khả năng truy cập của bot thu thập dữ liệu. Xác định đúng nguyên nhân sẽ giúp quá trình xử lý nhanh chóng và hạn chế lỗi lặp lại.

1. Chia sẻ link nhưng không hiển thị hình ảnh

Một trong những lỗi phổ biến nhất là URL được chia sẻ nhưng không xuất hiện hình ảnh preview. Nguyên nhân đầu tiên có thể là website chưa khai báo og:image hoặc URL trong thuộc tính này không chính xác. Ngoài ra, hình ảnh có kích thước không phù hợp, dung lượng quá lớn hoặc máy chủ không cho phép bot truy cập cũng có thể khiến nền tảng không tải được ảnh.

Để khắc phục, bạn nên kiểm tra mã nguồn và đảm bảo og:image tồn tại, đồng thời sử dụng URL tuyệt đối (absolute URL) có thể truy cập công khai. Hình ảnh cũng cần có kích thước phù hợp với nền tảng chia sẻ. Sau khi điều chỉnh, bạn có thể sử dụng công cụ kiểm tra social preview để xác nhận bot đã đọc và tải được hình ảnh.

2. Hiển thị sai tiêu đề

Tiêu đề hiển thị khi chia sẻ có thể khác với nội dung mong muốn nếu website không khai báo og:title. Trong trường hợp này, nền tảng có thể tự động lấy dữ liệu từ thẻ < title > hoặc một phần nội dung khác trên trang. Lỗi cũng có thể xuất hiện khi website tạo nhiều thẻ og:title do xung đột giữa plugin SEO, CMS và mã HTML được chèn thủ công.

Bạn nên kiểm tra mã nguồn website để đảm bảo mỗi trang chỉ có một og:title chính và nội dung của thẻ phản ánh đúng trang đang được chia sẻ. Nếu website của bạn sử dụng CMS, bạn hãy kiểm tra cấu hình plugin SEO để xác định hệ thống đang tự động tạo Open Graph như thế nào. Sau khi cập nhật, bạn nên chạy lại URL qua công cụ debugger để nền tảng thu thập dữ liệu mới.

3. Hiển thị mô tả không đúng

Khi og:description bị thiếu hoặc khai báo không chính xác, nền tảng mạng xã hội có thể tự động lấy một đoạn văn bản khác trên trang để làm mô tả. Kết quả có thể là phần preview xuất hiện menu, nội dung phụ hoặc đoạn văn không phản ánh đúng chủ đề chính.

Để xử lý, bạn nên khai báo og:description riêng cho từng URL và đặt thông tin quan trọng ngay ở phần đầu mô tả. Nội dung nên ngắn gọn, dễ hiểu và phù hợp với mục đích chia sẻ. Với website sử dụng nội dung động, cần đảm bảo metadata được render vào HTML mà bot có thể truy cập, thay vì chỉ tạo bằng JavaScript sau khi trang được tải trên trình duyệt.

4. Hình ảnh Open Graph bị mờ hoặc bị cắt

Hình ảnh trong social preview có thể bị mờ nếu file gốc có độ phân giải thấp hoặc bị nén quá mức. Tình trạng ảnh bị cắt thường xảy ra khi tỷ lệ khung hình không phù hợp với bố cục mà nền tảng sử dụng. Những thành phần quan trọng như logo, tiêu đề hoặc thông tin sản phẩm vì thế có thể bị che khuất.

Để hạn chế lỗi này, bạn cần chuẩn bị hình ảnh Open Graph theo tỷ lệ 1.91:1, chẳng hạn 1200 × 630 px. Nội dung quan trọng nên được bố trí ở khu vực trung tâm và cách các mép ảnh một khoảng an toàn. Khi tối ưu dung lượng, bạn nên cân bằng giữa chất lượng hình ảnh và kích thước file thay vì nén quá mức.

5. Thay ảnh nhưng mạng xã hội vẫn hiển thị ảnh cũ

Sau khi thay đổi hình ảnh Open Graph, mạng xã hội đôi khi vẫn hiển thị ảnh cũ do dữ liệu của URL đã được lưu trong bộ nhớ đệm. Vì nền tảng không nhất thiết thu thập lại toàn bộ metadata mỗi khi URL được chia sẻ, những thay đổi mới có thể chưa xuất hiện ngay lập tức.

Bạn nên sử dụng công cụ debugger hoặc inspector của nền tảng tương ứng để yêu cầu hệ thống thu thập lại URL. Nếu đã thay đổi file ảnh nhưng vẫn sử dụng cùng một URL tài nguyên, bạn cũng có thể thay đổi phiên bản URL của ảnh, chẳng hạn thêm tham số truy vấn như ?v=2, để hỗ trợ hệ thống nhận diện tài nguyên mới.

6. Website có nhiều trang nhưng tất cả đều dùng cùng Open Graph

Nếu mọi bài viết, sản phẩm hoặc trang dịch vụ đều hiển thị cùng một tiêu đề, mô tả và hình ảnh, nguyên nhân thường nằm ở việc Open Graph được hardcode trong template chung. Khi đó, hệ thống không lấy dữ liệu riêng của từng URL mà sử dụng một bộ metadata cố định cho toàn website.

Cách khắc phục là xây dựng cơ chế tạo Open Graph động dựa trên dữ liệu của từng trang. Ví dụ, hệ thống có thể lấy tiêu đề, mô tả, hình ảnh đại diện và URL từ cơ sở dữ liệu để tạo metadata tương ứng. Với website sử dụng CMS, bạn có thể cấu hình plugin hoặc tính năng SEO hỗ trợ tạo Open Graph riêng cho từng bài viết, sản phẩm và loại nội dung.

7. Lỗi chặn bot từ robots.txt / Firewall

Bot của các nền tảng mạng xã hội cần truy cập website để đọc Open Graph metadata. Nếu robots.txt, firewall, CDN hoặc plugin bảo mật vô tình chặn các bot này, nền tảng có thể không lấy được tiêu đề, mô tả hoặc hình ảnh của URL.

Bạn nên kiểm tra cấu hình robots.txt và hệ thống bảo mật để xác định liệu yêu cầu từ các bot hợp lệ có đang bị chặn hay không. Với firewall hoặc hệ thống chống bot, cần rà soát log truy cập và rule bảo mật trước khi đưa user-agent vào whitelist. Sau khi điều chỉnh, hãy sử dụng công cụ debugger để xác nhận nền tảng có thể truy cập và đọc dữ liệu Open Graph bình thường.

8. Lỗi thiếu giao thức HTTPS

Các tài nguyên Open Graph sử dụng HTTP trong khi website đã chuyển sang HTTPS có thể gây ra vấn đề khi nền tảng cố gắng tải dữ liệu. Tình trạng này thường xuất hiện ở og:image, og:url hoặc các tài nguyên liên quan vẫn sử dụng URL HTTP sau quá trình chuyển đổi website sang HTTPS.

Để khắc phục, bạn nên đảm bảo website đã sử dụng chứng chỉ SSL hợp lệ và các URL trong Open Graph đều thống nhất với giao thức HTTPS. Đặc biệt, hãy kiểm tra og:image để đảm bảo hình ảnh có thể được truy cập qua HTTPS mà không gặp lỗi chứng chỉ hoặc chuyển hướng bất thường. Sau khi hoàn tất, bạn nên kiểm tra lại URL bằng công cụ social preview để xác nhận dữ liệu đã được thu thập chính xác.

 

 

Một số câu hỏi thường gặp về Open Graph tags

Open Graph là nhóm thẻ meta khá đơn giản về cách triển khai nhưng vẫn có nhiều điểm dễ gây nhầm lẫn, đặc biệt khi phân biệt với các thẻ HTML và yếu tố SEO khác. Dưới đây là những câu hỏi thường gặp giúp bạn hiểu rõ hơn về cách sử dụng và tối ưu Open Graph cho website.

1. Thẻ og:title và < title > có giống nhau không?

Không. Hai thẻ đều liên quan đến tiêu đề của trang nhưng phục vụ những mục đích khác nhau. Thẻ title là tiêu đề HTML của trang, thường được sử dụng làm tiêu đề trên tab trình duyệt và có vai trò quan trọng đối với SEO. Trong khi đó, og:title xác định tiêu đề mà nền tảng mạng xã hội có thể sử dụng khi URL được chia sẻ.

Bạn có thể thiết lập hai giá trị giống nhau để đảm bảo tính nhất quán hoặc viết og:title khác với < title > nếu muốn tối ưu cách trình bày nội dung trên mạng xã hội. Tuy nhiên, cả hai vẫn nên phản ánh chính xác nội dung của trang và tránh sử dụng tiêu đề gây hiểu nhầm.

2. og:image nên có kích thước bao nhiêu là tối ưu nhất?

Đối với hình ảnh Open Graph, kích thước 1200 × 630 pixel thường là lựa chọn phù hợp cho nhiều trường hợp vì tương ứng với tỷ lệ khung hình khoảng 1.91:1. Kích thước này cung cấp đủ độ phân giải để hình ảnh hiển thị rõ ràng trên nhiều giao diện social preview.

3. Thẻ Open Graph có bắt buộc đối với mọi website không?

Không bắt buộc. Website vẫn có thể hoạt động bình thường và được lập chỉ mục bởi công cụ tìm kiếm nếu không khai báo Open Graph. Tuy nhiên, nếu website thường xuyên được chia sẻ trên Facebook, LinkedIn, Zalo hoặc các nền tảng hỗ trợ social preview, triển khai Open Graph rất hữu ích để kiểm soát cách nội dung xuất hiện khi được chia sẻ.

4. Nếu website không khai báo thẻ og:image thì mạng xã hội sẽ hiển thị ảnh nào?

Khi website không có og:image, nền tảng mạng xã hội có thể tự tìm một hình ảnh phù hợp trong HTML hoặc nội dung của trang để sử dụng cho preview. Tuy nhiên, cách lựa chọn hình ảnh phụ thuộc vào từng nền tảng và không đảm bảo hệ thống sẽ chọn đúng hình ảnh mà website mong muốn.

Trong trường hợp trang có nhiều hình ảnh, nền tảng có thể chọn ảnh đại diện, hình ảnh xuất hiện trong nội dung hoặc một tài nguyên khác mà bot có thể truy cập. Nếu không tìm thấy hình ảnh phù hợp, preview có thể không hiển thị ảnh.

 

 

Qua bài viết của Phương Nam Vina, có thể thấy Open Graph tags là một phần quan trọng giúp website kiểm soát cách nội dung hiển thị khi được chia sẻ trên mạng xã hội. Các thẻ như og:title, og:description, og:image, og:url và og:type cho phép xác định rõ tiêu đề, mô tả, hình ảnh và loại nội dung của từng URL, từ đó tạo social preview trực quan và nhất quán hơn. Triển khai Open Graph không quá phức tạp nhưng cần đảm bảo metadata được khai báo đúng cú pháp, hình ảnh có kích thước phù hợp, URL có thể truy cập và mỗi trang sử dụng thông tin tương ứng với nội dung thực tế. Sau khi cài đặt, bạn cũng nên kiểm tra mã nguồn và sử dụng các công cụ social preview để phát hiện lỗi, đặc biệt trong trường hợp website có nhiều trang hoặc nội dung được tạo tự động.