WordPressでTwitterカードを追加する方法

2017年8月4日Twitter, wordpress

Twitterイメージ

こんばんは、ゆきです!

僕はWordpressのデフォルトテーマであるTwentyseventeenというテーマでこのサイトを運営しています。

サイトの記事の更新状況をよくTwitter上でつぶやくのですが、昔はURLだけが表示される状況でした。

でも、よくTwitterでつぶやきの中にブログやニュースサイト記事が写真付きで紹介されることがありますよね?

下みたいなやつ。

これをTwitterカードというのですが、今回Twentyseventeen上でTwitterカードを実装したのでその実装方法について紹介したいと思います。
ちなみにAll in One SEOを使った方法ではなく、テンプレートいじってます。その理由は最後に追記しました。

Twitterカード登録前に調べておかないといけないこと

Twitterカードの登録は、各ページのメタタグにいくつか記述を追加することで実現可能です。Twitterのデベロッパードキュメントによれば、必要な情報は以下の通り。

メタタグ 説明 設定例
Twitter:card  Twitterカードのタイプsummaryまたはsummary_large_image。  summary
Twitter:site  Twitterのユーザーネーム  @Yuki_no_yabo
Twitter:title  記事のタイトル  冒頭のTwitterカードのケースは”妻のひび・あかぎれが洗剤を変えたら治った話”
Twitter:description  記事の概要  冒頭のTwitterカードのケースは”毎日の食器洗いで~”
Twitter:image  記事のイメージ画像  必須ではないですが、画像がある方がクリック率が良くなるので必ず設定します

Twitter:titleとTwitter:description、Twitter:imageの3つは動的に生成します。

ちなみに冒頭の私のイメージがsummaryで、summary_large_imageは次のような内容になります。

WordPressテーマにメタタグを追加する

WordPressはheader.phpに以下のメタタグを追加します。
必ず<header></header>タグの中に収まるように追記してください

ちなみに後述するAll in One SEOのお陰でトップページはメタタグが張られているので、個別の記事だけメタタグを追加するようにis_single()で個別の記事かどうかを確認しています。

<?php if(is_single()): ?> 
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@Twitterのユーザ名" />
<meta name="twitter:title" content="<?php the_title(); ?>" />
<meta name="twitter:description" content="<?php 
echo get_post_meta($post->ID, _aioseop_description, true);
 ?>" />
<meta name="twitter:image" content="<?php
	if(has_post_thumbnail( $post->ID )):
		$thumbnail_id = get_post_thumbnail_id(); 
		$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , 'thumbnail' );
		echo $thumbnail_img[0];
	else:
		echo "イメージがない時に表示する画像";
	endif;
?>" />
<?php endif; ?>

以下のタグはそのページのタイトルを呼び出しています。

<meta name="twitter:title" content="<?php the_title(); ?>" />

以下のタグでは、投稿記事のAll in One SEOで追記している要約を取得しています。もし、All in One SEOを使用していないのであれば、echoの行をthe_exerpt();にすればよいかと思います。

<meta name="twitter:description" content="<?php 
echo get_post_meta($post->ID, _aioseop_description, true);
 ?>" />

イメージタグはサムネイルを取得するようにしています。サムネイルがない場合には指定した画像を表示するように設定していますが、Twitterも画像がない場合の画像があるので、お好みで。

<meta name="twitter:image" content="<?php
	if(has_post_thumbnail( $post->ID )):
		$thumbnail_id = get_post_thumbnail_id(); 
		$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , 'thumbnail' );
		echo $thumbnail_img[0];
	else:
		echo "イメージがない時に表示する画像";
	endif;
?>" />

以上を記述したheader.phpをサーバにアップロードすれば完成です。

Twitterカードが設定できているかを確認する

TwitterのDeveloperサイトにアクセスして、Card validatorで表示内容を確認します。

アクセスすると次のような画面になるので、Card URLの所に確認したい記事のURLを入力しましょう。

Twitter card validator

下記のように表示されれば成功です。画像の反映には時間がかかるので、もし画像が表示されないのであれば暫く待ってからアクセスしましょう

Twitter cardの設定成功例

あとはツイッターでつぶやくときに、記事URLと伴に呟くだけで上記のようなTwitterカードが自動的に挿入されますよ!(*´ω`*)

Twitterカード登録前に調べたこと・出来なかったこと

初めての実装じゃないですか。

簡単にできる方法調べるじゃないですか。

Googleさんに伺っていくつかのサイトを巡回したら、All in One SEOの設定で出来るという情報を得たんです。

で、一生懸命設定したわけです。

結論から言うと、設定しても何故かインデックスページ以外にmetaタグが追加されませんでした…。結構いじってるからなのかなー。Pro版じゃないからかなー…。

ちなみに下記手順で設定しています。

All in One SEOのソーシャル設定
All in One SEOのソーシャル設定はデフォルトでは有効にされていないので機能管理で有効にする。
Twitterカードの設定
All in One SEOのTwitterカードの設定。冒頭の設定とほぼおなじ。ドメインにはhttp://を抜いたURLを設定する。

これらの設定を行ったあと、他のサイトの説明では投稿の所にソーシャルというタブが出るとのことなんですが、これが出ないんですよね。不思議。

この原因はよく判らん…。

以上っ!

 

ブログ運営

Posted by