« Chef の database cookbook でハマった話 | メイン | DockerでLAMPサーバをつくる話 »

2014年8月22日 (金)

サブディレクトリ型の複数サイトでtwitter cardを設定した

こころです。番外編ネタですが、フレクトで運営しているブログにtwitter cardを設定してみました。

1.twitter cardって?

twitter cardとは自分のサイトにmetaタグを数行埋め込むと、twitterのタイムラインにメディア(カード)を添付できるサービスです。

20140822_113413_2

こんな感じ。

カードは7種類。
Summary Card・・・標準のカード(タイトル、ディスクリプション、サムネイル、サイトのTwitterアカウント)
Summary Large Image Card・・・標準カードの画像大きめ
Photo Card・・・写真を表示するカード
Gallery Card・・・写真の収集を目立たせるカード
Player Card・・・Youtube動画や音楽プレーヤーを埋め込むカード
App Card・・・アプリケーションを紹介するカード
Product Card・・・商品を見せるカード

今回はよく見かけるSummary Large Image Card(標準のカードの画像大きめ)を設定してみます。

2.準備

用意するもの

  1. WebKitを用いたブラウザ(GoogleChromeかSafari)
  2. twitterアカウント
  3. カードを埋め込むWebサイト

twitter cardのプレビュー機能がWebKitを用いたブラウザでしか動作しないのです。
また、今回はサブディレクトリで複数サイトを運用している場合に対応しました。

フレクトでは、

フレクトのクラウドブログ> http://blog.flect.co.jp/cloud/
セールスフォースの豆知識> http://blog.flect.co.jp/salesforce/
フレクトのHeroku Lab> http://blog.flect.co.jp/labo/

と3つのブログをサブディレクトリ型で運用してるのです。

http://blog.flect.co.jp/***/を切り分けるときにちょっと詰まったので、あまり居ないと思いますが同じ様なサイト運用してる人のために書いてみようと思います。

3.設定

https://dev.twitter.com/docs/cards/validation/validator

から、作成したいカードのタイプを選択します。

20140822_120236今回はSummary Large Imageを選択

次のCard Validator画面では、サイトに貼付けるmetaタグを生成するためのオプションを入力します。

20140822_134800

赤枠・・・入力必須
黄色枠・・・任意項目(スマートフォン画面に最適化するためのオプション項目です)

必須プロパティについて

twitter:card・・・cardの種類
twitter:site・・・twitter cardを作成するサイトオーナーのユーザ名
twitter:title・・・カードのタイトル
twitter:description・・・カードのメッセージ(200文字以内)
twitter:creator・・・ページのコンテンツ作成者のTwitterアカウント(twitter:siteと同じでもOK)

twitter:image:src・・・画像のURL (Summary Large Image)の場合は最低280×150px必要です。

twitter:domain・・・サイトのドメイン ※サブディレクトリ型の場合は注意が必要で、http://blog.flect.co.jp/labo/* と、ワイルドカードを設定するのがポイントです。
Update Previewボタンを押すとmetaタグが生成されるので、サイトの共通headerに追加します。

4.確認方法
Card ValidatorのValidate&Applyタブに、追加したサイトのURLを入力し、Goボタンを押します。

20140822_113310

<Your domain name> approved と表示されます。

20140822_112750

以上で設定完了ですが、設定しようとするとけっこう細かいエラーが出るので、こちらのFAQを参考にしてください。特に、Twitterのクローラーはおよそ週1回の割合でサイトのメタデータを再度取得するので、twitter cardに修正を加えた場合は反映されるまで時間がかかるようです。

コメント

コメントを投稿

採用情報

株式会社フレクトでは、事業拡大のため、
・Salesforce/Force.comのアプリケーション開発
・HerokuやAWSなどのクラウドプラットフォーム上での
Webアプリケーション開発
エンジニア、マネージャーを募集中です。

未経験でも、これからクラウドをやってみたい方、
是非ご応募下さい。

フレクト採用ページへ

会社紹介

株式会社フレクトは、
認定コンサルタント
認定上級デベロッパー
認定デベロッパー
が在籍している、セールスフォースパートナーです。
また、heroku partnersにも登録されています。
herokuパートナー
株式会社フレクトのSalesforce/Force.com
導入支援サービス
弊社の認定プロフェッショナルが支援致します。
・Visualforce/Apexによるアプリ開発
・Salesforceと連携するWebアプリ開発
も承っております。
セールスフォースご検討の際は、
お気軽にお問合せください。

2021年3月

  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
ブログ powered by TypePad