Skip to content
This repository was archived by the owner on Jan 20, 2025. It is now read-only.
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions docs/docs/add-page-metadata.md
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
---
title: Adding Page Metadata
title: ページのメタデータを追加する
---

If you've run an [audit with Lighthouse](/docs/audit-with-lighthouse/), you may have noticed a lackluster score in the "SEO" category. Let's address how you can improve that score.
[Lighthouse による評価](/docs/audit-with-lighthouse/) を実施したときに、SEO カテゴリのスコアが良くないことに気づいたかもしれません。ここではスコアを上げる方法について紹介します。

Adding metadata to pages (such as a title or description) is key in helping search engines like Google understand your content, and decide when to surface it in search results.
ページにメタデータ(タイトルや説明など)を追加することは、Google などの検索エンジンにコンテンツを理解させ、検索結果で上位表示をするために重要です。

[React Helmet](https://github.com/nfl/react-helmet) is a package that provides a React component interface for you to manage your [document head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head).
[React Helmet](https://github.com/nfl/react-helmet) は、[ドキュメントヘッド](https://developer.mozilla.org/ja-JP/docs/Web/HTML/Element/head)を管理するための React コンポーネントインターフェイスを提供するパッケージです。

Gatsby's [react helmet plugin](/packages/gatsby-plugin-react-helmet/) provides drop-in support for server rendering data added with React Helmet. Using the plugin, attributes you add to React Helmet will be added to the static HTML pages that Gatsby builds.
Gatsby の [React Helmet プラグイン](/packages/gatsby-plugin-react-helmet/)は、React Helmet で追加されたサーバーレンダリングデータのドロップインサポートを提供します。プラグインを使用すると、React Helmet に追加した属性が Gatsby がビルドする静的 HTML ページに追加されます。

## Using `React Helmet` and `gatsby-plugin-react-helmet`
## `React Helmet` `gatsby-plugin-react-helmet` を使用する

1. Install both packages:
1. 両方のパッケージをインストールします。

```shell
npm install --save gatsby-plugin-react-helmet react-helmet
```

2. Add the plugin to the `plugins` array in your `gatsby-config.js` file.
2. プラグインを `gatsby-config.js` ファイルの `plugins` 配列に追加します。

```javascript:title=gatsby-config.js
{
plugins: [`gatsby-plugin-react-helmet`]
}
```

3. Use `React Helmet` in your pages:
3. ページ内に `React Helmet` を追加します。

```jsx
import React from "react"
Expand All @@ -49,6 +49,6 @@ class Application extends React.Component {
}
```

> 💡 The above example is from the [React Helmet docs](https://github.com/nfl/react-helmet#example). Check those out for more!
> 💡 上の例は [React Helmet ドキュメント](https://github.com/nfl/react-helmet#example) からのものです。詳細をご覧ください!

You may also be interested in checking out the doc on [adding an SEO component](/docs/add-seo-component/).
また、[SEO コンポーネントを追加](/docs/add-seo-component/) も参考になるでしょう。