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

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

介绍

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

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

先决条件

第 1 步 – 创建一个空项目

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

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

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

这gatsby-starter-default将从 Gatsby的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是一个从互联网下载文件的 Gnu 命令。

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

  • 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您的浏览器。你会发现你的新网站在浏览器中呈现：

带有鲸鱼图片和文字的 Gatsby 网站。

您现在已完成项目的设置。接下来，您将使用 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：此文件包含 Helmet 和 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钥匙上。这包含一个保存站点元数据的对象。你要改变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是，你可以通过一个页面或查询来自于一个道具的描述siteMetadata中的对象gatsby-config.js。最后，defaultTitle被设置为值title的siteMetadata对象。的?在siteMetadata属性检查空值，并返回undefined一个空值或nullish值。

接下来，检查 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创建标题标签，这很重要，因为 Google 会惩罚缺少标题标签的网站。

在本节之后，您将找到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。选择元素并打开<head></head>标签。在此标记中，您将找到以下行：

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

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

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

第 3 步 – 添加图像以增强社交分享

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

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 放入验证器：

Twitter 卡验证器

请注意，当用户推文介绍您的网站时，现在将显示自定义图像。

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

Facebook开放图验证器

请注意，图像显示在链接预览部分中，并带有标题和说明。

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

结论

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

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

觉得文章有用？

点个广告表达一下你的爱意吧 ！😁