open graph_不要忘了Open Graph

最新推荐文章于 2024-06-09 09:44:22 发布

cullen2012

最新推荐文章于 2024-06-09 09:44:22 发布

阅读量694

点赞数

文章标签： java python html js vue ViewUI

原文链接：https://habr.com/en/post/471604/

版权

open graph

Open Graph protocol is a web standard originally developed by Facebook that turns any webpage into a graph object with title, description, image and so on. Even though there is no direct correlation between OG meta tags and improved SEO rankings, it still drives more traffic to your webpage by making it more “attractive” in social networks (Facebook, Twitter, Linkedin, etc). 开放图谱协议是Facebook最初开发的一种网络标准，它将任何网页转换为带有标题，描述，图像等的图对象。即使OG元标记和改善的SEO排名之间没有直接关系，但通过使其在社交网络(Facebook，Twitter，Linkedin等)中更具“吸引力”，它仍然可以为您的网页吸引更多流量。

An example of a link shared in Twitter that has «og:image» and «og:title».

在Twitter中共享的链接的示例，该链接具有«og：image»和«og：title»。

在您的React应用程序中添加OG(不仅是)元标记 (Adding OG (and not only) meta tags into your React app)

Without further due let’s jump into newly created React app with create-react-app and OG meta tags to /public/index.html. It should look like something like this:

不用/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>

动态标签 (Dynamic tags)

Now, what if I need to generate tags dynamically for every page? That’s easy!

现在，如果我需要为每个页面动态生成标签怎么办？这很简单！

We’ll use React Helmet. So let’s create a separate component for document head management, which will dynamically set title, description, image for the page.

我们将使用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;

Wherever we want to set our meta tags, we’ll just mount SEO component to necessary arguments just like

无论我们在哪里设置我们的元标记，我们都将SEO组件安装到必要的参数，就像

<SEO pageProps={
  title: "Yet another page",
  thumbnail="https://picsum.photos/id/52/1200/600",
  url="yetanotherawesomeapp.com" } />

翻译自: https://habr.com/en/post/471604/

open graph

cullen2012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫