GatsbyのSEOコンポーネントとGatsbyReactヘルメットを使用してSEOを強化する方法

提供：Dev Guides
移動先:案内、検索

著者は、 Write forDOnationsプログラムの一環として寄付を受け取るために/dev /colorを選択しました。

序章

ユーザーが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という名前の新しいプロジェクトを開始します。 

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

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

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

cd gatsby-seo-project/src/images

imagesフォルダーに移動したら、ストックフォトのWebサイトUnsplashからクジラの写真をダウンロードします。 

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

Wget は、インターネットからファイルをダウンロードする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を開きます。 次のコードで強調表示された変更を行って、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

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

gatsby develop

サーバーが稼働したら、ブラウザでlocalhost:8000を確認します。 新しいサイトがブラウザに表示されます。

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

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

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

gatsby-starter-default をWebサイトのベースとして使用すると、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キーに注意を向けます。 これには、サイトのメタデータを保持するオブジェクトが含まれています。 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メタデータは、検索の最適化に役立ちます。 キーワードの選択のトピックはこのチュートリアルの範囲を超えていますが、SEOの基本については、Googleの検索ドキュメントWebサイトで学ぶことができます。 ここでは、サンプルのホエールウォッチングサイトのようなサイトを検索するときにユーザーが使用する可能性のある特定の検索用語を追加しました。

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

次に、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属性の?は、null値をチェックし、nullまたはnullish値の場合は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は、タイトルタグを作成します。これは、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を開きます。 Elements を選択し、<head></head>タグを開きます。 このタグには、次の行があります。 

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

これで、ReactHelmetを使用してheaderデータを正常に設定できました。

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

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

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

テキストエディタで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でこれらの変更をテストすることです。 これは、ローカル開発サーバーからは実行できません。 サイトをテストするには、最初にサイトをデプロイする必要があります。 これを行うには、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をバリデーターに入力します。

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

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

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

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

結論

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

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

「https://www.finddevguides.com/index.php?title=GatsbyのSEOコンポーネントとGatsbyReactヘルメットを使用してSEOを強化する方法&oldid=107671」から取得
Powered by MediaWiki