GatsbyのSEOコンポーネントとGatsbyReactヘルメットを使用してSEOを強化する方法
序章
ユーザーがWebサイトをコーディングして展開するとき、多くの場合、オンラインのオーディエンスが作成したWebサイトを見つけて読むことを望んでいます。 検索エンジン最適化(SEO)は、このオンラインオーディエンスがWebサイトを見つけられるようにする方法です。 検索を最適化するには、Gatsbyアプリに変更を加えて、 Google 、 Bing 、DuckDuckGoなどの検索エンジンの結果に表示されるようにします。 これは多くの場合、サイトのHTMLに含まれるメタデータを微調整することによって行われます。
このチュートリアルでは、SEOツールに付属しているGatsbyのSEOコンポーネントをすぐに構成できます。 Gatsby ReactHelmetを使用してサイトにメタタグを追加します。 メタタグは、検索エンジンにサイトに関する情報を提供するため、重要です。 通常、Googleがサイトについてよく理解しているほど、Webページのインデックスをより正確に作成できます。 また、 Twitter 、および OpenGraphメタタグ用のソーシャルメディアカードをFacebookで作成します。 何らかの形のソーシャルメディアを使用している人は10億人を超えているため、ソーシャルメディアを最適化することは、多くのインターネットユーザーの前にWebサイトを表示するための効率的な方法です。
前提条件
-
Node.jsバージョン14.16.0がコンピューターにインストールされています。 これをmacOSまたはUbuntu20.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはの
PPAを使用したインストール ]セクションの手順に従います。 Ubuntu20.04にNode.jsをインストールする方法。 -
Gatsby.jsとGatsbyCLIツールがインストールされています。 これをインストールする方法については、最初のギャツビーWebサイトのセットアップ方法チュートリアルを参照してください。
-
JavaScriptを理解しておくと役に立ちます。 JavaScriptの詳細については、JavaScriptシリーズのコーディング方法をご覧ください。 GatsbyはReactを使用していますが、始めるためにReactを知る必要はありません。 ただし、基本的な概念を学びたい場合は、Reactシリーズのコーディング方法を確認してください。
ステップ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
フォルダ、ストックフォトのウェブサイトからクジラの写真をダウンロード 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
. 次のコードで強調表示された変更を行って、Webサイトをカスタマイズします。
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 configには、GraphQLがクエリしてSEOファイルに配置するメタデータ値が含まれています。 -
src/components/seo.js
:このファイルには、ヘルメットとSEOコンポーネントが含まれています。
あなたは最初に開くつもりです gatsby-config.js
プロジェクトのルートにあるファイル:
- nano gatsby-config.js
ファイルに変更を加える前に、 plugins
エクスポートされたオブジェクトを入力します。 次の強調表示された行に示すように、GatsbyのデフォルトスターターにはすでにHelmetプラグインがインストールされています。
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
ユーザーがあなたのサイトを検索するのを助けるために:
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コンポーネントを開きます。
- nano src/components/seo.js
SEOコンポーネントでは多くのことが起こっています。 に注意を向ける SEO
関数。 この関数では、GraphQLを使用してクエリを実行しています siteMetadata
物体。 追加したことを忘れないでください keywords
あなたに siteMetadata
オブジェクトなので、クエリに次の強調表示された変更を加えます。
...
function SEO({ description, lang, meta, title}) {
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
description
author
keywords
}
}
}
`
)
...
SEO関数の下に、このクエリされたデータへの参照を追加します。 keywords
データを扱いやすくするための定数:
...
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
:
...
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
オブジェクト:
...
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">
...
これで、 header
Reactヘルメットを使用したデータ。
このセクションでは、ホエールウォッチングサイトのSEOを改善するためのメタデータを作成しました。 次のセクションでは、画像を追加して、このサイトをソーシャルメディアで簡単に共有できるようにします。
ステップ3—ソーシャルシェアリングを強化するための画像の追加
ソーシャルネットワークは、コンテンツに注目を集める上で重要な役割を果たします。 このセクションでは、ソーシャルでのサイトの共有を最適化する2つの機能に画像を追加します。TwitterカードとFacebook用のOpenGraphプロトコルです。 。 また、メタデータがこれら2つのソーシャルネットワークプラットフォームに表示されるようにするために使用するツールについても学習します。
開く gatsby-config
テキストエディタの場合:
- nano gatsby-config.js
追加します images/whale-watching.png
に siteMetadata
:
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
:
...
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をバリデーターに入力します。
ユーザーがあなたのウェブサイトについてツイートすると、カスタム画像が表示されるようになりました。
次に、FacebookのOpenGraphバリデーターにアクセスします。 https://developers.facebook.com/tools/debug/
. これはFacebookによって管理されており、使用するにはFacebookアカウントが必要です。 サンプルアプリのURLをURLフィールドに追加します。 デバッガーは、どれについての詳細を提供します og
オブジェクトが存在し、どのオブジェクトが欠落しているか:
リンクプレビューセクションにタイトルと説明が付いた画像が表示されることに注意してください。
これで、メタデータ、Twitterカード、およびFacebookOpenGraphに画像が追加されました。
結論
このチュートリアルでは、GatsbyのReact HelmetとSEOコンポーネントを使用して、サイトのSEOを向上させました。 また、ソーシャルメディアカードに画像を追加してサイトをより共有しやすくする方法も学びました。
SEOの基本について説明したので、公式のGatsbyドキュメントでGatsbyの検索の最適化について詳しく読むことができます。