忍者ブログをTwitterカードに対応させる

webサイトのURLを貼ったつぶやきをTwitterで投稿した時、画像やちょっとした説明入りで表示されることが増えてきました。


こういうものです。

Twitterカード(Twitter Cards)と呼ばれるものなんですが、何もしなくても勝手に行われるわけではありません。
(ブログの種類によっては自動で対応していることもあるのかも。)
忍者ブログは基本的に非対応。

「忍者ブログ Twitterカード」や「忍者ブログ Twitter Cards」等で検索しても、なかなかまともな記事が出てきませんでした。
そのため、自分で勉強して実装。
設定にはある程度htmlの知識が必要です。


<head>から</head>の間にいくつかのメタタグを書いておくことで、その情報を拾ってくれるようになります。

1.カードタイプ

<meta name="twitter:card" content="◯◯◯◯">

◯◯◯◯には、summary、photoなどカードのタイプを書き込みます。
詳しくはTwitter公式の解説サイトで。
使いやすそうなのはsummaryとphotoでした。
このブログでは、ブログトップのURLを貼った時にはsummaryの設定、
個別記事のURLを貼った時にはphotoの設定にしてあります。
summaryはアイコンのような小さい画像が左に、photoでは大きな写真が文字の上に表示されます。

2.タイトル

<meta name="twitter:title" content="◯◯◯◯">

◯◯◯◯にはブログのタイトルや記事のタイトルが入ります。
普通のwebサイトならページごとに直接日本語を書き込んでもいいのですが、ブログ記事のようにタイトルが可変の場合、忍者ブログの変数タグを使って自動で引っ張ってくるようにする必要があります。
例えば<!--$g_page_title-->と書いておくと、記事のタイトルが呼び出されます。
忍者ブログ独自のタグは忍者ブログのヘルプに載っています。


3.説明

<meta name="twitter:description" content="◯◯◯◯" />

◯◯◯◯にはリンク先の説明文が入ります。
こちらもタイトルと同様、普通のwebサイトならページごとに直接日本語を書き込んでもいいのですが、ブログ記事のようにどんどんタイトルが可変になっている場合、忍者ブログの変数タグを使って自動で引っ張ってくるようにする必要があります。
例えば<!--$entry_description-->と書いておくと、記事の頭の方の文章を自動で引っ張ってきます。

「夜の林のかげえ」上映会｜まるごと玉川上水ブ...
の部分が、ブログ記事から引っ張ってきたタイトル。
8月27(土)。小平で「夜の林のかげえ」上映会...
の部分が、ブログ記事から引っ張ってきた説明です。

4.画像

<meta name="twitter:image" content="◯◯◯◯" />
◯◯◯◯には、表示される画像のURLが入ります。
トップページの場合は、そのwebサイトを象徴するアイコンやロゴがふさわしいと思いますが、ブログ個別記事の場合は自動でその記事の画像を引っ張ってくるようにする必要があります。
忍者ブログでは、<!--$entry_image-->タグを使用すると、ブログ記事最初の画像を自動で引っ張ってきます。

・どこにタグを書いたらいいの？

実際に機能させるには、ブログのテンプレートを編集する必要があります。
忍者ブログの管理ページより、デザイン→PC用テンプレートとたどり、使用中のテンプレートの「修正」をクリックします。

HTML編集で、上の方に<head>が見えていると思うので、その下あたりに書いていけばいいでしょう。

結局このブログでは以下の書き方にしました。
記事の時、ブログトップの時で分けています。

<!--if_entry-->
<!--entry-->
<meta name="twitter:card" content="photo">
<meta name="twitter:title" content="<!--$g_page_title--> | <!--$g_title-->">
<meta name="twitter:description" content="<!--$entry_description-->" />
<!--if_entry_image-->
<meta name="twitter:image" content="<!--$entry_image-->" />
<!--/if_entry_image-->
<!--if_not_entry_image-->
<meta name="twitter:image" content="記事に画像がない場合の表示画像.jpg">
<!--/if_not_entry_image--><!--/entry-->
<!--/if_entry-->

<!--if_toppage-->
<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="ブログの説明">
<meta name="twitter:title" content="<!--$g_title-->">
<meta name="twitter:image" content="ブログのロゴやアイコン.jpg">
<!--/if_toppage-->



※プチ解説

<!--if_entry--> 記事の時
<!--entry--><!--/entry--> $entry_で始まる変数は<!--entry-->内に書く必要がある
<!--if_entry_image--> 記事内に画像があるとき
<!--if_toppage--> トップページの時