如何设置动态og元标签？

Question

我一直在尝试使用react-helmet-async 为博客文章创建自定义URL 缩略图，以便在社交媒体上发布。

我已经在index.js中设置了提供者

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-tooltip/dist/react-tooltip.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { HelmetProvider } from 'react-helmet-async';
import store from './redux/store';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <Provider store={store}>
    <HelmetProvider>
      <App />
    </HelmetProvider>
  </Provider>
);

我创建了一个接收数据的 Seo 组件：

import React from 'react';
import { Helmet } from 'react-helmet-async';

export default function SEO({ title, description, imageUrl }) {
  return (
    <Helmet>
      <title>{title}</title>
      <meta property='og:type' content='artical' />
      <meta property='og:title' content={title} />
      <meta property='og:description' content={description} />
      <meta property='og:image' content={imageUrl} />
    </Helmet>
  );
}

在此处渲染组件

import React from "react";
import { useDispatch } from "react-redux";
import { Container } from "react-bootstrap";
import { setVisitedRoot } from "../../redux/visitedSlice";
import { useParams } from "react-router-dom";
import useScrollAndDispatch from '../Tools/useScrollAndDispatch';
import posts from "./posts"; 
import  Seo  from '../Tools/Seo.jsx'
import { toKebabCase } from "../Tools/toKebabCase";


const BlogPost = () => {
  const dispatch = useDispatch();
  useScrollAndDispatch(dispatch, setVisitedRoot(true));

  const { id } = useParams();
  const kebabCaseId = toKebabCase(id);
  let post = posts.find((post) => toKebabCase(post.id) === kebabCaseId);

  if (!post) {
    return <div>Post not found!</div>;
  }

  const renderHTMLContent = () => {
    return { __html: post.content };
  };

  return (
    <Container style={{ maxWidth: "500px" }}>
      <Seo
      title={post.title}
      description={post.description}
      name={post.name}
      type={post.type}
      imageUrl={post.imageUrl}
    
      />
      <img src={post.image} alt={post.title} style={{ width: "70px", height: "70px" }} />
      <h1 style={{ paddingTop: "20px", paddingBottom: "20px"}}>{post.title}</h1>
      <div
        dangerouslySetInnerHTML={renderHTMLContent()}
      />
    </Container>
  );
};

export default BlogPost;

Title 实际上似乎工作得很好，我在 chrome 开发工具的 elements 部分找到了所有正确的信息，以及我在 index.html 文件中编写的元数据。但是，当在 Facebook 的sharing debugger 上检查我的链接时，它会显示我的 index.html 文件中的元数据。我尝试从index.html 中删除元标记，但随后它在调试器上根本不显示任何信息。 有什么建议吗？

Answer 1

你可以这样做：

import React, { useEffect } from 'react';
import { Helmet } from 'react-helmet-async';

const SEO = ({ title, description, imageUrl }) => {
  useEffect(() => {
    // Use Helmet here if you need to dynamically update meta tags after the initial load
  }, [title, description, imageUrl]);

  return (
    <Helmet>
      <title>{title}</title>
      <meta property='og:type' content='article' />
      <meta property='og:title' content={title} />
      <meta property='og:description' content={description} />
      <meta property='og:image' content={imageUrl} />
    </Helmet>
  );
};

export default SEO;