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

Question

I was trying to create a share preview link for whatsapp(fb, lkdin,..) and i have created a function that receives arguments and then helmet depending on the page where i am it would give to me the meta data updated.我试图为whatsapp（fb，lkdin，..）创建一个共享预览链接，并且我创建了一个接收arguments的function，然后根据我所在的页面接收helmet ，它会给我更新的元数据。 Here is my function configuration:这是我的 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;

And this function is called from another page and the following arguments are passed to it从另一个页面调用这个 function 并将以下 arguments 传递给它

<HeaderMetaData pageProps={course} />

Then in my public/index.html :然后在我的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" />

I feel that i missing something or maybe the metadata has to be the same like the HeaderMetaData function .我觉得我遗漏了一些东西，或者元数据可能必须与HeaderMetaData function相同。 When i check the metadata in console inspector it changes but it does not showing the preview link when i go to the page, the preview link works only with home, not where the function is called当我在控制台检查器中检查元数据时，它会发生变化，但是当我将 go 转到页面时，它不显示预览链接，预览链接仅适用于主页，而不是调用 function 的地方

Answer 1

I have the same problem, this is what I found:我有同样的问题，这是我发现的：

If the site is not static then you may expect this.如果该站点不是 static，那么您可能会期待这个。 As you are using client side routing (SPA) those kind of microdata tests require a proper server response... your server is probably responding as a 404 for the path in question.当您使用客户端路由 (SPA) 时，这些类型的微数据测试需要适当的服务器响应……您的服务器可能会以 404 响应相关路径。

I guess that using a server to render the contents would help us to get around this issue.我猜想使用服务器来渲染内容会帮助我们解决这个问题。

For more information, read this thread: https://github.com/nfl/react-helmet/issues/624#issuecomment-765750657有关更多信息，请阅读此线程： 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