Twitterでシェアされた時に、価格や画像を表示させる方法

スポンサーリンク

Twitterボタンの実装はもはや常識となっていますが、Twitterにどう表示されるかまでもコントロールすれば、シェアの広がり方にも違いが出てきますよね。

Twitter Cardsという、Twitter用のmetaタグを追加すれば、以下のように商品情報を表示させることが可能です。

Twitter Cardsの例

という訳で今回は、備忘録も兼ねてTwitterの表示のカスタマイズを紹介。

Twitter Cardsのしくみ

Twitter Cardsでは、<head>内でTwitter専用のmetaタグを指定することにより、Twitterでシェアされた際にサイト情報を詳しく表示させることが出来ます。Facebookでシェアされた時にも出るOGP等のしくみと似ています。

Twitterカード(Twitter developpers)

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のアカウントが必要です。

Card Validator (Twitter Developpers)

このツールでは、URLを入力してTwitter Cardsの出力具合を確認出来るほか、実際にデータを入力してTwitter Cards用のmetaタグを生成することも出来ます。

まとめ

WordPressやWelcartのテンプレートタグの中には、ループ外では動かないものもあるため、metaタグでそれらを使いたい場合はややコツが要りました。

Twitterでシェアされた際に画像や商品名が出るだけで、やはりクリック率も変わってくると思います。Twitterのシェアボタンを導入しているなら、是非Twitter Cardsも取り入れてみて下さい。

コメントは受け付けていません。

Copyright© 2017 Welcart カスタマイズ ブログ All Rights Reserved.