序章

ユーザーがWebサイトをコーディングして展開するとき、多くの場合、オンラインのオーディエンスが作成したWebサイトを見つけて読むことを望んでいます。 検索エンジン最適化(SEO)は、このオンラインオーディエンスがWebサイトを見つけられるようにする方法です。 検索を最適化するには、Gatsbyアプリに変更を加えて、 Google Bing DuckDuckGoなどの検索エンジンの結果に表示されるようにします。 これは多くの場合、サイトのHTMLに含まれるメタデータを微調整することによって行われます。

このチュートリアルでは、SEOツールに付属しているGatsbyのSEOコンポーネントをすぐに構成できます。 Gatsby ReactHelmetを使用してサイトにメタタグを追加します。 メタタグは、検索エンジンにサイトに関する情報を提供するため、重要です。 通常、Googleがサイトについてよく理解しているほど、Webページのインデックスをより正確に作成できます。 また、 Twitter 、および OpenGraphメタタグ用のソーシャルメディアカードをFacebookで作成します。 何らかの形のソーシャルメディアを使用している人は10億人を超えているため、ソーシャルメディアを最適化することは、多くのインターネットユーザーの前にWebサイトを表示するための効率的な方法です。

前提条件

ステップ1—空のプロジェクトを作成する

このセクションでは、Gatsbyスターターのデフォルトテンプレートに基づいて新しいプロジェクトを作成します。 ホエールウォッチングのWebサイトを作成し、次の手順でSEOを改善します。 これにより、メタタグとソーシャルメディアアセットを使用して最適化できる堅実なプロジェクトが得られます。

まず、CLIツールを使用して、という名前の新しいプロジェクトを開始します gatsby-seo-project:

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

これにより、Gatsbyの gatsby-starter-defaultGitHubリポジトリのスターターテンプレートから新しいWebサイトが作成されます。

プロジェクトが作成されたら、に移動します src/images プロジェクトのフォルダ:

  1. cd gatsby-seo-project/src/images

あなたが入ったら images フォルダ、ストックフォトのウェブサイトからクジラの写真をダウンロード Unsplash

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

Wget は、インターネットからファイルをダウンロードするGnuコマンドです。

次に、同じ内のすべての画像を一覧表示します images ディレクトリと ls 指図:

  1. ls

次の出力が表示されます。

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

'download?force=true&w=640' 覚えにくい名前なので、名前を次のように変更します whale-watching.png:

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

クジラの画像ができたので、プロジェクトのルートに移動して開きます src/pages/index.js. 次のコードで強調表示された変更を行って、Webサイトをカスタマイズします。

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

ファイルを保存します。 コードを試すには、次のコマンドを使用してローカル開発サーバーを起動します。

  1. gatsby develop

サーバーが実行されたら、チェックします localhost:8000 ブラウザで。 新しいサイトがブラウザに表示されます。

これで、プロジェクトの設定が完了しました。 次に、ReactHelmetを使用してサイトヘッダーにメタタグを追加します。

ステップ2—Reactヘルメットを使用したSEOコンポーネントの作成

このセクションでは、GatsbyのReactHelmetプラグインとSEOコンポーネントを使用して、サイトの技術的なSEOの側面を制御する方法を学習します。 Helmetプラグインは、Gatsbyサイトのヘッドにあるすべてのメタデータにサーバー側レンダリングを提供します。 これは重要です。サーバー側のレンダリングがないと、サーバーエンジンボットがサイトがレンダリングされる前にメタデータをスクレイプして記録できず、検索のためにサイトのインデックスを作成することがより困難になる可能性があるためです。

gatsby-starter-default をWebサイトのベースとして使用すると、SEOの調整を開始するために必要なすべてのものがすでに付属しています。 これを行うには、次のファイルを使用します。

  • gatsby-config.js:Gatsby configには、GraphQLがクエリしてSEOファイルに配置するメタデータ値が含まれています。

  • src/components/seo.js:このファイルには、ヘルメットとSEOコンポーネントが含まれています。

あなたは最初に開くつもりです gatsby-config.js プロジェクトのルートにあるファイル:

  1. 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 鍵。 これには、サイトのメタデータを保持するオブジェクトが含まれています。 あなたは変更しようとしています titledescription、 そしてその 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`,
  },
...

The keywords メタデータは、検索の最適化に役立ちます。 キーワードの選択のトピックはこのチュートリアルの範囲を超えていますが、SEOの基本については、Googleの検索ドキュメントWebサイトで学ぶことができます。 ここでは、サンプルのホエールウォッチングサイトのようなサイトを検索するときにユーザーが使用する可能性のある特定の検索用語を追加しました。

このファイルを保存して閉じます。

次に、SEOコンポーネントを開きます。

  1. 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 物体。 The ? の中に siteMetadata 属性はnull値をチェックし、戻り値を返します undefined nullまたは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.defaultPropsSEO.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 ターミナルにローカルサーバーを入力して起動します。

  1. gatsby develop

サーバーにスターターが追加されたら、次のように入力します localhost:8000 ブラウザで。 ブラウザでHTMLのビューを開きます。 Chrome の場合は、ウィンドウを右クリックしてDevToolsを開きます。 Elements を選択し、 <head></head> 鬼ごっこ。 このタグには、次の行があります。

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

これで、 header Reactヘルメットを使用したデータ。

このセクションでは、ホエールウォッチングサイトのSEOを改善するためのメタデータを作成しました。 次のセクションでは、画像を追加して、このサイトをソーシャルメディアで簡単に共有できるようにします。

ステップ3—ソーシャルシェアリングを強化するための画像の追加

ソーシャルネットワークは、コンテンツに注目を集める上で重要な役割を果たします。 このセクションでは、ソーシャルでのサイトの共有を最適化する2つの機能に画像を追加します。TwitterカードとFacebook用のOpenGraphプロトコルです。 。 また、メタデータがこれら2つのソーシャルネットワークプラットフォームに表示されるようにするために使用するツールについても学習します。

開く gatsby-config テキストエディタの場合:

  1. nano gatsby-config.js

追加します images/whale-watching.pngsiteMetadata:

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 テキストエディタで:

  1. 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:imagemeta 物体
  • 追加した twitter:imagemeta 物体
  • 追加した imageSEO.propTypes

変更を保存して閉じます seo.js.

このプロセスの最後のステップは、TwitterとFacebookでこれらの変更をテストすることです。 これは、ローカル開発サーバーからは実行できません。 サイトをテストするには、最初にサイトをデプロイする必要があります。 これを行うには、GatsbyアプリケーションをDigitalOceanAppPlatformにデプロイする方法チュートリアルで読むことができるDigitalOceanのAppPlatformを使用するなど、多くの方法があります。

このチュートリアルでは、例としてAppPlatformでホストされているGatsbyアプリを使用します。 あなたはでこのアプリを見つけることができます https://digital-ocean-gatsby-seo-xkmfq.ondigitalocean.app/、このチュートリアルでサイトに加えたSEOの変更が含まれています。

ソーシャルメディアオブジェクトがTwitterに表示されるかどうかをテストする場合は、 https://cards-dev.twitter.com/validator. このバリデーターはTwitterによって管理されており、使用するにはTwitterアカウントが必要です。 デプロイされたサンプルサイトのURLをバリデーターに入力します。

ユーザーがあなたのウェブサイトについてツイートすると、カスタム画像が表示されるようになりました。

次に、FacebookのOpenGraphバリデーターにアクセスします。 https://developers.facebook.com/tools/debug/. これはFacebookによって管理されており、使用するにはFacebookアカウントが必要です。 サンプルアプリのURLをURLフィールドに追加します。 デバッガーは、どれについての詳細を提供します og オブジェクトが存在し、どのオブジェクトが欠落しているか:

リンクプレビューセクションにタイトルと説明が付いた画像が表示されることに注意してください。

これで、メタデータ、Twitterカード、およびFacebookOpenGraphに画像が追加されました。

結論

このチュートリアルでは、GatsbyのReact HelmetとSEOコンポーネントを使用して、サイトのSEOを向上させました。 また、ソーシャルメディアカードに画像を追加してサイトをより共有しやすくする方法も学びました。

SEOの基本について説明したので、公式のGatsbyドキュメントでGatsbyの検索の最適化について詳しく読むことができます。