diff --git a/docs/docs/seo.md b/docs/docs/seo.md index 9552001c4..e8e2eb893 100644 --- a/docs/docs/seo.md +++ b/docs/docs/seo.md @@ -1,54 +1,54 @@ --- -title: SEO with Gatsby +title: GatsbyにおけるSEO --- -Gatsby can help your site rank and perform better in search engines. Using Gatsby makes your site fast and efficient for search engine crawlers, like Googlebot, to crawl your site and index your pages. Some advantages, like speed, come out of the box and others require configuration. +Gatsby は、検索エンジンでの表示順位やパフォーマンスの向上に役立ちます。Gatsby を使用するとサイトが高速かつ効率的になります。Googlebot などの検索エンジンのクローラーがサイトをクロールしてページをインデックスしてくれるためです。いくつかの機能は設定が必要ですが、サイトの表示速度アップなどは設定なしでそのまま利用できます。 -## Server rendering +## サーバーレンダリング -Because Gatsby pages are server-side rendered, all the page content is available to Googlebot and other search engine crawlers. -You can see this by viewing the source for this page in your browser, Right-Click => View source. You'll see the fully rendered HTML document. +Gatsby ページはサーバー側でレンダリングされるため、Googlebot やその他の検索エンジンクローラーはすべてのページコンテンツを解釈できます。 +ブラウザーであなたのサイトを開き、`右クリック => ページのソースを表示`を選択することで、ページ全体の HTML ドキュメントを確認できます。 -When you've installed [`gatsby-plugin-offline`](/packages/gatsby-plugin-offline/), you'll see a partial HTML document that does not contain the HTML you were hoping for. By using `gatsby-plugin-offline`, we can optimize bandwidth consumption and not let your users download too much data. Serving a partial HTML document is okay. Google and other search engines will still see the full HTML because `gatsby-plugin-offline` only starts working on the second-page load. A search engine always runs a page in Sandbox mode, which essentially is the first visit. +もし [`gatsby-plugin-offline`](/packages/gatsby-plugin-offline/) をインストールしている場合は、一部の HTML のみが表示され、期待したような HTML ドキュメントとならないかもしれません。`gatsby-plugin-offline` を使用すると、ネットワーク帯域の消費を抑え、ユーザーに不要なデータをダウンロードさせないようにします。そのため、一部の HTML ドキュメントのみが表示されるのです。`gatsby-plugin-offline` は、2 ページ目以降のロード時にのみ機能します。Google などの検索エンジンに対しては常にページ全体の HTML ドキュメントを返します。検索エンジンは、サンドボックスモードという、常に 1 ページ目の訪問となるようなモードでページを巡回しているためです。 -As a website owner, how do I test my site is serving its HTML correctly when `gatsby-plugin-offline` is being used? It would be best if you used your terminal of choice to visit your website. You can crawl your site by running the following command: +サイトの管理者として、`gatsby-plugin-offline` を使用している場合にどのように自分のサイトをテストすれば良いのでしょうか？ターミナルを利用して、自分のサイトを確認するのがベストでしょう。次のコマンドで、自分のサイトをクロールできます。 -**on Windows (using powershell):** +**Windows の場合 (powershell を使用します）:** ```shell Invoke-WebRequest https://www.gatsbyjs.org/docs/seo | Select -ExpandProperty Content ``` -**on Mac OS/Linux:** +**Mac OS または Linux の場合：** ```shell curl https://www.gatsbyjs.org/docs/seo ``` -## Speed boost +## スピードの向上 -Gatsby's many built-in performance optimizations, such as rendering to static files, progressive image loading, and the [PRPL pattern](/docs/prpl-pattern/)—all help your site be lightning-fast by default. +静的ファイルへのレンダリング、プログレッシブ画像の読み込み、[PRPL pattern](/docs/prpl-pattern/)など、Gatsby には標準で数多くのパフォーマンス最適化の仕組みが取り入れられています。これらの仕組みにより、Gatsby を使うだけでサイトを高速化できます。 -In July 2018, [Google announced a new ranking factor for site speed](https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html), calling the algorithm update the "Speed Update". Google will possibly rank pages higher in the search results for faster loading times, however, the intent of the search query is still very relevant and a slower page can rank higher if the content is more relevant. +2018 年 7 月、「Speed Update」とよばれるアルゴリズムについて、[Google はサイトの表示速度について新しいランキングの考え方を発表しました](https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html)。これにより、ローディングが速いページを上位にランク付けする可能性があります。しかし、検索クエリの目的は依然として非常に関連性が高く、コンテンツの関連性が高い場合は低速ページでも上位にランク付けされることがあります。 -## Page metadata +## ページのメタデータ -Adding metadata to pages, such as page title, meta description, alt text and structured data using JSON-LD, helps search engines understand your content and when to show your pages in search results. +サイトにページタイトル、メタ説明、代替テキスト、JSON-LD を使用した構造化データなどのメタデータを追加すると、検索結果にあなたのページを表示する際に、検索エンジンがよりあなたのページのコンテンツを理解しやすくなります。 -A common way to add metadata to pages is to add [react-helmet](https://github.com/nfl/react-helmet) components (together with the [Gatsby React Helmet plugin](/packages/gatsby-plugin-react-helmet) for SSR support) to your page components. Here's a [guide on how to add an SEO component](https://www.gatsbyjs.org/docs/add-seo-component/) to your Gatsby app. +ページにメタデータを追加する一般的な方法は、あなたのページに [react-helmet](https://github.com/nfl/react-helmet) コンポーネントを追加することです（SSR をサポートするために[Gatsby React Helmet プラグイン](/packages/gatsby-plugin-react-helmet)と一緒に利用できます）。あなたの Gatsby のアプリケーションに SEO 用のコンポーネントを追加する方法は[こちら](https://www.gatsbyjs.org/docs/add-seo-component/)です。 -Some examples using react-helmet: +React-helmet を使用した例： -- [Official GatsbyJS.org site](https://github.com/gatsbyjs/gatsby/blob/87ad6e81b9bd78b25d089434600750f5903baaee/www/src/components/package-readme.js#L16-L25) -- [Official GatsbyJS default starter](https://github.com/gatsbyjs/gatsby/blob/776dc1d6fe8d5ce7b5ea6d884736bb3c76280975/starters/default/src/components/seo.js) +- [GatsbyJS.org 公式](https://github.com/gatsbyjs/gatsby/blob/87ad6e81b9bd78b25d089434600750f5903baaee/www/src/components/package-readme.js#L16-L25) +- [GatsbyJS 公式 デフォルトスターター](https://github.com/gatsbyjs/gatsby/blob/776dc1d6fe8d5ce7b5ea6d884736bb3c76280975/starters/default/src/components/seo.js) - [Gatsby Mail](https://github.com/DSchau/gatsby-mail/blob/89b467e5654619ffe3073133ef0ae48b4d7502e3/src/components/meta.js) -- [Jason Lengstorf’s personal blog](https://github.com/jlengstorf/gatsby-theme-jason-blog/blob/e6d25ca927afdc75c759e611d4ba6ba086452bb8/src/components/SEO/SEO.js) +- [Jason Lengstorf 氏のブログ](https://github.com/jlengstorf/gatsby-theme-jason-blog/blob/e6d25ca927afdc75c759e611d4ba6ba086452bb8/src/components/SEO/SEO.js) -## Generate rich snippets in search engines using structured data +## 構造化データを使用して検索エンジンでリッチスニペットを生成する -Google uses structured data that it finds on the web to understand the content of the page, as well as to gather information about the web and the world in general. +Google は、あらゆる Web や世界中の情報を収集するのはもちろん、ページのコンテンツを理解するために、Web 上で見つけた構造化データを使用しています。 -For example, here is a structured data snippet in the [JSON-LD format](https://developers.google.com/search/docs/guides/intro-structured-data) (JavaScript Object Notation for Linked Data) that might appear on the contact page of a company called Spooky Technologies, describing their contact information: +たとえば、以下は[JSON-LD 形式](https://developers.google.com/search/docs/guides/intro-structured-data)（リンクデータの JavaScript オブジェクト表記）の構造化データスニペットです。 Spooky Technologies という会社の連絡先ページに、連絡先情報が記載されています。 ```html ``` -When using structured data, you'll need to test during development and the [Structured Data Testing Tool](https://search.google.com/structured-data/testing-tool) from Google is one recommended method. +構造化データを使用する場合、開発中にテストする必要があります。Google の[構造化データテストツール]（https://search.google.com/structured-data/testing-tool）は、Googleが推奨する方法の1つです。 -After deployment, their [Rich result status reports](https://support.google.com/webmasters/answer/7552505?hl=en) may help to monitor the health of your pages and mitigate any templating or serving Issues. +デプロイ後に[リッチリザルトのステータス レポート](https://support.google.com/webmasters/answer/7552505?hl=ja)を確認することで、ページの状態を監視しやすくなり、テンプレートエンジンや配信で発生している問題を解消しやすくなります。 -## Additional resources +## その他の資料 -You might also be interested in [blog posts about SEO in Gatsby](/blog/tags/seo/). +より詳しく知りたい場合は、[Gatsby における SEO についての記事](/blog/tags/seo/)をご覧ください。