« 神使の兎 ~宇治神社にて~ | トップページ | 鍛高譚 ~ カレイにまつわる物語 »

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="https://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"]を別に指定することで、記事毎に異なる画像を指定することが可能になる。

« 神使の兎 ~宇治神社にて~ | トップページ | 鍛高譚 ~ カレイにまつわる物語 »

ウェブログ・ココログ関連」カテゴリの記事

おもいつき」カテゴリの記事

覚書」カテゴリの記事

コメント

ココログさんが漸く公式にカード表示対応したようですね。
「ココログがTwitterカードに対応しました」

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: ココログをTwitterカードに対応させてみる:

« 神使の兎 ~宇治神社にて~ | トップページ | 鍛高譚 ~ カレイにまつわる物語 »

戻るリンク追加

カレンダー

2025年1月
      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 31  

ココログカレンダーPlus(旧2)

検索


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

コメントリストツリー化

無料ブログはココログ