PlusOne Blog

前回はtwitterカードを設定する方法を紹介しました。
これは、ますは基本ということで、固定ページの場合の設定方法を紹介しました。
今回は、投稿ページの場合の設定方法を紹介します。
　

　
　
twitterカードを利用するには、以下のmetaをhead内に記述するので、
これを投稿ページ用に変更していきます。
=====================
<meta name=”twitter:card” content=”●●●●●●●●●” /> —①
<meta name=”twitter:site” content=”●●●●●●●●●”> —②
<meta name=”twitter:title” content=”●●●●●●●●●”> —③
<meta name=”twitter:description” content=”●●●●●●●●●”> —④
<meta name=”twitter:image” content=”●●●●●●●●●”> —⑤
=====================
　
①表示するtwitterカードの形式
　★→これは、投稿内容に依存しないので、そのまま「summary」または「summary_large_image」を記述します。
　=====================
　（例）
　<meta name=”twitter:card” content=”summary” />
　=====================
　
②Twitterのユーザー名
　★→これも、投稿内容に依存しないので、そのままtwitterにユーザー名を記述します。
　=====================
　（例）
　<meta name=”twitter:site” content=”@p1tweet1″>
　=====================
　
③Twitterカードに表示されるタイトル
　★→投稿ページのタイトルを表示させたいので、テンプレートタグ「the_title()」を使って投稿ページのタイトルを取得して記述します。
　=====================
　（例）
　<?php if ( have_posts() ) : ?>
　　 <meta name=”twitter:title” content=”<?php the_title(); ?>” />
　<?php endif; ?>
　=====================
　
④Twitterカードに表示される説明文
　★→投稿ページの内容を表示させたいので、テンプレートタグ「get_the_excerpt()」を使って投稿ページの内容を抜粋して取得して記述します。（テンプレートタグ「the_excerpt() 」を使用すると、pタグが付いてくるので、Pタグが付いてない「get_the_excerpt()」を使用します。）
　★→テンプレートタグ「get_the_excerpt()」の使いかたに注意が必要です。
　　・ループの中で使用する必要があります。
　　・echo で取得内容を表示する必要があります。
　=====================
　（例）
　<?php if ( have_posts() ) : ?>
　　<?php while( have_posts() ) : the_post(); ?>
　　　<meta property=”twitter:description” content=”<?php echo get_the_excerpt(); ?>” />
　　<?php endwhile;?>
　<?php endif; ?>
　=====================
　
⑤Twitterカードに表示される画像
　★→投稿ページのアイキャッチ画像を表示させたいので、次のように記述します。
　★→アイキャッチ画像を設定したない場合は、指定の画像が表示されるようにします。
　=====================
　（例）
　<?php if ( have_posts() ) : ?>
　　<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 bloginfo(‘template_url’) . “/img/noimage.png”;
　　　endif;
　　?>” />
　<?php endif; ?>
　=====================
　
　
①~⑤をまとめると下記のようになります。
　=====================
　<meta name=”twitter:card” content=”summary” />
　<meta name=”twitter:site” content=”@p1tweet1″>
　<?php if ( have_posts() ) : ?>
　　<?php while( have_posts() ) : the_post(); ?>
　　　<meta name=”twitter:title” content=”<?php the_title(); ?>” />
　　　<meta property=”twitter:description” content=”<?php echo get_the_excerpt(); ?>” />
　　　<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 bloginfo(‘template_url’) . “/img/noimage.png”;
　　　　endif;
　　　?>” />
　　<?php endwhile;?>
　<?php endif; ?>
=====================
　
　
実際にどのようにtwitterカードが表示されるかを、次のサイトで確認します。
Card validator

前回はtwitterカードについて紹介しました。
今回は、そのtwitterカードを設定する方法を紹介します。
　
　
head内にmetaタグとして、下記の記述を追加する。
=====================
<meta name=”twitter:card” content=”●●●●●●●●●” /> —①
<meta name=”twitter:site” content=”●●●●●●●●●”> —②
<meta name=”twitter:title” content=”●●●●●●●●●”> —③
<meta name=”twitter:description” content=”●●●●●●●●●”> —④
<meta name=”twitter:image” content=”●●●●●●●●●”> —⑤
=====================
　
①
表示するtwitterカードの形式を設定します。
カードの種類ごとに下記値を入れます。
Summary Card（画像が小さいカード）は「summary」を、summary_large_image（画像が大きいカード）は「summary_large_image」を設定します。
=====================
（例）
<meta name=”twitter:card” content=”summary” />
=====================
　
②
Twitterのユーザー名を指定します。
=====================
（例）
<meta name=”twitter:site” content=”@p1tweet1″>
=====================
　
③
Twitterカードに表示されるタイトルを設定します。
=====================
（例）
<meta name=”twitter:title” content=”株式会社プラスワン”>
=====================
　
④
Twitterカードに表示される説明文を設定します。
文字数制限はありませんが、実際にtwitterカードに表示される文字数までしか表示されません。
=====================
（例）
<meta name=”twitter:description” content=”株式会社プラスワンは介護保険業務支援ソフトウェア「SmileOneシリーズ」の開発、販売を行っています。”>
=====================
　
⑤
Twitterカードに表示される画像を設定します。
=====================
（例）
<meta name=”twitter:image” content=”/img/SmileLauncher.jpg”>
=====================
　
①~⑤をまとめると下記のようになります。
=====================
<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:site” content=”@p1tweet1″>
<meta name=”twitter:title” content=”株式会社プラスワン”>
<meta name=”twitter:description” content=”株式会社プラスワンは介護保険業務支援ソフトウェア「SmileOneシリーズ」の開発、販売を行っています。”>
<meta name=”twitter:image” content=”/img/SmileLauncher.jpg”>
=====================
　
★→これをhead内に記述します。
　
　
実際にどのようにtwitterカードが表示されるかを、次のサイトで確認できます。
Card validator

twitterでURLリンクをつけてツィートするとき、画像とリンク先ページの簡単な説明のカードが表示されることがあります。

このカードを「twitterカード」と呼びます。
　
「twitterカード」が表示されると、ユーザーは視覚的に興味を持ち、サイトの説明も表示されるので、クリックしやすくなりますので、ぜひ「twitterカード」を使用することをおすすめします。
　
なお、「twitterカード」は、リンク先のコンテンツで設定しておかないと表示されません。
　
　
■twitterカードの種類
twitterカードには４種類あります。うち、通常のwebコンテンツに関しては２種類あります。

・Summary Card

　
・Summary Card with Large Image

　
・他に「アプリ配布用」と「動画サイト用」の２種類があるが、今回は割愛
　
　
■どっちのタイプを使えばいい？
どっちのタイプが良いかという明確な線引きはありませんが、
一般的に、使用する画像を綺麗で見せたいものであれば、「Summary Card with Large Image」タイプを、
使用する画像が解像度等が悪く綺麗でなければ、ユーザーもクリックしたくなくなりますので、「Summary Card」タイプを、
使用します。
　
wordpressの投稿ページの場合は、アイキャッチ画像が表示されます。投稿する内容により、画像も色々なものになりますので、「Summary Card」タイプをおススメします。