2017年3月24日金曜日

Twitterカードの設定の仕方

Twitterは文字数制限があるため、ブログ記事の紹介の様に長い文章の場合、他のURLへの短縮URLが貼られていることが多いです。Twitterカードと呼ばれる機能を使うと、この短縮URLで示された内容を写真付きで展開してくれます。

この機能、少し設定方法が変わったようで、どの記事に書いてある通りにもできません。現在(2017-03-21)の方法をまとめることは、他の方のお役に立てるかもしれません。Bloggerでの設定を例に説明させていただきます。
1. 実装するカードタイプを選びます。現在は4個に減ったようです。詳しい説明は他のページを選んでください
  • Summary Card                                       (summary)
  • Summary Card with Large Photo             (summary_large_image)
  • App Card                                               (app)
  • Player Card                                           (player)
2. 適切なメタタグをページに追加します
  • Bloggerの[テーマ]-[HTMLの編集]を選びます

  • <head>と</head>の間に、以下を書き込みます。赤字はカードタイプ、青字はアカウントですので、適時直してください。
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@kait_cs' name='twitter:site'/>
<meta content='@kait_cs' name='twitter:creator'/>
<meta content='blog.cs.kanagawa-it.ac.jp' name='twitter:domain'/>
  • [テーマをプレビュー]で確認します。
  • [テーマを保存]で設定を保存します。

3. 検証ツールで確認します

  • 検証ツールのページに移動します(リンク)
  • 検証ツールのURL入力欄に記事のURLを入力し、[Preview]を押します。 
  • 以下のように、背景が黄緑色の文字が表示され、右側に記事のサンプルが表示されれば成功です

  • (昔は、この後、登録のボタンを押す必要があったようですが、現在は登録も済まされるようです。)
皆様のお役に立てれば幸いです。


0 件のコメント:

コメントを投稿