Vấn đề gặp phải là Facebook chỉ lấy thông tin SEO của trang chủ và không đọc được các thẻ Open Graph (OG) trong các trang con (ví dụ: các URL động trong ứng dụng React.js). Đây là vấn đề phổ biến khi sử dụng các ứng dụng React.js (SPA) mà không có Server-Side Rendering (SSR) hoặc Static Site Generation (SSG).
Khi bạn chia sẻ một URL trên Facebook, nó sẽ đọc dữ liệu từ các thẻ meta trong phần <head> của HTML trang đó. Tuy nhiên, trong ứng dụng React.js, dữ liệu này thường chỉ được hiển thị trên client (trình duyệt), điều này dẫn đến việc Facebook không thể đọc được dữ liệu vì nó chỉ “xem” HTML tĩnh của trang chủ mà không thể “xử lý” các thay đổi động sau khi JavaScript chạy trên trình duyệt.
Để giải quyết vấn đề này, bạn cần thực hiện một số biện pháp để Facebook có thể đọc và thu thập đúng dữ liệu từ các trang con trong ứng dụng React.js của bạn.
Các phương án giải quyết vấn đề này:
1. Sử dụng Server-Side Rendering (SSR)
Server-Side Rendering (SSR) là một kỹ thuật giúp bạn có thể render nội dung trên server và gửi một trang HTML đầy đủ (bao gồm các thẻ <meta>, <title>, và thẻ Open Graph) đến client. Điều này đảm bảo rằng khi Facebook (hoặc bất kỳ công cụ tìm kiếm nào) “scrape” trang, nó sẽ thấy đầy đủ các thẻ metadata (OG tags).
Ví dụ, nếu bạn sử dụng Next.js (framework React hỗ trợ SSR), bạn có thể cấu hình các thẻ OG cho từng trang con và Next.js sẽ render các thẻ meta này trên server trước khi gửi trang HTML đến trình duyệt.
Ví dụ trong Next.js:
import Head from 'next/head';
function Page({ title, description, image }) {
return (
<>
<Head>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
<meta property="og:url" content={window.location.href} />
<title>{title}</title>
</Head>
<div>
{/* Nội dung trang */}
</div>
</>
);
}
export default Page;
2. Static Site Generation (SSG)
Static Site Generation (SSG) là một phương pháp khác mà bạn có thể sử dụng để tạo ra các trang tĩnh khi build ứng dụng, giống như SSR, nhưng không cần yêu cầu server xử lý từng yêu cầu mỗi lần người dùng truy cập trang. Các thẻ OG sẽ được tạo ra ngay từ lúc build và Facebook sẽ thấy đầy đủ thông tin khi bạn chia sẻ URL.
Nếu bạn sử dụng Next.js, bạn có thể dễ dàng triển khai SSG với getStaticProps:
export async function getStaticProps(context) {
return {
props: {
title: "Tiêu đề trang con",
description: "Mô tả trang con",
image: "URL của hình ảnh đại diện"
}
};
}
function Page({ title, description, image }) {
return (
<>
<Head>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
<meta property="og:url" content="URL của trang con" />
</Head>
<div>
{/* Nội dung trang */}
</div>
</>
);
}
3. React Helmet
Nếu bạn không muốn sử dụng SSR hoặc SSG, bạn có thể thử một cách khác là sử dụng thư viện React Helmet để thay đổi các thẻ metadata trong phần <head> của trang khi ứng dụng React.js chạy trên client. Tuy nhiên, như đã đề cập, phương pháp này chỉ có hiệu quả khi trang đã được render trên trình duyệt và không giúp ích cho việc chia sẻ trên Facebook (vì Facebook không thể đọc được dữ liệu từ JavaScript khi scrape trang).
Lưu ý: Điều này sẽ không giải quyết được vấn đề của bạn về việc Facebook không đọc được thẻ OG của trang con.
import { Helmet } from 'react-helmet';
function Page() {
return (
<>
<Helmet>
<meta property="og:title" content="Tiêu đề trang con" />
<meta property="og:description" content="Mô tả trang con" />
<meta property="og:image" content="URL của hình ảnh đại diện" />
<meta property="og:url" content="URL của trang con" />
</Helmet>
<div>
{/* Nội dung trang */}
</div>
</>
);
}
4. Sử dụng Facebook’s Sharing Debugger
Khi bạn đã cập nhật các thẻ OG trên trang của mình, bạn có thể kiểm tra xem Facebook có thể lấy dữ liệu chính xác từ trang của bạn hay không bằng cách sử dụng công cụ Facebook Sharing Debugger. Công cụ này sẽ “scrape” lại trang của bạn và hiển thị các thẻ meta mà Facebook thu thập được.
- Truy cập vào Facebook Sharing Debugger.
- Dán URL của trang vào và nhấn Debug.
- Nếu Facebook không thu thập được dữ liệu đúng, bạn có thể yêu cầu Facebook Scrape Again.
5. Thêm thẻ OG vào URL của trang con khi render từ Server
Nếu bạn không sử dụng SSR hay SSG, bạn có thể sử dụng Express.js hoặc một server backend khác để trả về các thẻ OG cho các trang con khi người dùng truy cập vào các URL cụ thể. Khi bạn truy cập vào trang con, server sẽ trả về HTML đầy đủ với các thẻ OG thích hợp, giúp Facebook có thể lấy thông tin đúng.
app.get('/page/:id', (req, res) => {
const pageData = getPageDataById(req.params.id); // Truy vấn dữ liệu trang từ database hoặc API
res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta property="og:title" content="${pageData.title}" />
<meta property="og:description" content="${pageData.description}" />
<meta property="og:image" content="${pageData.image}" />
<meta property="og:url" content="${req.originalUrl}" />
<title>${pageData.title}</title>
</head>
<body>
<div id="root">${pageData.content}</div>
</body>
</html>
`);
});
Tổng kết
Nếu bạn muốn Facebook đọc đúng dữ liệu từ trang con trong ứng dụng React.js, phương án tốt nhất là sử dụng Server-Side Rendering (SSR) hoặc Static Site Generation (SSG) với một framework như Next.js. Cả hai phương pháp này sẽ giúp bạn cung cấp các thẻ Open Graph chính xác cho mỗi trang mà Facebook có thể lấy khi chia sẻ URL. Nếu không muốn sử dụng SSR hoặc SSG, bạn có thể thử các giải pháp khác như cấu hình server để trả về metadata chính xác cho mỗi URL hoặc sử dụng React Helmet, nhưng cần lưu ý rằng phương pháp này không hỗ trợ Facebook scrape dữ liệu đúng khi chia sẻ URL.
