社交媒体共享预览链接不起作用

Question

我试图为whatsapp（fb，lkdin，..）创建一个共享预览链接，并且我创建了一个接收arguments的function，然后根据我所在的页面接收helmet ，它会给我更新的元数据。 这是我的 function 配置：

    // React
    import React from 'react';
    import PropTypes from 'prop-types';

    // Helmet
    import { Helmet } from 'react-helmet';

    const HeaderMetaData = ({pageProps}) => {

        const title = pageProps.title ? pageProps.title : '';
        const description = pageProps.description ? pageProps.description : '';
        const image = require('../assets/images/image.png');
        
        return(
            <Helmet>
                <meta name="og:title" content={title} />
                <meta name="og:decription" content={description} />
                <meta name="og:image" content={image} />
            
            </Helmet>
        )
    }

    HeaderMetaData.propTypes = {
        title: PropTypes.string.isRequired,
        description: PropTypes.string.isRequired
    }

    export default HeaderMetaData;

从另一个页面调用这个 function 并将以下 arguments 传递给它

<HeaderMetaData pageProps={course} />

然后在我的public/index.html ：

<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="./favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
      <meta property="title" content="page name" data-react-helmet="true" />
      <meta property="description" content="welcomeee" data-react-helmet="true" />

我觉得我遗漏了一些东西，或者元数据可能必须与HeaderMetaData function相同。 当我在控制台检查器中检查元数据时，它会发生变化，但是当我将 go 转到页面时，它不显示预览链接，预览链接仅适用于主页，而不是调用 function 的地方

Answer 1

我有同样的问题，这是我发现的：

如果该站点不是 static，那么您可能会期待这个。 当您使用客户端路由 (SPA) 时，这些类型的微数据测试需要适当的服务器响应……您的服务器可能会以 404 响应相关路径。

我猜想使用服务器来渲染内容会帮助我们解决这个问题。

有关更多信息，请阅读此线程： https://github.com/nfl/react-helmet/issues/624#issuecomment-765750657

社交媒体共享预览链接不起作用

问题描述

1 个解决方案

解决方案1
0 2021-11-12 23:49:44

社交媒体共享预览链接不起作用

问题描述

1 个解决方案

解决方案1 0 2021-11-12 23:49:44

解决方案1
0 2021-11-12 23:49:44