ねこじゃすり
猫を魅了する魔法の装備品！
Anker PowerCor
旅行には必須の大容量モバイルバッテリー！
【最新機種】GoPro hero11 Black
最新機種でVlogの思い出を撮影しよう！
[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
防水暴風で耐久性抜群なので旅行で大活躍です！
ペヤング ソースやきそば 120g×18個
とりあえず保存食として買っておけば間違いなし！
モンスターエナジー 355ml×24本 [エナジードリンク]
脳を活性化させるにはこれ！
MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド
Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！
スポンサーリンク
目次
Sitemapを作りたい
静的サイトを作成している際に、複数ページにまたがる場合はSitemapを作成する必要があります。
サイトマップを使うと、ウェブマスターはサイト内のクロールされるページを検索エンジンに簡単に知らせることができます。 サイトマップは、最終アップロード日、通常の更新頻度、サイト内の他の URL との相対的な URL 優先度など、各 URL の詳細メタデータのほか、サイトの URL がリストされている簡単な形式の XML ファイルであるため、検索エンジンでより正確にサイトをクロールできます。
sitemaps.org – プロトコル
このサイトマップですが、URLが少ない場合は手作業で作っても良いかもしれませんが、ページ数が増えたり動的にページが生成される場合は手動で管理するのは到底無理かつ無駄な作業といっても過言ではありません。
そこで、今回はsitemap-generatorを使って自動生成してみようと思います。
Generates a sitemap by crawling your site. Uses streams to efficiently write the sitemap to your drive and runs asynchronously to avoid blocking the thread. Is cappable of creating multiple sitemaps if threshold is reached. Respects robots.txt and meta tags.sitemap-generator – npm
手順
モジュールのインストール
まずは例のごとく、モジュールをyarnにてインストールします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
yarn add v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. success Saved 12 new dependencies. info Direct dependencies └─ sitemap-generator@8.4.1 info All dependencies ├─ async@2.6.1 ├─ cheerio@1.0.0-rc.2 ├─ cp-file@6.0.0 ├─ crypto-random-string@1.0.0 ├─ date-fns@1.29.0 ├─ mitt@1.1.3 ├─ nested-error-stacks@2.1.0 ├─ parse5@3.0.3 ├─ robots-parser@2.1.1 ├─ simplecrawler@1.1.8 ├─ sitemap-generator@8.4.1 └─ urijs@1.19.2 ✨ Done in 4.71s. |
生成
まずはシンプルなsitemap.xmlを生成してみましょう。
実行用のsitemap.jsを用意してみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const SitemapGenerator = require("sitemap-generator"); // option const option = {}; // create generator const generator = SitemapGenerator("https://blogenist.com", option); // register event listeners generator.on("done", () => { // sitemaps created }); // start the crawler generator.start(); |
実行
node sitemap.jsを実行すると、以下のようなファイルが生成されると思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0" encoding="utf-8" standalone="yes" ?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>https://blogenist.jp/</loc> </url> <url> <loc>https://blogenist.jp/2019/10/19/9569/</loc> </url> <url> <loc>https://blogenist.jp/2019/10/11/9457/</loc> </url> ... (略) ... </urlset> |
SitemapGeneratorを生成する際に指定したURLを自動クローリングしてサイトマップを生成しているようですね。
存在しないURLを指定するとエラー
存在しないURLを指定すると以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/Users/blogenist/node_modules/sitemap-generator/src/index.js:88 throw new Error(`Site "${parsedUrl.href}" could not be found.`); ^ Error: Site "https://hoge.blogenist.jp" could not be found. at Crawler.SitemapGenerator.crawler.on (/Users/blogenist/node_modules/sitemap-generator/src/index.js:88:13) at emitTwo (events.js:126:13) at Crawler.emit (events.js:214:7) at /Users/blogenist/node_modules/simplecrawler/lib/crawler.js:1282:25 at FetchQueue.update (/Users/blogenist/node_modules/simplecrawler/lib/queue.js:227:9) at ClientRequest.<anonymous> (/Users/blogenist/node_modules/simplecrawler/lib/crawler.js:1265:27) at emitOne (events.js:116:13) at ClientRequest.emit (events.js:211:7) at TLSSocket.socketErrorListener (_http_client.js:401:9) at emitOne (events.js:116:13) |
オプション
出力先の指定
sitemap.xmlはデフォルトでは実行ディレクトリに生成されます。
今回はpublic配下に出力するように変えてみようと思います。
オプションにfilepathを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const SitemapGenerator = require("sitemap-generator"); // option const option = { filepath: "./public/sitemap.xml" // 追加 }; // create generator const generator = SitemapGenerator("https://blogenist.com", option); // register event listeners generator.on("done", () => { // sitemaps created }); // start the crawler generator.start(); |
確認
正しく出力先が変わっていることが確認出来ます。
|
1 2 3 4 5 6 7 8 9 10 |
. ├── README.md ├── node_modules ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── sitemap.xml ├── sitemap.js └── yarn.lock |
最終更新日時の追加
sitemap.xmlに最終更新日も入れてみましょう。
オプションにlastModを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const SitemapGenerator = require("sitemap-generator"); // option const option = { filepath: "./public/sitemap.xml", lastMod: true // 追加 }; // create generator const generator = SitemapGenerator("https://blogenist.com", option); // register event listeners generator.on("done", () => { // sitemaps created }); // start the crawler generator.start(); |
確認
こちらも正しくlastmodが追加されました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?xml version="1.0" encoding="utf-8" standalone="yes" ?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>https://blogenist.jp/</loc> <lastmod>2019-10-20</loc> </url> <url> <loc>https://blogenist.jp/2019/10/19/9569/</loc> <lastmod>2019-10-19</loc> </url> <url> <loc>https://blogenist.jp/2019/10/11/9457/</loc> <lastmod>2019-10-11</loc> </url> ... (略) ... </urlset> |
ドキュメントによるとこの値は、http-equiv="Last-Modified"があればその値、なければ実行日が入るようです。
終わりに
Sitemapを作成する場合、手作業でやるのは大変なのでツールによる自動化はマストだと思います。
今回はGoogleが推奨するタグのみを出力してみましたが、他にも様々なオプションがありますので、興味のある方はぜひ試して見てください♪
Travenist
Otakenist
