ツイッターカードの対応
AngularJSで作成したサイトの記事をツイッターカードとして表示させる場合の対応についてです。
詳細
まず、ツイッターカードを表示させるためには通常、<head>タグ内に以下のような<meta>タグを追加します。
<head>
<meta property="og:type" content="website"/>
<meta property="og:title" content="タイトル"/>
<meta property="og:description" content="詳細" />
<meta property="og:image" content="http://example.co.jp/logo.jpg" />
<meta property="og:url" content="http://example.co.jp" />
<meta property="og:site_name" content="テストサイト"/>
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@st40pg">
</head>
「og:～」はOGP（Open Graph protocol）といって、Facebook、Google+、Twitterなどで共通に利用できる機能のようです。
「og:type」には、website、blog、articleのいずれか。
「twitter:card」には、summary、summary_large_image、app、player cardsのいずれか。
詳しくは以下のサイトを参考にしてください。
OGP設定のHTMLソースと Facebook, Twitter Cardsの設定を全部まとめてメモ！ | ＊Web Design 覚え書き＊
Cards Markup Tag Reference — Twitter Developers
Card Types — Twitter Developers
通常であれば上記の設定のみで事足りるのですが、AngularJSを利用している場合、サイトの特性にもよりますが、タイトルや詳細な説明文を以下のようにページ毎に変えていると思います。
<head>
<meta property="og:type" content="{{docs.type}}"/>
<meta property="og:title" content="{{docs.title}}"/>
<meta property="og:description" content="{{docs.description}}" />
<meta property="og:image" content="{{docs.image}}" />
<meta property="og:url" content="{{docs.url}}" />
<meta property="og:site_name" content="{{docs.site_name}}"/>
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@st40pg">
</head>
この場合、ツイッターカードには変換前の状態が表示されてしまいます。
これを解決するためには、ツイッターカードとしてアクセスしてきたリクエストに対して、事前に用意していたスナップショットのHTMLを返してやるようにします。
AngularJSでSEO対策をしているサイトならこちらの記事（AngularJSを利用する場合のSEO対策）のように、すでにスナップショットHTMLは作成しているものと思います。
後はどうやってツイッターカードのリクエストを特定するかという点ですが、実際にリクエストのログを見ると、ユーザーエージェントに「Twitterbot/1.0」という文字列が設定されているので、Apacheを利用している場合は「.htaccess」に以下の設定を追加します。
RewriteCond %{HTTP_USER_AGENT} (Twitterbot)
RewriteCond %{REQUEST_URI} ^/one-run/article/(.*)/$
RewriteRule ^(.*)$ one-run/snapshots/article_%1.html [L]
設定を追加した状態で再度、ツイッターカードを表示みると、
のように表示されるので、これで設定は完了になります。
ツイッターカードが正常に表示されるかどうか、実際にURL付きのツイートを行う他に、Twitterのデベロッパーサイト（Card Validator | Twitter Developers）で確認可能です。