Twitterでシェアされた時に、価格や画像を表示させる方法
スポンサーリンク
Twitterボタンの実装はもはや常識となっていますが、Twitterにどう表示されるかまでもコントロールすれば、シェアの広がり方にも違いが出てきますよね。
Twitter Cardsという、Twitter用のmetaタグを追加すれば、以下のように商品情報を表示させることが可能です。
という訳で今回は、備忘録も兼ねてTwitterの表示のカスタマイズを紹介。
Twitter Cardsのしくみ
Twitter Cardsでは、<head>内でTwitter専用のmetaタグを指定することにより、Twitterでシェアされた際にサイト情報を詳しく表示させることが出来ます。Facebookでシェアされた時にも出るOGP等のしくみと似ています。
Twitter Cardsには現時点では7種類(+2種類の広告)のカードの種類があり、それぞれでmetaタグの指定方法や表示内容が微妙に異なります。
例えば、今回紹介する「Product(商品)」カードでは、商品用に特化された内容を出力することが出来ます。
「Product」カードでは、以下の内容が必須の指定内容です。
name | content(例) | 内容 |
---|---|---|
twitter:card | Product | 「商品」カードの指定 |
twitter:title | エストニアのうさぎさん | 商品名 |
twitter:description | 商品の説明(200文字まで) | |
twitter:image:src | http://demo.welcustom.net/wp/wp-content/uploads/EE-TX-002.jpg | 商品画像のURL(160px x 160px以上) |
twitter:data1 | 500円 | 価格・在庫状況・サイズなど |
twitter:label1 | price | data1が何を示しているのかを定義 |
twitter:data2 | H12cm x W5cm | 価格・在庫状況・サイズなど |
twitter:label2 | size | data2が何を示しているのかを定義 |
そして、必須ではないものの、指定できるタグもあります。
name | content(例) | 内容 |
---|---|---|
twitter:site | @welcustom | Twitterカードの所有者のTwitter名 |
twitter:creator | @welcustom | コンテンツ作成者のTwitter名 |
twitter:domain | welcustom.net | ドメイン |
Twitter Cardsメタタグの例:Welcartの商品ページの場合
Welcartでは様々な独自テンプレートタグが用意されていますので、今回は以下のように指定してみました。
name | contentに記載する内容(当サイトの例) |
---|---|
twitter:card | Product |
twitter:site | @welcustom |
twitter:creator | @welcustom |
twitter:title | usces_the_itemName(); |
twitter:description | setup_postdata( $post ); echo mb_substr(strip_tags(get_the_content()), 0, 200); |
twitter:image:src | usces_the_itemImageURL(0); |
twitter:data1 | usces_crform(usces_the_firstPrice(‘return’),true, false); |
twitter:label1 | Price |
twitter:data2 | get_post_meta($post->ID , ‘wccs_サイズ’ ,true); |
twitter:label2 | Size |
data2では、Welcartで指定できるカスタムフィールド(wccs_をプレフィックスとする、商品データ)の一つをピックアップし、「サイズ」として取得しています。この辺は、運用中のショップの商品データに合わせて適宜変更下さい。
※カスタムフィールドを出力させる場合、該当するカスタムフィールドが商品に設定されていない場合はエラーになるのでご注意下さい。
コードにすると、こんな感じになります。これを、<head>内に書き込めばOKです。※以下は例として当サイトのTwitterアカウントと上述のカスタムフィールドを入れています。
<meta name="twitter:card" content="product"> <meta name="twitter:site" content="@welcustom"> <meta name="twitter:creator" content="@welcustom"> <meta name="twitter:title" content="<?php usces_the_itemName(); ?>"> <meta name="twitter:description" content="<?php setup_postdata( $post ); echo mb_substr(strip_tags(get_the_content()), 0, 200); ?>"> <meta name="twitter:image" content="<?php usces_the_itemImageURL(0); ?>"> <meta name="twitter:data1" content="<?php usces_crform(usces_the_firstPrice('return'),true, false); ?>"> <meta name="twitter:label1" content="Price"> <meta name="twitter:data2" content="<?php echo get_post_meta($post->ID , 'wccs_サイズ' ,true); ?>"> <meta name="twitter:label2" content="Size">
商品ページでのみ出力させるために、if(is_single())などを使って、条件分岐をつけるといいでしょう。
ループ外で使えない関数への対応
descriptionにはthe_excerpt(抜粋)を使いたい気もしましたが、
- the_excerptやget_the_excerptはループ外では使えない
- the_excerptなどで商品情報の抜粋を出力すると、価格やカスタムフィールドの部分まで「内容」として出力されてしまう
ため、get_the_content(内容)から200字を抜き出し、htmlタグを取り除くPHPで書いています。
同様に、Welcartの独自テンプレートタグである、価格を表すusces_the_itemPrice()なども、どうもループ外ではうまく取得出来なかったため、上記のような書き方になっています。
※在庫状態を表すusces_the_itemZaiko()なども、ループ外だからかうまく取得できませんでした(在庫がなくても「在庫有り」になってしまう)。うまく取得出来れば、data2として利用してもよいと思います。
動作を確認
設定したTwitter Cardが正しく認識されるかは、Twitter Developpersの「カード・バリデータ」で確認出来ます。利用にはTwitterのアカウントが必要です。
このツールでは、URLを入力してTwitter Cardsの出力具合を確認出来るほか、実際にデータを入力してTwitter Cards用のmetaタグを生成することも出来ます。
まとめ
WordPressやWelcartのテンプレートタグの中には、ループ外では動かないものもあるため、metaタグでそれらを使いたい場合はややコツが要りました。
Twitterでシェアされた際に画像や商品名が出るだけで、やはりクリック率も変わってくると思います。Twitterのシェアボタンを導入しているなら、是非Twitter Cardsも取り入れてみて下さい。