社交媒體分享未通過 react-helmet 或 react-meta-tags 在 react-app 中獲取元標簽

Question

我有一個使用 React.js 構建的應用程序，我想自定義 URL 的外觀，它使用 HTML 元標記在社交媒體上共享。

我嘗試使用用於添加元標記的 react-helmet 和 react-meta-tags，但它們沒有幫助。

這個問題的唯一解決方案是使用服務器端渲染還是有辦法只從前端處理它？

Answer 1

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

然后添加元標記：like！

 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;

有關此鏈接的更多詳細信息 go 並閱讀。 https://levelup.gitconnected.com/how-to-add-metadata-in-react-using-react-helmet-6dd316d146c2