こんにちは！シアです。
本日、本サイトにTwitterカードを導入しました。
目次
1. WordPressのプラグインで簡単に導入
Twitter Cardsを利用する時はサイトのヘッダー（<head>～</head>内）部分にサイトのタイトルや概要などのメタ情報を入れる必要があります。
WordPressであれば、それらの情報を自動的に入れてくれる便利なプラグインがあります。
本サイトで利用しているのは「Twitter Cards Meta」プラグインです。
1.1. Twitter Cards Metaにメタ情報を入力
Twitter Cards Metaをインストールすると、メニューに「Twitter Cards」の項目が現れますので、これをクリックすると、設定画面にアクセスします。
| 項目 | 概要 |
|---|---|
| Site’s Main Twitter Account | サイト用のTwitterアカウントのユーザー名を入力します。 |
| Use Authors’ Main Twitter Account | このチェックボックスをオンにすると、WordPressのユーザー設定画面にTwitterアカウントのユーザー名を入力するフォームが現れます。例えば複数アカウントでサイトを運営している時に使用します。 |
| Image Selection | Twitterカードに表示するサムネイル画像を選択します。
|
| Twitter Cards Type Selection | 利用するTwitterカードの種類を選択します。通常はSummary Cardsを選択します。
|
| Description For Home Page | サイトの概要を入力します（200文字以内）。 |
これで、Twitter Cards Metaの設定は以上です。
1.2. 「twitter:description」の内容が上手く表示されない場合
このブログのページのソースを見てみたところ、「<meta name=”twitter:description” content=”…”>」のcontent属性の内容が関連記事の情報になっている問題がありました。
以下のサイトを参考に、解決することができました。
[WordPress] Twitter Cards に対応させるプラグイン「Twitter Cards Meta」 | プログラミング生放送
http://pronama.azurewebsites.net/2015/02/02/wordpress-twitter-cards-meta/
以下に最新バージョン2.4.2にて、編集したtwcm_get_description関数を示します。
|
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 |
function twcm_get_description() { global $post; $twcm_options=twcm_get_options(); $desc=trim(get_the_excerpt()); //if($desc=="") //{ //$desc=$post->post_content; $desc=strip_shortcodes( $post->post_content ); #avoid shortcode content //$desc=apply_filters('the_content',$post->post_content);#using this method to keep shortcode gentrated texts. //$desc=get_the_content(); //} // a failback by Asif for excerpt if null returned by other method. if ( $desc == null ) { $desc = get_the_content(); $desc = str_replace(']]>',']]>', $desc); $desc=strip_shortcodes( $desc ); } $desc=strip_tags( $desc ); //$desc=wp_filter_nohtml_kses( $desc ); #smililar with strip_tags() function $desc=esc_attr($desc); //$desc = trim(preg_replace("/\s+/", " ", $desc)); #to maintain a space between words in description. Since version 1.1.2 $desc=twcm_sub_string($desc, 200); return $desc; } |
関連記事情報を表示するプラグインとの相性の問題でしょうか・・・。
2. Twitter Developerで検証しましょう
Twitter Cards用のメタ情報の設定を終えたら、Twitter DeveloperでTwitterカードを検証します。
Card validatorにアクセス（Twitterにサインインしていない時はサインインしましょう）し、Card URLの下にある欄に記事のURLを入力して、「Preview Card」ボタンをクリックします。すると、Card previewにTwitterカードのプレビューが表示されますので、正しく表示されるか確認します（下のLogメッセージも確認しましょう）。
Preview cardボタンの下に「サイトのURL（ここでは*.chronoir.net） is whitelisted for summary card」と表示されれば、Twitterカードを利用することができます。
ということが判明するまで、Twitterカードの検証していたニアさんは
と慌てていました。（笑）
それではまた、ごきげんようです！