如何使用头盔在React.js中完全设置页面标题和描述

Question

我正在尝试通过Helmet

设置页面的标题和描述

这是我的代码：

import React, { Component, useRef } from "react";
import { Helmet } from 'react-helmet';

const PageSample = (props) => {
    return (
        <Helmet>
            <meta charSet="utf-8" />
            <title>
                Some Title
            </title>
            <meta name="description" content="Some Description" />
        </Helmet>
    );
};

export default PageSample;

在这里，它显示在页面上。但是我认识到，当我尝试共享链接（whatsapp或其他内容）时，它没有提供此标题和head标签的描述。

如何设置这些值？

Answer 1

尝试以下其他标签：

  const title = 'Title';
  const description = 'Description';

  return (
    <Helmet htmlAttributes={{ lang: 'en' }}>
      {/* General tags */}
      <title>{title}</title>
      <meta name="description" content={description} />

      {/* OpenGraph tags */}
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:type" content="website" />

      {/* Twitter Card tags */}
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:creator" content="@rbika" />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description} />
    </Helmet>
  );

您可以在此处找到有关这些标签的更多信息：Open Graph Protocol，Twitter Card Tags。