2017-05-26 更新

ツイッターカードの対応

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)で確認可能です。

AngularJS】関連記事