WordPressから静的コンテンツ出力する時のコツ

WordPress

はじめに

このサイトは前にご紹介したAWS CloudFront+S3の構成で公開しておりまして、コンテンツはローカルのWordPressで作成し、静的コンテンツはSimplyStaticを使って出力しております。

ローカルWordPressの静的サイトをS3+CloudFrontで公開する
概要ローカルのDocker WordPressでコンテンツを管理し、Simply Staticで静的ファイルを生成、S3+CloudFrontでWeb公開する構成を構築した記録です。AWS部分はAWS謹製Kiroに手伝ってもらって作成しまし...

今回はブログSEO対策に必要なsitemap.xmlをSimplyStaticで出力して、アップロードする流れについてご紹介したいと思います。

この内容は少々泥臭いやり方だと思います。もっとスマートなやり方やプラグインの導入で出来るのかもしれませんが、一応このやり方でGoogle Search Console のサイトマップとして登録できましたので、一つの成功例として生暖かい目で見ていただけたらと思います。

※ 本文中に「http:// localhost/」とスペースが入っていますが、これは静的コンテンツ出力時の自動置換対策です。

SimplyStaticによるサイトマップの関連ファイル出力

では早速 SimplyStatic で出力するときの設定について。 まずはhttp:// localhost/sitemap.xml(実際はリダイレクトされてwp-sitemap.xml)へアクセスして、サイトマップでどんなファイルが作成されているか確認しましょう。

WordPressで作られるサイトマップの構造(例)

みなさんそれぞれの記事の分類、記事数でなどで変わってくると思いますが、自分の場合は以下の通りでした。

# WordPressにおけるサイトマップの構造(例)

http:// localhost/wp-sitemap.xml  # サイトマップの親
  |--http:// localhost/wp-sitemap-posts-post-1.xml  # 投稿記事の一覧
  |--http:// localhost/wp-sitemap-posts-page-1.xml  # 固定ページの一覧
  \--http:// localhost/wp-sitemap-taxonomies-category-1.xml  # カテゴリ別の記事一覧

# サイトマップのスタイルシート
# (必須ではありませんが、一緒にアップロードしておけばブラウザで確認できるようになります。)

http:// localhost/wp-sitemap-index.xsl
http:// localhost/wp-sitemap.xsl

これらのURLをSimplyStaticの設定画面:General ⇒Include⇒ADDITIONAL URLSに指定することになります。(下図参照)

ちなみにhttp:// localhost/sitemap.xml を指定すれば一応ファイルはできるのですが、そのファイルはwp-sitemap.xmlへリダイレクトするhtmlができあがるので、S3+CloudFront構成では使用出来ませんでした。 (S3は静的ストレージなので、サーバー側でのリダイレクト処理が行われず、XMLとして認識されないため) そのため、コンテンツ出力後に、wp-sitemap.xmlをsitemap.xmlへコピーしてからアップロードしています。(後述)

URLを入力したら、画面一番下のSaveボタンを忘れずに押してください。(最初自分はよく忘れてました。。。)

Saveしたら、Pushを押してコンテンツを出力。 ちなみに下図のように絶対URLとして本来のサイトURLを指定しております。

静的コンテンツ出力からアップロードまで

自分の場合、SimplyStaticでは他に設定らしい設定はしていないので、テーマファイルなど含めて、約3900ファイルくらい出力していますw(所要時間はM5 Airですと、50秒〜1分くらい)

出力されたらアップロードしましょう。

sitemap.xmlの作成(コピー)

Google Serach Console (通称:サチコ)に対しては、生成されたwp-sitemap.xmlを設定してあげればそれで済むのですが、他のサービスなど拾ってもらいやすくするために、標準的なsitemap.xmlという名前でコピーしておきます。

言い忘れてましたが、今回はdockerのWordPressを使った事例なので、静的コンテンツの出力先をコンテナを実行しているPCにマウントしております。(./static-out/ )

cp ./static-out/wp-sitemap.xml ./static-out/sitemap.xml

S3バケットにsync

もちろんこれは自分の場合なので、それぞれの手順で。

aws s3 sync ./static-out/ s3://<バケット名>/ --profile <プロファイル名(必要に応じて)> --delete

CloudFrontのキャッシュ削除

アップロードすると言うことは何らかの変更が加わったということなので、CloudFrontのキャッシュを一度すべてキレイにします。

全ファイルを対象にしても、CloudFrontなら数分で世界中のキャッシュがパージされるので、個人ブログならこれが一番安全で確実な方法です

aws cloudfront create-invalidation --distribution-id <ディストリビューションID> --paths "/*" --profile <必要ならプロファイルを指定>

ここまで来たら実際のURLで動作確認ができるようになっているはずです。

参考画像

実際のブラウザで確認した画面(ちゃんとURLを置き換えてくれています。)

サチコでサイトマップが認識してくれた証

まとめ

とまあ冒頭に申し上げたとおり、泥臭くはありますがこの形で作成したsitemap.xmlでサチコ(Google Search Console)で無事認識してくれているという成功事例でした。

振り返り、もう少し工夫出来そうなポイントなど。

  • サイトマップの出力は、もっといいプラグインがあるのでは無いか?
  • sitemap.xmlというファイル名の対応はCloudFrontでなんかできると思う
  • もう少し出力するファイル減らしたいなぁ(S3の料金はさほど変わらないかもしれないがw)
  • そもそもsitemap.xmlいる?w(Googleも小規模だったらいらないよと言っている)

と、最後に身も蓋もないことを言ってしまいましたが、インフラエンジニアとしては『自分のコントロール下にある地図』をGoogleに渡せているという安心感が、一番の収穫かもしれません

現場からは以上です。 ではでは。