ツイッターカード対応

もろもろ苦労して何とか対応。備忘録的に記事にしておきます。
ツイッターカードは、ツイートの概要をクリックすると、ブログのサマリーを表示してくれたりするものです。下記みたいなもの。あ、誤字発見^^;

基本はココを参照
クリボウのBlogger Tips
⇒ http://www.kuribo.info/2013/06/twitter-cards-on-blogger.html

画像が大きい物にしたかったので、
一行目の summary を summary_large_image に変更。
二行目のツイッターのアカウントを自分の @ookumasinniti に変更。
これだけ。

<meta content='summary_large_image' name='twitter:card'/>
<meta content='@ookumasinniti' name='twitter:site'/>
<meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title' name='twitter:title'/>
<meta expr:content='&quot;http://bloggerspice.appspot.com/postimage/&quot; + data:blog.url' name='twitter:image'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>

上のタグを、
Bloggerのコンソール ＞ ブログ管理画面 ＞ テンプレート ＞ HTMLの編集 ＞ ＜head>の後で改行 ＞ タグをコピー・ペースト ＞改行 ＞ テンプレートを保存

まずはこうする。改行は後々足した部分が分かりやすくするためなので必須ではないです。

このまま、ページの申請（https://cards-dev.twitter.com/validator）に進むとエラーが出ました。こんな感じ。

エラー内容は、「説明という名前の関数に指定されているものが見当たりませんよ」という意味。ヘッダーのタグ自体はきちんと機能しています。

では、説明をどうすればいいのか？
①ヘッダーに直接書き込む。
②Bloggerの投稿を編集する際に入れておく。

①の場合は、どのページを表示しても内容紹介が同じものになるので却下。
②で行きます。

もう一度
Bloggerのコンソール ＞ ブログ管理画面　へ移動。
左のサイドバーから 設定 ＞ 検索設定 ＞ 説明 ＞ 説明を有効 ＞ 説明文を入力

これでBloggerのトップページをツイッターに貼った場合は、説明文が表示される様になります。
ただ、これではトップページをツイッターにはった場合はOKですが、各投稿をはった場合には説明文がないというエラーでカードになりません。

各投稿をカード化したい場合は、その投稿ごとに検索向けの説明を付けなくてはいけません。上記の手順で検索用の説明を有効にしていれば、投稿を編集する画面の右のサイドバーに「検索向け説明」という項目が出てきているので、そこに投稿ごとの説明を書き込めばOK！

先ほどのサイトで確認してみてください。もうエラーは出ないはず。これで終了。

最後の注意事項。ツイッターカードが反映されるまでしばらく時間がかかります。私の場合で1時間くらいだったかな？エラーが出ていなければその内対応するはずなので、少し待ってください。半日経ってもダメだったらどこかにエラーがあるのかも。。