このブログは1ページAppを目指して作っている(まだ完成していないがいずれは少数の静的ページに集約したいと思っている)。1ページAppはシングルページアプリケーション(SPA)とも言い、1ページのHTMLページ内で動的にコンテンツを切り替えていくアプリのことだ。 URLのパラメータやフラグメントを元に、Ajaxなどで動的にコンテンツをロードすることであたかもそれぞれのページが存在するかのように別々のコンテンツを表示する。

ここで問題になるのは、Googleなどのクローラはjavascriptを実行しないため、クローラに対してTitleタグやOGPなどのメタ情報をクライアント側で動的に出し分けることが出来ないということだ。これについて何か解決策がないか調べてみたのだが、結論としては、クローラなどにjavascrptで動的にメタ情報を付加することはやっぱり出来ないということだった。(そりゃそうだ)。

特に参考になったのは以下の記事である。

AngularJS SEO https://coderwall.com/p/vqpfka

この記事では2つの解法が示されている。

1つ目はシンプルにそもそも1ページAppにはしないこと。 実はこのブログではこちらの解法を採用するつもりだ。各記事についてはサーバ側のテンプレートを分けて、そちらにはメタ情報をサーバ側で付与する。1ページに集約することにこだわるより、AngularJSのテンプレートを使って再利用できるところは再利用し、最低限のサーバ側で出しわけないといけないところはサーバ側でレンダリングする方が自然だと判断したからだ。とはいえ1ページAppというのはロマンがあったので少し残念ではある。

2つ目のやり方はサーバ側でHTMLページをレンダリングし、クローラに表示することだ。 これをわざわざやってまでSEO対策するほどのメリットは見いだせなかったのでこちらの手段は取らないことにした。 上の記事では2つ目のやり方について詳しく書かれているが、滅茶苦茶めんどくさそうな印象を受けたからだ。

そういうわけで結論としては1ページAppでメタ情報を動的に扱うのは基本的に無理筋だということがわかった。(身も蓋もないが)。