静的サイトジェネレータでは Markdown で制作し、
ビルドで HTML に変換させますが、
ビルド作業なく変換させる手段も存在しています。
JavaScript を用いて Web ブラウザ側で処理します。
Markdown パーサ とも言われます。


こんな記事を見ていたのです。IchigoJam つながりの福野さんの記事。

ここでは……

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js"></script>
<script>
const md = function(html) {
  const div = document.createElement("div")
  div.innerHTML = marked(html)
  document.body.appendChild(div)
}
</script>
</head>
<body>
<script>
md(`
# h1
## h2
### h3
#### h4
##### h5
###### h6
`)</script>
</body>
</html>

というように md 内に囲ってあるのですが、 ` で囲まれてあるので、
``` を使う事ができませんでした。

それなら特定タグの中に入れれば良いんですよね。
noscript タグだと非表示になりますが、クローラーは収集してくれるでしょう。
という事で……

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js"></script>
<body>
<div id="html"></div>
<noscript id="markdown">
# h1
## h2
### h3
#### h4
##### h5
###### h6
</noscript>
<script>
document.getElementById("html").innerHTML = marked(document.getElementById("markdown").innerHTML);
</script>
</body>
</html>

こんな感じなります。

Marked での表示結果

ここでは Marked を使っているのですが、(よく使われています)

他にもあるような気がして、GitHub を検索してみると結構見つかりました!
その中で CDN が用意されているなど、直接 URL を入れて使用できるものを
いくつかまとめてみました。

(URL 変更、追加参照)


本日これを投稿したのは、
そのうちの zero-md で 2.0.0 が公開されたのです。

専用にタグが定義されていて、よりシンプルに記載できます。

<html>
<head>
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/zero-md.min.js"></script>
</head>
<body>
<zero-md>
<script type="text/markdown">
# h1
## h2
### h3
#### h4
##### h5
###### h6
</script>
</zero-md>
</body>
</html>

専用タグで記載する上に head 内は HTML などで必要な title なども入れられるので、
クローラーで収集される前提でも良さそうです。

zero-md での表示結果


より便利に感じたのは Strapdown.js ですね。

デフォルトで Bootstrap themes を適用させます。

<html>
<head>
<title>Strapdown.js</title>
</head>
<body>
<xmp theme="united" style="display:none;">
# h1
## h2
### h3
#### h4
##### h5
###### h6
</xmp>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</body>
</html>

Markdown を記載するだけで、CSS を細かくいじる事なく、
すばやくテーマ付の Web サイトを公開できるわけです。
テーマの変更はタグのオプションで容易に行えます。

Strapdown.js での表示結果

長期で公開されているようで、派生もいくつか生まれていますよ。
メニューを付けたりするとか、テーマが増えているとか、……


一方注意点もあります。

JavaScript での処理という事は、
パソコンやスマートフォンで表示している Web ブラウザ側で変換します。
検索エンジンのクローラーは
この変換前の HTML ファイルをそのまま参照し、処理する事になるのです。

例えば README.md を表示したい場合、
zero-md v2 だとこのように記載できるのですが……

<html>
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/[email protected]/dist/zero-md.min.js"></script>
</head>
<body>
<zero-md src="/README.md"></zero-md>
</body>

ここにはテキスト本体がなく、タグしかありません。
クローラーはこれを参照して「全く文章がない」と判断してしまいます。
検索結果にも期待した検索結果にでてこなくなる可能性がある事に注意が必要です。
見出しなどが無視されているので、頭文がそのまま出ていて、
静的サイトジェネレータに比べると結果としてはいまいちそうです。
検索結果(いわゆる SEO)の事を考えると
静的サイトジェネレータで完全な HTML にした方が今は良さそうですね。

例えば GitHub Pages は Jekyll が採用されていて、
.html の代わりに直接 .md ファイルを用いて Markdown を記載できます。
Jekyll テーマを適用する事もあります。 git push するだけです。

Hugo などの自動ビルドを採用するところも増えてきており、
ますます Markdown で記載して、HTML で公開する手段も増えてきています。


自分は Hugo をメインに扱うようになってきていますが、
数ページの作成であれば、このような JavaScript を用いた
Markdown パーサを用いる方法も試しつつあります。


Markdown についてはこちらもどうぞ。


追加 2020/12/05

ここでサンプル公開していた Markdown を入れた HTML ファイルの運用サーバを
Neocities に移しました。

Neocities は通常 Web 上で HTML を編集するようになるので、
この方法で Web サイトを構築するのが理想的を考えました。

Neocities の詳細はこちらで紹介しています。


追加 2021/01/11

md-html.neocities.org に変更して Googlebot の収集を得て、検索結果を得ました。
Sitemap を追加したところ、すべて読みにいってるのですが、反映は一部にとどまっています。

Google site:md-html.neocities.org 検索

タグの認識としてテキストが無視されている可能性がある事と、
ほぼ一緒な内容があるので、重複サイトとして排除されている可能性があります。
前者の事を考えると、静的サイトジェネータなどでも良いので、
HTML 変換して公開するのが SEO 的には確実そうな気がします。
GitHub Pages を用いる前提で .md ファイルを git push しても良いですね。

とりあえずいろいろやってみて、一般公開向けに Markdown パーサを用いる場合、
少しでも検索結果に良い状態にする条件として、次を行うと良さそうです。

  • HTML の中に、Markdown を含める。別ファイルにした場合は検索結果に出てこない。
  • リンク・画像を Markdown ではなく HTML タグを用いる(クローラーに認識させる)
  • Sitemap を作成し、robots.txt にも Sitemap の位置を入れておく。

ここに記載している以外の場所でもいくつか試しに使ってみていて、
検索結果の反映状況を試してみています。