2019-02-09に投稿

GatsbyJsでSitemapを使う

GatsbyJSでgatsby-plugin-sitemapを使う

GatsbyJSでGoogleにSiteMapを作成して登録したかったのでプラグインgatsby-plugin-sitemapを実装してみた。

GatsbyJSでgatsby-plugin-sitemapの使い方

  • インストール
  • Gatsby-config.jsのセッティング
  • サンプルコード

Styled Componentsのインストール

npmコマンドでインストールします。

npm install --save gatsby-plugin-sitemap

Gatsby-config.jsのセッティング

Gatsby Config.jsを以下のようにします。

module.exports = {
  siteMetadata: {
    siteUrl: `https://www.example.com`,
  },
  plugins: [`gatsby-plugin-sitemap`],
}

動作確認

gatsby build

で確認すると

Publicフォルダを確認してみるとsitemap.xmlが出来ている。

サーチコンソールからサイトマップを追加してみるとエラーゼロで完成している。

Originally published at www.corylog.com

view_list [連載] ブロガー向けGatsby講座
第24回 GatsbyJSでStaticにファイルを置く
第25回 GatsbyJsでWebpackバンドルサイズを確認する
第26回 GatsbyJsでFontを変更するTypeface編
第27回 GatsbyJSでStyled Componentsを使う
第28回 GatsbyJsでSitemapを使う

aocory

Crieitはβバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

関連記事

コメント