如何使用Gatsby的SEO组件和GatsbyReactHelmet提升SEO

来自菜鸟教程
跳转至：导航、​搜索

作为 Write for DOnations 计划的一部分，作者选择了 /dev/color 来接受捐赠。

介绍

当用户编码和部署网站时，他们通常希望在线观众找到并阅读他们创建的网站。 搜索引擎优化 (SEO) 是一种让这些在线受众可以发现网站的做法。 优化搜索涉及对 Gatsby 应用程序进行更改，使其显示在搜索引擎的结果中，例如 Google、Bing 和 DuckDuckGo。 这通常通过微调最终出现在您网站的 HTML 中的元数据来完成。

在本教程中，您将配置开箱即用的 SEO 工具附带的 Gatsby 的 SEO 组件。 您将使用 Gatsby React Helmet 将元标记添加到您的站点。 元标记很重要，因为它们为搜索引擎提供有关您网站的信息。 通常，Google 对您的网站了解得越多，它就越能准确地将您的网页编入索引。 您还将为 Twitter 和 Facebook 中的 Open Graph 元标记创建社交媒体卡片。 有超过 10 亿人使用某种形式的社交媒体，因此针对社交媒体进行优化是让您的网站出现在许多互联网用户面前的有效方式。

先决条件

第 1 步——创建一个空项目

在本节中，您将基于 Gatsby 入门默认模板 创建一个新项目。 您将创建一个观鲸网站，并在以下步骤中改进其 SEO。 这将为您提供一个可靠的项目，您可以使用元标签和社交媒体资产进行优化。

首先，使用 CLI 工具启动一个名为 gatsby-seo-project 的新项目： 

gatsby new gatsby-seo-project https://github.com/gatsbyjs/gatsby-starter-default

这会从 Gatsby 的 gatsby-starter-default GitHub 存储库中的起始模板创建一个新网站。

创建项目后，进入项目的 src/images 文件夹： 

cd gatsby-seo-project/src/images

进入 images 文件夹后，从图库摄影网站 Unsplash 下载鲸鱼的图片： 

wget 'https://unsplash.com/photos/JRsl_wfC-9A/download?force=true&w=640'

Wget 是一个从 Internet 下载文件的 Gnu 命令。

接下来，使用 ls 命令列出同一 images 目录中的所有图像： 

ls

您将收到以下输出： 

Output'download?force=true&w=640' gatsby-astronaut.png      gatsby-icon.png

'download?force=true&w=640' 是一个很难记住的名字，所以将它重命名为 whale-watching.png： 

mv 'download?force=true&w=640' whale-watching.png

现在您有了鲸鱼图像，转到项目的根目录并打开 src/pages/index.js。 在以下代码中进行突出显示的更改以自定义您的网站：

gatsby-seo-project/src/pages/index.js 

import * as React from "react"
import { Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1>Whale watching for all</h1>
    <p>Come see extraordinary whales!</p>
    <StaticImage
      src="../images/whale-watching.png"
      width={300}
      quality={95}
      formats={["AUTO", "WEBP", "AVIF"]}
      alt="A surfacing whale"
      style={{ marginBottom: `1.45rem` }}
    />
    <p>
      <Link to="/page-2/">Go to page 2</Link> <br />
      <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
    </p>
  </Layout>
)

export default IndexPage

保存文件。 要试用代码，请使用以下命令启动本地开发服务器： 

gatsby develop

服务器运行后，在浏览器中选中 localhost:8000。 你会发现你的新网站在浏览器中呈现：

您现在已经完成了项目的设置。 接下来，您将使用 React Helmet 将元标记添加到您的站点标题。

第 2 步 — 使用 React Helmet 创建 SEO 组件

在本节中，您将学习如何借助 Gatsby 的 React Helmet 插件 和 SEO 组件来控制网站的技术 SEO 方面。 Helmet 插件为 Gatsby 网站头部中的所有元数据提供 服务器端渲染 。 这很重要，因为如果没有服务器端渲染，服务器引擎机器人可能无法在网站渲染之前抓取和记录元数据，从而更难以索引网站以进行搜索。

当您使用 gatsby-starter-default 作为网站的基础时，它已经提供了开始调整 SEO 所需的一切。 为此，您将使用以下文件：

  • gatsby-config.js：Gatsby 配置包含 GraphQL 将查询并放置在 SEO 文件中的元数据值。
  • src/components/seo.js：此文件包含头盔和 SEO 组件。

您首先要打开位于项目根目录下的 gatsby-config.js 文件： 

nano gatsby-config.js

在对文件进行任何更改之前，请检查导出对象中的 plugins 键。 Gatsby 默认启动器已经安装了 Helmet 插件，如以下突出显示的行所示：

gatsby-seo-project/gatsby-config.js 

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-image`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-gatsby-cloud`,
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

接下来，将注意力转向 siteMetadata 键。 这包含一个 object ，其中包含您网站的元数据。 您将更改 title、description 和 author。 您还将添加 keywords 以帮助用户搜索您的网站：

gatsby-seo-project/gatsby-config.js 

module.exports = {
  siteMetadata: {
    title: `Wondrous World of Whale Watching`,
    description: `Come and enjoy an experience of a lifetime! Watch whales with us!`,
    author: `@digitalocean`,
    keywords: `whales, marine life, trip, recreation`,
  },
...

keywords 元数据有助于优化搜索。 虽然选择关键字的主题超出了本教程的范围，但您可以在 Google 的搜索文档网站 了解更多关于 SEO 的基础知识。 在这里，您添加了用户在搜索像观鲸网站这样的网站时可能使用的特定搜索词。

保存并关闭此文件。

接下来，继续打开 SEO 组件： 

nano src/components/seo.js

SEO 组件中发生了很多事情。 将注意力集中在 SEO 功能上。 在此函数中，您使用 GraphQL 查询 siteMetadata 对象。 请记住，您已将 keywords 添加到 siteMetadata 对象，因此对查询进行以下突出显示的更改：

gatsby-seo-project/src/components/seo.js 

...
function SEO({ description, lang, meta, title}) {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
            keywords
          }
        }
      }
    `
  )
...

在 SEO 函数下方，在 keywords 常量中添加对该查询数据的引用，以使数据更易于使用：

gatsby-seo-project/src/components/seo.js 

...
  const keywords = site.siteMetadata.keywords
  const metaDescription = description || site.siteMetadata.description
  const defaultTitle = site.siteMetadata?.title
...

变量 keywords 包含您在 gatsby-config.js 文件中创建的所有关键字。 变量 metaDescription 是一个描述，您可以在页面上作为道具传递或从 gatsby-config.js 中的 siteMetadata 对象查询。 最后，将 defaultTitle 设置为 siteMetadata 对象中 title 的值。 siteMetadata 属性 中的 ? 检查空值 并返回 undefined 以获取空值或空值。

接下来，检查 SEO 组件返回的内容，并为 keywords 添加一个对象：

gatsby-seo-project/src/components/seo.js 

...
  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          name: `keywords`,
          content: keywords,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata?.author || ``,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    />
  )
...

您正在返回一个 Helmet 组件。 Helmet 使用服务器端呈现的数据填充 HTML 文档的头部，这使 Google 更容易抓取和记录元数据。 htmlAttributes=模板:Lang, 指定元素内容的语言，title 是元数据中的标题，来自siteMetadata。 titleTemplate 创建标题标签，这很重要，因为谷歌会惩罚缺少标题标签的网站。

在本节之后，您将找到包含元数据的 meta 对象。 这里的大部分值来自 siteMetadata。

最后，检查 SEO.defaultProps 和 SEO.propTypes 对象：

gatsby-seo-project/src/components/seo.js 

...
SEO.defaultProps = {
  lang: `en`,
  meta: [],
  description: ``,
}

SEO.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
}

SEO.defaultProps 是 SEO 属性的默认值。 SEO.propTypes 传递正确的值类型并充当 轻型打字系统 。

使用新的 keywords 条目保存文件并在终端中启动本地服务器： 

gatsby develop

服务器启动后，在浏览器中输入localhost:8000。 在浏览器中打开 HTML 视图； 对于 Chrome，右键单击窗口并打开 DevTools。 选择 Elements 并打开 <head></head> 标签。 在此标记中，您将找到以下行： 

...
<meta name="keywords" content="whales, marine life, trip, recreation" data-react-helmet="true">
...

您现在已经成功地使用 React Helmet 设置了 header 数据。

在本节中，您创建了元数据来改进观鲸网站的 SEO。 在下一部分中，您将添加一张图片并使该网站更易于在社交媒体上分享。

第 3 步 — 添加图片以增强社交分享

社交网络在吸引人们关注您的内容方面发挥着重要作用。 在本节中，您将为优化在社交上共享您的网站的两个功能添加图像：您的 Twitter 卡和 Facebook 的 Open Graph 协议 . 您还将了解使用哪些工具来确保您的元数据出现在这两个社交网络平台上。

在文本编辑器中打开 gatsby-config： 

nano gatsby-config.js

您要将 images/whale-watching.png 添加到 siteMetadata 中：

gatsby-seo-project/gatsby-config.js 

module.exports = {
  siteMetadata: {
    title: `Wondrous World of Whale Watching`,
    description: `Come and enjoy an experience of a lifetime! Watch whales with us!`,
    author: `@digitalocean`,
    keywords: `whales, marine life, trip, recreation`,
    image: `src/images/whale-watching.png`
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-image`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-gatsby-cloud`,
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

GraphQL 现在将能够查询图像。 关闭并保存文件。

接下来，在文本编辑器中打开 seo.js： 

nano src/components/seo.js

现在您的图像已在站点元数据中，是时候将其添加到 SEO 组件中了。 将以下突出显示的行添加到 seo.js：

gatsby-seo-project/src/components/seo.js 

...
function SEO({ description, lang, meta, title}) {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
            keywords
            image
          }
        }
      }
    `
  )
  const image = site.siteMetadata.image
  const keywords = site.siteMetadata.keywords
  const metaDescription = description || site.siteMetadata.description
  const defaultTitle = site.siteMetadata?.title

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          name: `keywords`,
          content: keywords,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          property: `og:image`,
          content: image,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:image`,
          content: image,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata?.author || ``,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    />
  )
}

SEO.defaultProps = {
  lang: `en`,
  meta: [],
  description: ``,
}

SEO.propTypes = {
  description: PropTypes.string,
  image: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
}

export default SEO

在此代码中，您：

  • 将图像添加到 GraphQL 查询
  • 创建了一个 image 变量并将值设置为在 siteMetadata 中找到的图像
  • 将 og:image 添加到 meta 对象
  • 将 twitter:image 添加到 meta 对象
  • 将 image 添加到 SEO.propTypes

保存更改并关闭 seo.js。

此过程的最后一步是在 Twitter 和 Facebook 上测试这些更改。 这不能从本地开发服务器完成； 为了测试您的站点，您必须首先部署它。 有很多方法可以做到这一点，包括使用 DigitalOcean 的应用平台，您可以在 如何将 Gatsby 应用程序部署到 DigitalOcean 应用平台教程 中阅读。

本教程将使用托管在 App Platform 上的 Gatsby 应用程序作为示例。 您可以在 https://digital-ocean-gatsby-seo-xkmfq.ondigitalocean.app/ 找到此应用，其中包含您在本教程中对您的网站所做的 SEO 更改。

如果您想测试社交媒体对象是否出现在 Twitter 上，请前往 https://cards-dev.twitter.com/validator。 此验证器由 Twitter 维护，需要 Twitter 帐户才能使用。 将示例部署站点的 URL 放入验证器中：

请注意，自定义图像现在将在用户发布有关您网站的推文时显示。

接下来，前往 https://developers.facebook.com/tools/debug/ 访问 Facebook 的 Open Graph 验证器。 这是由 Facebook 维护的，需要 Facebook 帐户才能使用。 将示例应用程序的 URL 添加到 URL 字段中。 调试器将为您提供有关存在哪些 og 对象以及缺少哪些对象的更多详细信息：

请注意，图像在 链接预览 部分中显示为带有标题和描述。

您现在已将图像添加到元数据、Twitter 卡片和 Facebook Open Graph。

结论

在本教程中，您使用 Gatsby 的 React Helmet 和 SEO 组件提升了网站的 SEO。 您还学习了如何将图像添加到社交媒体卡片以使您的网站更易于共享。

了解了 SEO 的基础知识后，您现在可以在 官方 Gatsby 文档 中阅读有关优化 Gatsby 搜索的更多信息。

取自“https://cainiaojiaocheng.com/index.php?title=如何使用Gatsby的SEO组件和GatsbyReactHelmet提升SEO&oldid=32925”
Powered by MediaWiki