社交媒体分享未通过 react-helmet 或 react-meta-tags 在 react-app 中获取元标签

Question

我有一个使用 React.js 构建的应用程序，我想自定义使用 HTML 元标记在社交媒体上共享的 URL 的外观。

我尝试使用用于添加元标记的 react-helmet 和 react-meta-tags，但它们没有帮助。

这个问题的唯一解决方案是使用服务器端渲染还是有办法只从前端处理它？

Answer 1

第一次安装： npm install react-helmet --save

然后添加元标记： 喜欢！

import React from 'react'
import { Helmet } from "react-helmet";
class App extends React.Component {
  render () {
    return (
        <div>
            <Helmet>
                <title>App Title</title>
                <link rel="canonical" href="https://malikgabroun.com" />
            </Helmet>
        </div>
    );
  }
};

示例：

import { Helmet } from 'react-helmet';
import React from 'react';
const Seo = ({ title, description, pathSlug, keywords }) => {
  const url = `https://malikgabroun.com/${pathSlug}`
    return (
<Helmet htmlAttributes={{ lang: 'en' }} title={title} meta={[
        {
          name: 'description',
          content: description,
        },
        {
          name: 'keywords',
          content: keywords.join(),
        },
        ]}
    links={[
     {
          rel: 'canonical',
          href: url,
      },
    ]}
    />
 );
}
export default Seo;

有关更多详细信息，请访问此链接并阅读。 https://levelup.gitconnected.com/how-to-add-metadata-in-react-using-react-helmet-6dd316d146c2