我一直在尝试使用react-helmet-browser c来为博客文章创建自定义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;

型
标题实际上似乎工作得很好，我在Chrome开发工具的元素部分找到了所有正确的信息，沿着了我在index.html文件中编写的元数据。然而，当在Facebook的sharing debugger上检查我的链接时，它显示了我的index.html文件中的元数据。我试着从index.html中删除元标记，但是它在调试器上没有显示任何信息。有什么建议吗？