sns2

サーマリーカードについて

Twitterを使っていくにあたり、サーマリーカードという存在がある事を知りました。
いわゆるホームページのmetaデータに追加して、呼び込むタイプですがACT JAPANでは問題点がありました。
その問題点と導入した内容について軽く紹介していきたいと思います。

サーマリーカードを導入する上での問題点について

これはサーマリーカードを作る際に発覚した問題ですが、
そもそもTwitter用のmetaデータがホームページ内でページ作成とセットで組まれており(WordPressのテーマ上)、meta nameで書き換えが不可能な状態でした。

そこでmeta property(OGPタグ)というものを使用しました。
上記の問題点と同様にpropertyも記述されていましたが、
EC-CUBE内で再度OGPタグの設定する事により下記のサーマリーカードが出来上がりました。

EC-CUBEでのOGPタグ設定

EC-CUBEのブロック管理でOGPタグ専用のブロックを作成　→　ページのレイアウト編集で作成したブロックをheadに追加

実際のブロックのデータ

細かい内容は伏せますが、特定ページのheadタグ内にこういうブロックを設定しています。
内容自体はサーマリーカードの解説サイトから引用しました。

サーマリーカードの導入前と導入後

導入前

導入前はこんな感じで表現されていました。
このままだと特徴が無いので、URLを載せて宣伝してもツイートに目がいきにくいですよね…。

という事で下記内容に書き換えました。

導入後

ホームページのトップ画面にも実装していますが、導入前の説明文にプレミアムクロス各色の画像を配置しているだけなので省略します。