Independent Lab for AI Music & Visual Expressionhatosoundlab.com

HSL-N06 ·

静的HTMLでアーティストサイトを作る:構成と、原文に書くもの

hatolabor のサイトを、ビルドなしの静的HTMLで作った構成と、検索や生成AIに読まれるための工夫。

公開と検索のための設計 hatolabor

構成

  • index.html、style.css、script.js の3ファイルが中心。
  • 日本語版は「/」、英語版は「/en/」。
  • ビルドを行わず、Cloudflare Workers の静的アセットとして配信。

HTMLの原文に書くもの

title、meta description、canonical、hreflang、OGP、JSON-LD(MusicGroup と FAQ)、そして本文を、すべてHTMLの原文に直接書いています。JavaScript が動かなくても、クローラーが原文だけで内容を読める状態です。

検索や生成AI向けのファイル

  • sitemap.xml:日本語と英語の2URLを、相互に結びつけて記載。
  • robots.txt:検索エンジンと、生成AIのクローラーを許可。
  • llms.txt:サイトの要約と、主要なリンク。

JavaScriptの役割

メニューの開閉、グラフのアニメーション、数字のカウントアップ、言語の選択の記憶だけです。ページの内容を、JavaScript で作ることはしていません。

関連する研究ノート