2017/08/20
マテリアルなら簡単にTwitterカード機能を実装することが出来ます。
sponsored link
Twitterカードとは？
Twitterカードというのは、webページからツイートした際、そのツイートにページ情報(アイキャッチ画像やDescriptionなど）が勝手に添付されるやつです。こういうの。↓
[share]新しいテーマってだけでワクワクする！(ฅ'ω'ฅ)♪
→WordPressテーマ『マテリアル』を間もなくリリースします！ | ブログ用WordPressテーマ マテリアル http://t.co/zigqqpYchn
— あめたま (@ametama_l2l) 2015, 3月 20
参考：Twitterカード | Twitter Developers
この機能を使う為には、以下の二点が必要です。
- headタグ内に、Twitter Cardに表示したい情報を指定のフォーマットに則った形（metaタグ）で書いておく
- Card Validatorにてブログを申請する
※追記2015/5/11
Card Validatorへの申請は必要なくなったとの情報が寄せられました。確かめていませんのでよく分かりませんが。
metaタグを自動出力
マテリアルなら、headタグ内に以下のようなmetaタグが自動的に出力されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- ogp --> <meta property="og:title" content="ブログ用WordPressテーマ マテリアル" > <meta property="og:type" content="blog" /> <meta property="og:description" content="無料の割に高機能なブログ用WordPressテーマ マテリアルについての解説サイトです"> <meta property="og:url" content="http://wp-material.net/" > <meta property="og:image" content="http://wp-material.net/wp/wp-content/uploads/2015/03/material-logo-square.png" > <meta property="og:site_name" content="ブログ用WordPressテーマ マテリアル" > <meta property="fb:app_id" content="" > <!-- twitter card --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="https://twitter.com/Nobuo_create"> |
それぞれのページが持つ情報を勝手に出力してくれます。便利です。が、一番下のtwitter:siteというのを出力する為に一つだけやってほしいことがあります。
テーマカスタマイザー（外観→カスタマイズ）のsns設定の中のTwitterアカウントの欄にあなたのTwitterアカウントを入力して、保存して公開をクリックして下さい。
これでmetaタグの出力に関しては完璧です。
Card Validatorにあなたのブログを申請
あともう一つTwitterカードを使う為にしなければならないことは、Card Validatorであなたのブログを申請することです。１分もあれば出来るのでサクッとやってしまいましょう。
Card Validatorにアクセスします。
あなたのブログのURLを入力して、Preview cardボタンをクリックします。
すると、あなたのブログからTweetした場合に表示されるTwitterカードをプレビューすることが出来ます。が、まだこの段階では完了していません。
Request Approvalというボタンが表示されていると思うのでそれをクリックして下さい。
するとTwitterアカウント情報、及びwebサイト（ブログ）情報についての入力欄が表示されるので、適当に入力してから改めてRequest Approvalをクリックしてください。
以上でTwitterカード機能の為の作業は完了です。実際Twitterカードが表示されるには、申請してから少々時間がかかることもあると思います。
アイキャッチ画像について
記事ページをTwitterでシェアしてもらった場合は、当然その記事のアイキャッチ画像が、Twitterカードのアイキャッチ画像として使われます。
しかしindexページ（トップページやカテゴリーページなど）の場合は、アイキャッチ画像なんて無いですよね？
その場合は、ブログのロゴ画像がアイキャッチとして採用されます。
ロゴ画像って何かと言うと、テーマカスタマイザー（外観→カスタマイズ）の中にロゴ、ファビコン設定ってのがあります。そこでロゴ画像を登録出来るようになっていますのでご活用下さい。
コメント
Card Validatorでの申請は、しないでよくなったみたいですよ。
https://dev.twitter.com/ja/cards/overview
日本語ページでは申請するように書いてあるけど、英語ページに必要なくなったって書いてあります。
http://wpblog.sara2jp.com/2015/wp-twittercard-setting/#Card_validator
by さらさらり 2015年5月9日 7:59 PM
情報ありがとうございます。
追記しておきます。
by nobuo@管理人 2015年5月11日 11:30 PM
はじめまして。ワードプレス初心者です。マテリアルを使わせていただいているのですが、テーマカスタマイザーから、Twitterのアカウントをいれて保存公開しました。サイト上には、きちんとTwitterは表記されています、ただ、ヘッダーをみてみると、<meta name="twitter:site" content="https://twitter.com/“>となっているので、Card Validatorに申請してもエラーとなってしまいます。
部分に、自分でURLを手入力するってことですか？ご回答頂けたら幸いです。
by ゆう 2016年6月21日 9:29 PM
たびたびすみません。コメント欄をみると、わたしのTwitterに飛ぶようになっているので、お手数ですが、コメントを削除していただけますか。わからないことだらけですみません、お手数をおかけしますが宜しくお願いします
by ゆう 2016年6月21日 9:33 PM
＞ゆうさん
＞わたしのTwitterに飛ぶようになっているので
大丈夫です。私のTwitterに飛ぶのは私だけです。
カスタマイザーでアカウントを入力すれば自動的にmetaタグに出力されるはずなのですが？？
by nobuo@管理人 2016年6月22日 8:56 AM
ご回答ありがとうございます。
＞わたしのTwitterに飛ぶようになっているので
大丈夫です。私のTwitterに飛ぶのは私だけです。
そうなんですね、知りませんでした。ありがとうございます。
やはりカスタマイザーにアカウトを入力しても自動的にmetaタグには出力されていないです。
<meta name="twitter:site" content="https://twitter.com/の後ろの部分は、
“>となっています。
試しに自分でtwitter_accountの箇所に自分のアカウントを上書きしてみたんですが、
Card Validatorに申請してもエラーとなってしまいます。
by ゆう 2016年6月22日 11:06 AM
＞試しに自分でtwitter_accountの箇所に自分のアカウントを上書きしてみた
↑これは具体的に何をされたのですか？？
by Nobuo@管理人 2016年6月22日 12:19 PM
ヘッダーの<meta name="twitter:site" content="https://twitter.com/の後ろの部分は、
” >と、なっています。
コメントすると、なぜか伝えたい部分が消えていたので、ブランクをいれて
表示しました。
＞試しに自分でtwitter_accountの箇所に自分のアカウントを上書きしてみた
↑これは具体的に何をされたのですか？？
自分のTwitterのアカウントを上書きしたと言う意味です。
たびたびすみません。
by ゆう 2016年6月22日 4:40 PM
やはり、コメント送信すると、なぜか伝えたい部分が消えてしまいます。
by ゆう 2016年6月22日 4:42 PM