开放图谱协议是Facebook最初开发的一种网络标准，它将任何网页转换为带有标题，描述，图像等的图对象。 即使OG元标记和改善的SEO排名之间没有直接的关联，但通过使其在社交网络（Facebook，Twitter，Linkedin等）中更具“吸引力”，它仍然可以为您的网页吸引更多流量。
在Twitter中共享的链接的示例，该链接具有“ og：image”和“ og：title”。
在您的React应用程序中添加OG（不仅是）元标记
不用
/public/index.html让我们进入到
/public/index.html带有
create-react-app和OG元标记的新创建的React应用程序。 它看起来应该像这样：
<!DOCTYPE html> <html> <head> <meta charSet="utf-8"/> <meta http-equiv="x-ua-compatible" content="ie=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> <link rel="alternate" type="application/rss+xml" href="/rss.xml"/> <title>Awesome App</title> <meta property="og:title" content="Awesome app - the best app ever" /> <meta property="og:type" content="website" /> <meta property="og:image" content="https://picsum.photos/id/52/1200/600" /> <meta property="og:description" content="Describe stuff here." /> <meta property="og:url" content="yourawesomeapp.com" /> </head> <body> <noscript>This app works best with JavaScript enabled.</noscript> <div id="root"></div> </body> </html>
动态标签
现在，如果我需要为每个页面动态生成标签怎么办？ 很简单！
我们将使用
React Helmet 。 因此，让我们为文档头管理创建一个单独的组件，该组件将动态设置页面的标题，描述和图像。
import React from 'react'; import Helmet from 'react-helmet'; function SEO({ pageProps }) { return ( <Helmet> <title>{pageProps.title}</title> <meta property="og:title" content={pageProps.title} /> <meta property="og:image" content={pageProps.thumbnail} /> <meta property="og:url" content={pageProps.url} /> </Helmet> ) } export default SEO;
无论我们想在哪里设置我们的元标记，我们都将SEO组件安装到必要的参数，就像
<SEO pageProps={ title: "Yet another page", thumbnail="https://picsum.photos/id/52/1200/600", url="yetanotherawesomeapp.com" } />