« 2016年7月 | トップページ | 2018年5月 »

2016年11月の1件の投稿

2016/11/23

ココログをTwitterカードに対応させてみる

ココログをTwitterカードに対応させる方法を調べてみた。

この設定をすると、ココログの記事のURLを Twitter に貼り付けた際に、。

のような形で表示される。

ただ、画像については記事毎に手動で指定しないといけないのが難点。

■前準備

  1. ブログの「設定」→「基本情報」の「ブログのサブタイトル(キャッチフレーズ)」欄に
     <meta name="twitter:card" content="summary" />
     <meta name="twitter:site" content="@(自分のTwitterユーザー名)" />
     <meta name="twitter:image" content="(Twitterカードにデフォルトで表示させたい画像のURL)" />
    

    ※例

     <meta name="twitter:card" content="summary" />
     <meta name="twitter:site" content="@furyutei" />
     <meta name="twitter:image" content="http://furyu.tea-nifty.com/image/kaze2_120x120.png" />
    
    のような記述を追加し、[変更を保存]→[サイトに反映]
  2. Card validatorで、適当な既存ブログ記事の URL を指定して、[Preview card]ボタンをクリック。

    Twitter_card_validator

    のような感じで表示されれば OK。

■記事投稿時

  1. 通常通りブログの記事を書く。
    このとき、記事中に Twitter カード上にサムネイル表示させたい画像がある場合には、本文の一番最初に、
    <meta name="twitter:image" content="(記事中の画像のURL)" />
    
    のように追記して、記事を保存する。
  2. Twitterに当該ブログ記事の URL を貼り付けてツイートすれば、Twitterカードが表示されるようになる。

■注意書きなど

  • 上記では、metaタグには"twitter:card"、"twitter:site"、"twitter:image" のみを指定し、Summary Card — Twitter Developersで指定されている"twitter:title"、"twitter:description"(共に Required = YES)を指定していない。
    これは、これらのタグが設置されていない場合には、Twitter 側で代わりに meta[property="og:*"] を参照してくれるため。
    ココログでは、もともと"og:title"、"og:description" 等があらかじめ設定されている。
  • meta[name="twitter.image"]を複数設置した場合には、Twitterは一番最後に設置されたものを参照する模様。
    これを利用して、「ブログのサブタイトル(キャッチフレーズ)」欄ではデフォルト画像を指定しておき、記事によって変更したい場合には、記事本文に meta[name="twitter.image"]を別に指定することで、記事毎に異なる画像を指定することが可能になる。

« 2016年7月 | トップページ | 2018年5月 »

戻るリンク追加

カレンダー

2019年9月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          

ココログカレンダーPlus

検索


    • Web全体 サイト内
    • 蔵書のISBNを入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

最近のトラックバック

コメントリストツリー化

無料ブログはココログ