ウェブサイトにブログを追加する方法：選択肢、SEO、セットアップ

ウェブサイトにブログを追加するには、投稿の書き方を決めます。プロジェクト内の Markdown ファイル（自分か開発者が書く場合）、管理画面付きのデータベース（非技術者が書く場合）、または本格的な編集ツールとしての CMS です。その上で、ブログをメインドメインの /blog に置き、一覧ページ、投稿ごとのページ、RSS フィードを用意します。検索エンジンのために、各投稿を独自のタイトル、説明、共有画像を持つ本物の HTML として配信し、サイトマップに含めてください。AI アプリビルダーは、プロンプトからこのどれでも作れます。選択は主に、誰が書くかで決まります。

誰が投稿を書くかを決める

これが最も重要な判断です。技術的な方法はそこから決まります。

役立つ目安: 普通のテキストファイルで書くのに抵抗がないなら、Markdown が最もシンプルで提供も速いです。「コミット」や「再デプロイ」という言葉で、あなたやチームが投稿をためらうなら、エディタを選びましょう。

サブフォルダかサブドメインか？

• サブフォルダ（example.com/blog）：1つのサイト、1つのデザイン、1セットの分析。投稿はランキングさせたいページと同じドメインに載ります。ほとんどのビジネスにとって最もシンプルです。
• サブドメイン（blog.example.com）：メインのサイトの下では提供できない別のプラットフォームでブログを動かす場合に必要です。

自分のサイトにブログを組み込むなら、サブフォルダを使いましょう。

ブログに必要なもの

• 投稿の一覧ページ。 タイトル、日付、短い抜粋、ページ送り付き。
• 投稿ページ。 読みやすい幅（1行あたりおよそ60〜80文字）、明確な見出し、良い画像の扱い。
• きれいな URL。 /blog?id=17 ではなく /blog/how-to-choose-a-caterer。
• 投稿ごとのタイトルとメタの説明、そして共有されたリンクが適切なプレビューを表示するための Open Graph タグ。
• すべての投稿のサイトマップ項目と、読者やニュースレターツール向けの RSS フィード。
• 著者と日付、修正したときの「更新日」。
• 投稿が十分に増えたら、カテゴリやタグ。
• 下書き機能。未完成の投稿を非公開にしておくため。

SEO: 投稿を本物のページにする

最近のツールで作られたサイトの多くは、シングルページアプリです。ブラウザが JavaScript をダウンロードして、そこからページを描画します。アプリならこれで問題ありませんが、ブログは検索やリンクのプレビューで読まれるものです。ブラウザ上だけで描画されるページは、一部のクローラーやSNSのプレビューには読み取りにくくなります。ブログでは、投稿をプリレンダリング（サイトのビルド時に HTML にする）か、サーバーレンダリングしてもらうように頼みましょう。そうすれば、どの投稿の URL も、本文、タイトル、説明をすぐに返します。

AIで作ったウェブサイトのSEOのガイドでは、タイトル、サイトマップ、構造化データをより詳しく扱っています。

プロンプトの例

Markdown のブログ:

/blog にブログを追加してください。各投稿は content/blog 内の Markdown ファイルで、先頭にタイトル、説明、日付、任意のカバー画像を置きます。一覧ページ（新しい順、1ページ10件）と、/blog/[slug] に投稿ごとのページを作ってください。すべてのブログページを静的 HTML にプリレンダリングし、それぞれに独自のタイトル、メタの説明、Open Graph タグを持たせてください。投稿を sitemap.xml に追加し、/blog/rss.xml で RSS フィードを生成してください。

エディタ付きのブログ:

投稿をデータベースに保存するブログを追加してください。項目は、タイトル、スラッグ、抜粋、本文（Markdown）、カバー画像、ステータス（下書きまたは公開）、公開日です。パスワード保護された管理エリアで、投稿の作成、編集、プレビュー、公開ができるようにし、カバーとインラインの画像はアップロードできるようにしてください。/blog には公開済みの投稿だけを表示します。各投稿ページは、サーバーでレンダリングし、それぞれ独自のタイトルとメタの説明を持たせてください。

見た目の改善:

ブログ投稿のレイアウトを改善してください。読みやすい幅、行間を広げる、見出し・コードブロック・引用のスタイル、レスポンシブ画像、ページ下部に「次の投稿／前の投稿」リンクを追加してください。サイトの既存の色とフォントは維持してください。

手順

1. 誰が書くかを決める。 Markdown、データベース＋エディタ、CMS のどれかを選ぶ。
2. URL の構造を決める。 /blog と /blog/post-slug。
3. 一覧ページと投稿ページを作る。 上記のレイアウトの基本を押さえる。
4. 投稿ごとのメタデータを付ける。 タイトル、説明、共有画像、日付。
5. クロールできるようにする。 投稿をプリレンダリングかサーバーレンダリングし、投稿のページソースを表示して確認する。記事の本文が含まれているはずです。
6. サイトマップと RSS フィードを追加する。
7. 画像を扱う。 圧縮し、サイズを指定し、代替テキストを付ける。エディタを作るなら、アップロードはファイルストレージに保存する（ファイルアップロードを追加する方法をご覧ください）。
8. 公開前に2〜3本の投稿を書く。 ブログが空っぽに見えないように。
9. 公開して、Google Search Console にサイトマップを送信する。

よくある間違い

• 誰も使わないセットアップを選ぶ。 ファイルに触りたがらないチームにとって、Markdown のブログは空のままになります。
• ブラウザ上だけで描画される投稿。 共有すると空白のプレビューになり、検索エンジンにも伝わりにくくなります。
• すべての投稿で同じタイトルと説明。 投稿ごとに独自のものが必要です。
• 公開後にスラッグを変更する。 リンクが壊れます。どうしても変える場合はリダイレクトを追加してください。
• 圧縮されていない巨大な画像。 どの投稿も遅くなります。
• 下書き機能がない。 書きかけの投稿が誤って公開されます。
• 顧客の質問ではなく、自分のことを書く。 役立つ回答は訪問を生みますが、お知らせはほとんど生みません。

チェックリスト

• 書き方が、実際に書く人に合っている
• ブログはメインドメインの /blog にある
• 投稿ごとに、きれいで安定した URL
• 投稿ごとに、独自のタイトル、説明、共有画像
• 投稿の HTML に記事全文が含まれている（ページソースで確認）
• サイトマップと RSS フィードに、公開済みのすべての投稿が含まれている
• 下書きは非公開のまま
• 画像は圧縮され、代替テキストがある
• 公開前に数本の投稿を書いた

Mythex でブログを追加する

Mythex では、どちらのタイプのブログも、チャットから追加できます。エディタ型のブログの場合、投稿はプロジェクトのデータベースに、画像はファイルストレージに保存されます。どちらもアプリが必要とすれば Mythex が有効にします。Mythex のドキュメントによると、新規アプリはデフォルトで Vite のシングルページアプリであることが多く、SEO はサーバーレンダリングや静的 HTML より弱くなります。そのため、ブログでは、投稿ページをプリレンダリングまたは静的にするよう依頼するか、Next.js 構成を依頼してください。公開アプリの SEOをご覧になり、変更後は再公開してください。

ゼロから始めるなら、AIでウェブサイトを作る方法と小規模ビジネスのウェブサイトの作り方もご覧ください。

よくある質問