ReactJS: Cách thêm thẻ meta động vào ứng dụng React với react-snapshot kết hợp với react-helmet

Thêm thẻ meta rất dễ dàng phải không? Vâng, nhưng không phải đối với các ứng dụng React. Làm cho trang web của bạn thân thiện với SEO là một trong những điều chính mà mọi người quan tâm. Một trong những thách thức khi triển khai một ứng dụng được xây dựng với create-react-app là nó được hiển thị hoàn toàn ở phía máy khách. Mặc dù Google có thể hiển thị nội dung JavaScript khi thu thập dữ liệu một trang web, nhưng điều này không phải lúc nào cũng xảy ra và luôn có nguy cơ gói JavaScript của bạn sẽ bị lỗi. Vậy làm thế nào để vượt qua điều này? Bạn sẽ biết câu trả lời phía dưới đây.

Như mọi khi, hãy để tôi bắt đầu với lý do tại sao phải làm điều này. Nhiệm vụ của tôi là xây dựng một trang web React để giới thiệu một số AI tuyệt vời này tại nơi làm việc. Vì vậy, để làm cho ứng dụng React này thân thiện với SEO, tôi cần thêm thẻ meta cho mỗi trang.

Tôi bắt đầu nghiên cứu và tìm thấy hai thư viện react-snapshot và react-helmet sẽ giúp tôi đạt được điều này.

1. react-snapshot

Điều này cung cấp trình kết xuất trước tĩnh cho các ứng dụng React. React Snapshot sẽ chụp nhanh trang web tĩnh của tất cả các trang có thể truy cập công khai của bạn và để lại bất kỳ thứ gì yêu cầu xác thực như bình thường. Những ảnh chụp nhanh này vẫn có gói JS bình thường đi kèm, vì vậy khi tải trang web xuống, trang web sẽ hoạt động chính xác như trước (tức là chuyển trang tức thời), nhưng phục vụ bạn theo thời gian thực với việc hiển thị HTML & CSS nhanh nhất có thể. Tất cả những gì bạn phải làm là thêm điều này vào index.js của bạn và cập nhật tệp package.json của bạn với build": "react-scripts build && react-snapshot".

import { render } from 'react-snapshot';
render(
    <App/>, document.getElementById('root')
);

Nếu bạn chạy npm run build bạn sẽ thấy nó sẽ phát hiện các route của bạn và tạo một trang HTML tĩnh cho mỗi route bên trong thư mục build của bạn.

2. react-helmet

Component React có thể tái sử dụng này sẽ quản lý tất cả các thay đổi của bạn đối với phần đầu tài liệu. Helmet lấy các thẻ HTML thuần túy và xuất các thẻ HTML thuần túy. Với react-helmet, chúng ta có thể nhúng thẻ <meta>, <title>, <link>, <script> vào các component.

Sử dụng React Helmet rất dễ dàng. Đây là một đoạn mã mẫu,

import React from 'react';
import { Helmet } from 'react-helmet';
class Application extends React.Component {
  render () {
    return (
      <div className="application">
        <Helmet>
          <meta charSet="utf-8"/>
          <title>My Title</title>
          <link rel="canonical" href="https://v1study.com"/>
      </Helmet>
      ...
    </div>
    );
  }
};

Sau khi bạn sử dụng hai thư viện này, nó sẽ thực hiện những việc còn lại cho bạn. Nếu bạn sử dụng công cụ gỡ lỗi chia sẻ Facebook, bạn có thể dễ dàng kiểm tra xem các thẻ meta của bạn đang hoạt động như thế nào.

Tôi hy vọng điều này cung cấp cho bạn một ý tưởng nhỏ về cách đạt được điều này. Cảm ơn vì đã đọc!