Question

我正在使用reactjs，我想在facebook上分享我的内容，它正在发生但是在分享之后它没有显示图像，标题，内容的描述。所以我使用react-helmet在index.html中动态添加元标记。

<Helmet>
<meta property="og:type" content="video.other" />
<meta property="og:image"       content="https://www.w3schools.com/css/trolltunga.jpg" />
<meta property="og:title" content="My Title" />
<meta property="og:url" content="https://www.afnity.com/video/155" />
<meta property="og:description" content="some discription of the shared    content" />

</Helmet>

这是分享按钮

   <button> <a title="dummy" 
href="http://www.facebook.com/sharer.php? u=https://dummy.com/videos/id=25"     target="_blank">
share</a>
</button>

但它不起作用。

Answer 1

使用以下代码替换头盔组件。

<Helmet
  meta={[
    {"property": "og:type", "content": "video.other"}
    {"property": "og:image", "content": "https://www.w3schools.com/css/trolltunga.jpg"}
    {"property": "og:title", "content": "My Title"}
    {"property": "og:url", "content": "https://www.afnity.com/video/155"}
    {"property": "og:description", "content": "some discription of the shared    content"}
  ]}
/>

这将根据您的要求添加元标记。

Answer 2

在您的反应应用程序中启用服务器端渲染时，可以使用react-document-meta npm模块实现这一点

const meta = {
      title: 'Samvikshana - New Perspective of Exploration',
      meta: {
        property: {
          'og:title': 'Samvikshana',
          'og:url': 'https://samvikshana.weebly.com/',
          'og:image': imageUri,
          'og:description': 'New Perspective of Exploration',

          'twitter:card': 'summary_large_image',
          'twitter:title': 'Samvikshana',
          'twitter:description': 'New Perspective of Exploration',
          'twitter:image': imageUri
        }
      }
    };

    return (
      <div className='container-fluid'>
        <DocumentMeta {...meta} />
         </div>);
    }

请阅读此博客以获取更多信息 - https://samvikshana.weebly.com/blog/dynamic-meta-tags-in-react-components

Answer 3

标记需要在服务器端呈现。

这里的其他答案似乎集中在纯JS解决方案上。

对于使用.Net MVC应用程序的用户，我的解决方案如下所述：

网站的主要入口点是通过默认Home Controller的Index()方法进行的，就像这样：

//Home Controller

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

无论您输入什么URL，它总是始终放在这里。

关键是使用HttpRequest参数中的URL，方法是将其馈送到View中，如下所示：

// Home Controller

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View(Request);
    }
}

首先，如果您的网站使用共享的布局页面，请不要忘记在<head>标签内创建一个RenderSection，就像这样：

//Layout.cshtml

<head>
    @RenderSection("meta", required: false) 
</head>

现在在Index.cshtml中，将HttpRequest设置为视图模型，从请求路径中拔出URL，并根据需要将其放入<meta>标记中（并将其放在{ {1}} RenderSection（如果您创建了一个）。

完整路径值的格式为meta。

"/pathName/"

也可以做很多其他的事情。例如，我的网站具有基于数据库//Index.cshtml @model Microsoft.AspNetCore.Http.HttpRequest @section meta { @if (Model.Path.Value.Contains("pathName")) { <meta property="og:url" content="https://mywebsite.com/@Model.Path.Value.Substring(1)" /> } }的ID的请求路径，因此我的工作看起来像这样：

/pathName/45

有了这个，我可以为我的React网站的任何页面渲染非常详细和特定的meta标签。到目前为止效果很好！

Answer 4

默认情况下，将使用以下标题生成应用程序

<title>React App</title>

更改非常简单，只需将生命周期挂钩插入到您的应用文件中

componentDidMount() {
document.title = 'Custom Title';  }

如何在反应中动态包含元标记？

4 个答案: