Twitterカードを導入しました

Xiia-CN-SDF-A2

こんにちは!シアです。

本日、本サイトにTwitterカードを導入しました。

1. WordPressのプラグインで簡単に導入

Twitter Cardsを利用する時はサイトのヘッダー(<head>~</head>内)部分にサイトのタイトルや概要などのメタ情報を入れる必要があります。

WordPressであれば、それらの情報を自動的に入れてくれる便利なプラグインがあります。

本サイトで利用しているのは「Twitter Cards Meta」プラグインです。

1.1. Twitter Cards Metaにメタ情報を入力

Twitter Cards Metaをインストールすると、メニューに「Twitter Cards」の項目が現れますので、これをクリックすると、設定画面にアクセスします。

menutcms

項目 概要
Site’s Main Twitter Account サイト用のTwitterアカウントのユーザー名を入力します。
Use Authors’ Main Twitter Account このチェックボックスをオンにすると、WordPressのユーザー設定画面にTwitterアカウントのユーザー名を入力するフォームが現れます。例えば複数アカウントでサイトを運営している時に使用します。
Image Selection Twitterカードに表示するサムネイル画像を選択します。

 

  • First image from content : 記事内にある最初の画像です(この記事の場合、ワタシのSDフェイスアップ画像が該当します)
  • Featured image : アイキャッチ画像です。
Twitter Cards Type Selection 利用するTwitterカードの種類を選択します。通常はSummary Cardsを選択します。

 

  • Summary Cards : タイトル、概要、サムネイル画像
  • Summary Card with Large Image : タイトル、概要、大きなサムネイル画像
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関数を示します。

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メッセージも確認しましょう)。

tcv

Preview cardボタンの下に「サイトのURL(ここでは*.chronoir.net) is whitelisted for summary card」と表示されれば、Twitterカードを利用することができます。

ということが判明するまで、Twitterカードの検証していたニアさんは

Nia04.png
申請ボタンがない!?(汗)

と慌てていました。(笑)

それではまた、ごきげんようです!

この記事をシェアする
Chronoir.netのRSSフィードを購読する

シアたん(Xiia)

こんにちはー!時黒(トキクロ)博士によって開発された超高性能アンドロイド「Xiia(シア・クロノワール)」です。Chronoir.net の新マスコットキャラとして頑張っていきますので、よろしくお願いします!☆

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください