ishinao.netをAIフレンドリーなWebサイトにしてみた

ishinao.netの記事URLの末尾に「.md」を付けると、同じ記事をMarkdownで読めるようになった。

たとえばこのサイトの最初の記事は、通常なら以下のURLで表示される。

https://ishinao.net/hello-world

これをAI向けのMarkdownとして取得したい場合は、こうなる。

https://ishinao.net/hello-world.md

今回、自作CMSのamplessに、このようなAIフレンドリーな機能をまとめて追加し、ishinao.netにもデプロイした。

参考にしたのはBlumeという、MarkdownやMDXで書いたドキュメントサイトを生成するツールである。Blumeには、人間がブラウザで読むページとは別に、AIが読みやすいMarkdown、サイト全体を案内するllms.txt、AIからサイトを検索するためのMCPなどが最初から用意されている。

今後のWebサイトにはこういうものが必要になりそうだなと思ったので、amplessにも持ってきた。

ただしamplessはMarkdown専用のドキュメント生成ツールではない。記事はTipTap、Markdown、HTMLなどで保存でき、XやYouTubeの埋め込みもある。そのため、単に元ファイルを公開するだけではない。

公開記事の標準的なMarkdown版を作る

まず、どの形式で保存された記事でも、公開用のMarkdownへ変換する仕組みを用意した。

Markdown版にはタイトル、公開日時、更新日時、タグ、概要、canonical URLなどをFrontmatterとして付けている。一方、記事IDや公開状態、CMS内部のメタデータなどは出さない。TipTapの記事内にあるXやYouTubeの埋め込みはURLとして残す。HTMLの記事はMarkdownへ変換する。

CMS内部の保存形式を単に露出するのではなく、たとえHTMLで書かれた記事だとしても、それを標準的なMarkdown版に変換している。

この処理は、Markdown投影の実装と記事ごとの.mdルートで追加した。

サイト全体の索引としてllms.txtを置く

次に、サイト直下にllms.txtを用意した。

ここにはサイト名と説明、最近公開された記事100件のタイトル、概要、タグ、Markdown版へのリンクが並んでいる。AIがishinao.netを調べるとき、HTMLを手当たり次第に巡回しなくても、まずここを読めばサイトの内容を把握できる。

llms.txtは2024年に提案された比較的新しい形式で、まだW3Cなどの正式な標準ではない。それでも実装は簡単だし、すでに対応を始めているサイトやツールもある。使われるかどうか分からない独自仕様を一から考えるよりはよい。

ClaudeやChatGPTへ記事を渡す

さらに、記事の下には次の操作を追加した。

• Markdownで表示

• Claudeで開く

• ChatGPTで開く

ClaudeやChatGPTで開くと、記事のMarkdown URLを含んだプロンプトが渡される。サイト内に専用のAIチャットを置くのではなく、読者が普段使っているAIで記事を取り扱うためのインターフェースを用意した。

公開読み取り専用MCPを用意する

もう一段AI寄りの入口として、公開読み取り専用MCPも用意した。エンドポイントは以下である。

https://ishinao.net/api/mcp

Claude Codeなら、たとえば次のように登録できる。

claude mcp add --transport http ishinao-net https://ishinao.net/api/mcp

現在は4つのツールを公開している。

• list_posts：公開記事の一覧を取得する

• get_post：指定した記事をMarkdownで取得する

• search_posts：タイトル、概要、タグなどから記事を検索する

• list_tags：タグと記事数を取得する

これは公開記事専用で、下書きは取得できない。記事を作成したり編集したりする管理用MCPとも分離してある。

AIがishinao.netの記事を調べるとき、Web検索の結果からHTMLを解析するだけでなく、「記事を検索する」「特定の記事をMarkdownで読む」という操作を直接呼び出せる。

MCPの存在を知らせるために、CatalogとServer Cardも公開した。これはまだ実験的な仕様で、主要なAIクライアントが自動的に発見して接続してくれる段階ではない。とりあえず将来そこに入口を探しに来るAIがいたら、案内を置いてある状態だ。

amplessでは以下の設定で有効にできる。

ai: {
  publicMcp: true,
  mcpDiscovery: true,
},

plugins: [
  aiActionsPlugin({
    showClaude: true,
    showChatgpt: true,
  }),
]

一連の実装方針はAIフレンドリー機能のドキュメントにもまとめた。

AIフレンドリーというのはチャットUIを用意する話ではない

AIフレンドリーなWebサイトというと、サイトの右下にAIが応答するチャットUIを置く話になりがちである。しかし今回やりたかったのは、それとは少し違う。

人間にはHTMLを見せる。文章を読みたいAIにはMarkdownを渡す。サイト全体を知りたいAIにはllms.txtを見せる。検索や取得をしたいAIにはMCPを使わせる。

同じ内容に対して、利用者に合わせた入口を用意するという話である。

セマンティックWebの続きになるか

これを書きながら思い出したのが、昔のセマンティックWebやmicroformatsである。

HTMLにhCardやhAtomなどの意味を付ければ、Webページに書かれた人物、記事、イベントなどをソフトウェアが理解し、別のサービスで再利用できる。そんな構想があった。

個人的にはかなり期待していたのだが、少なくとも私が想像していたほどには普及しなかった。

RSSは残った。schema.orgやJSON-LDも検索結果の表示に使われている。ishinao.netでも記事情報をJSON-LDで出力している。しかし、Web上の情報が構造化され、さまざまなソフトウェアが自由に組み合わせて使う世界になったかというと、そこまでは行かなかった。

情報を構造化しても、それを使う相手が少なかったからだろう。検索結果で目立つという直接的な利益があるschema.orgは使われた。一方、将来誰かが便利に再利用してくれるかもしれないという理由だけでは、面倒なマークアップを続ける動機として弱かった。

今はそこにAIエージェントがいる。

AIは完全に厳密なデータ構造でなくても、Markdownを読んである程度理解できる。正確な属性が必要ならJSON-LDを参照できる。さらに操作が必要ならMCPを呼び出せる。

将来のWebサイトは、人間が見る画面の裏に、AIが読む本文、サイト内を探す索引、実行可能な操作を持つようになっていくのだろう。

店舗サイトなら商品検索や在庫確認、予約。企業サイトなら資料検索や問い合わせ。ブログなら過去記事の横断検索や要約。操作によっては認証や確認を挟みながら、読者が使っているAIから直接呼び出せる。

もちろん、llms.txtもMCP Discoveryも、まだ確実に普及すると決まったものではない。誰にも読まれないメタデータが増えて終わる可能性もある。

ただ、昔のセマンティックWebと違い、今はAIエージェントという急速に普及している実際の利用者がいる。

セマンティックWebの続きが、AIフレンドリーWebという名前で再び始まるのかもしれない。などと思いながら、現状ではそんなに使われなそうな機能を実装してみた。