Astroブログの公開前チェック：生成HTML・リンク・メタタグを確認する手順

Astroブログは、ブラウザで見た目が整っていても、ビルド後のHTMLにcanonicalや構造化データが出ているか、リンク先が実在するかまで確認しなければ公開準備は終わらない。確認対象をソースコードだけにすると、静的生成後に初めて分かるURLの組み立てやSitemapの問題を見逃しやすい。

この記事では、このリポジトリで実行した確認結果と、公開前に再利用できる確認方法を分けて記載する。掲載していないサービスのデプロイ結果や、実行していないブラウザ検証は含めない。

問題：ソースコードだけでは公開物を確認できない

Astroではnpm run buildがコンテンツの読み込み、Frontmatterの検証、静的ルートの生成、Sitemap integrationの実行までをまとめて行う。ページコンポーネントが存在していても、生成対象の記事データが不正ならビルドは成功しない。公開前には、ソースではなくdistにあるHTMLを確認対象にする。

最初にNode.jsのバージョンを揃える。このリポジトリでは.nvmrcに22.22.2を指定しているため、次の順番で実行する。

nvm use
npm run build

確認方法：生成物とSitemapを見る

ビルドが成功したら、dist/index.html、記事ごとのdist/blog/.../index.html、dist/sitemap-index.xmlが生成されていることを確認する。Astro公式のデプロイガイドでも、ローカルでnpm run buildを実行してdistを公開ディレクトリとして扱う構成が案内されている。

rg --files dist | rg '(^dist/index\.html$|sitemap-index\.xml$|/index\.html$)'

次に、生成された記事HTMLに次の情報があるかを確認する。

ページ固有の<title>とmeta name="description"
正規URLを示す<link rel="canonical">
記事の公開日時を示すOGPのarticle:published_time
BlogPostingとBreadcrumbListのJSON-LD

このサイトでは、共通OGP画像の設定受け口はあるが、実画像をまだ配置していない。そのため、実在しない画像URLを出さないようog:imageとtwitter:imageは未出力である。画像を追加するときは、生成後のHTMLで画像URLが実ファイルを指すことまで確認する。

確認方法：内部リンクと画像URLを機械的に調べる

内部リンクは、生成HTMLからhref="/..."を抽出し、対応するdist内のHTMLまたは静的ファイルが存在するかを確認できる。リンクの確認は、記事本文の関連記事リンク、ヘッダー、フッター、一覧ページを一度に対象にできる。

画像も同様に、<img>、og:image、twitter:imageが出ている場合だけURLを抽出し、公開ディレクトリに対応するファイルがあるかを確認する。画像を使っていない段階では、画像メタタグが出ていないこと自体が確認結果になる。存在しない仮画像を指定して確認を先送りしない。

このサイトで実行した結果

2026年9月11日にNode.js 22.22.2でnpm run buildを実行し、静的ページ15件とdist/sitemap-index.xmlの生成を確認した。同じ作業で生成HTMLの内部リンクを検査し、リンク切れは0件だった。全10件の公開記事ではBlogPostingとBreadcrumbListが出力され、og:imageとtwitter:imageの実メタタグは0件だった。

Node.js 20.18.2でnpm run buildを実行した際には、AstroがNode.js 22.12.0以上を要求してビルドを開始しなかった。これは記事内容やリンクのエラーではなく、実行環境のバージョン不一致である。nvm useの後にnode --versionを確認すれば、この種の問題をビルド前に切り分けられる。

一般的な注意：file://で直接開かない

生成されたHTMLをfile://で直接開く確認は、配信環境の再現にならない。HTML内の/_astro/のような先頭が/のURLは、ローカルファイルのdistディレクトリではなくファイルシステムのルートとして解釈され、CSSや画像が解決できない場合がある。

この挙動はブラウザとURLの解釈に関する一般的な注意点であり、この作業ではfile://での表示結果を測定していない。見た目やアセットの読み込みを確認するときは、Astroの開発サーバーまたはプレビューサーバーを起動し、http://localhost経由で確認する。

公開前チェックリスト

nvm use後のNode.jsがプロジェクト要件を満たしている
npm run buildが成功し、distとsitemap-index.xmlが生成される
生成HTMLにtitle、description、canonical、記事のOGP日時、JSON-LDがある
生成HTMLの内部リンクがすべて存在する
og:image、twitter:image、<img>がある場合はURLの実体が存在する
画面確認はfile://ではなくlocalhostまたはプレビューサーバーで行う

公式資料と関連記事

Astro公式: Deploy your Astro Site — ローカルビルドとdistを含む公開の基本を確認できる。
Astro公式: @astrojs/sitemap — Sitemap integrationの設定と出力を確認できる。
Google Search Central: Article structured data — 記事用JSON-LDの確認先。
Astroで作る静的サイトをCloudflare Pagesに最速でデプロイする手順 — ビルド成果物をデプロイ設定へつなげる際の注意を扱う。
Astroで構築するSEOに強いメタタグとOGP画像の共通コンポーネント設計 — canonical、OGP、構造化データの実装を扱う。