実装手順 / metaタグ項目一覧表 / Sample Code

オンラインサービス に関するメモランダム

カテゴリー: Twitter  閲覧数:135 配信日:2016-11-07 22:13


実装手順


1.実装するカードタイプを上記4種類の中より選択
一般的には「Summaryカード」「大きな画像付きのSummaryカード」何れかを選択

2.適切なメタタグをWebページへ数行追加する
選択したカードタイプにより、記述内容は異なる

3.検証ツールで動作確認
URLを入力して実行してみる

4.実際にツイートして動作確認
URLを含むツイートを行い、ツイートの下にTwitterカードが表示されることを確認


metaタグ項目一覧表


項目一覧表
ユーザー名 … @hoge
項目 内容 具体例 必須任意 備考
twitter:card カード種類 ・summary
・summary_large_image
・app
・player
必須 ・ページごとにカードタイプを1つだけ設定できます
・ページに複数のtwitter:card値が存在する場合は、「最後に」来る値が優先されます
twitter:site ユーザー名 @hoge 任意 ・カードフッターで使用されるウェブサイトの@ユーザー名
・アナリティクスを使用して効果測定する場合に必要
twitter:creator コンテンツ作成者のユーザー名 ほげ 任意 コンテンツ作成者/著者の@ユーザー名
twitter:title タイトル タイトル 必須 -
twitter:description 説明 説明 任意 -
twitter:image ・ページのコンテンツを表す一意の画像URL
・Webサイトのロゴ、著者の写真など、複数ページにまたがる一般的な画像を使用しないでください
・このカードの画像は、最小寸法300x157または最大4096x4096ピクセルで2:1のアスペクト比をサポートします
・画像のサイズは5MB未満でなければなりません
・JPG、PNG、WEBP、およびGIF形式がサポートされています
・アニメーションGIFの最初のフレームのみが使用されます
・SVGはサポートされていません。
http://example.com/img.jpg 任意 -
twitter:image:alt ・画像の本質的な性質を視覚障害のあるユーザーに伝える画像のテキスト記述
・最大420文字
画像の説明 任意 -

Sample Code


ユーザー名 … @nytimes
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">


Summary with large image


週間人気ページランキング / 4-7 → 4-13
順位 ページタイトル抜粋 アクセス数
1 ビックカメラへの苦情連絡先 | ビックカメラ(EC) 62
2 Yahoo!メールで[SendMessageFailed]が表示される場合は、しばらく待ってから再度試す | Yahoo!メール(メール) 59
3 お使いのアカウントに不自然なアクティビティを検出しました。安全のため、パスワードが変更されるまでアカウントはロックしました。 | Twitter(social networking service) 45
4 Twitterモーメント作成しようと思い、自分の過去のツイートを遡る。途中までしか遡れない。面倒くさくなって止める | Twitter(social networking service) 23
5 Twitter全ツイート履歴は、2019年7月以降、ツールを使用しなければ取得不可能(index.htmlはダウンロードファイルに含まれないよう仕様変更されている) | Twitter(social networking service) 16
6 インターネットへ突然接続できなくなった理由は、NTTぷららのマイページのパスワードを変更したから | NTTぷらら(インターネットサービスプロバイダ) 11
6 このたび、ご利用のアカウントが凍結されましたのでお知らせしております | Twitter(social networking service) 11
7 Twitter 画像サイズの問題 | Twitter(social networking service) 10
8 Windows10で、Twitterタイムラインを一番下(最後)まで自動でスクロールする無料ソフトウェア「Twitterオートスクローラー」 | Twitter(social networking service) 6
8 social networking service カテゴリー 6
8 Amazonの「カスタマー Q&A」より製品に関する質問を行っても、回答がつくまで、投稿者自身も確認することは出来ない | Amazon(EC) 6
9 2019/11/28より「AGPtEK M20」を再度使用することにしたため、基本的な操作方法を再確認 | AGPtEK M20(MP3プレーヤー) 5
10 ラジオ(radikoのタイムフリー)を「Windows10」で録音するために、「らじれこ」を使用した | ラジオ 4
11 気になっているラジオCM | ラジオ 3
11 AGPTEK A01TM / 気になる点。まだ良く分かっていない点 | AGPTEK A01TM(MP3プレーヤー) 3
11 Twitter電話番号認証を回避する方法は、2016年10月18日時点で存在しない。探し回るだけ時間のムダかも? / 「Andy46.14.616」✕「Nextplus4.1」の結果はNG | Twitter(social networking service) 3
11 YouTube 動画仕様 | YouTube(動画) 3
11 オンラインサービス 0 3
11 「民事再生法の適用申請結果」を官報で確認できるが、 (インターネット版)官報は、直近1ヶ月分しか無料閲覧できない | 政府系 3
11 ログイン 3
2021/4/14 1:01 更新
指定期間人気ページランキング / 2020-5-27 → 2021-4-13
順位 ページタイトル抜粋 アクセス数
1 Twitter全ツイート履歴は、2019年7月以降、ツールを使用しなければ取得不可能(index.htmlはダウンロードファイルに含まれないよう仕様変更されている) | Twitter(social networking service) 3056
2 Yahoo!メールで[SendMessageFailed]が表示される場合は、しばらく待ってから再度試す | Yahoo!メール(メール) 2005
3 Twitterモーメント作成しようと思い、自分の過去のツイートを遡る。途中までしか遡れない。面倒くさくなって止める | Twitter(social networking service) 1593
4 ビックカメラへの苦情連絡先 | ビックカメラ(EC) 1250
5 お使いのアカウントに不自然なアクティビティを検出しました。安全のため、パスワードが変更されるまでアカウントはロックしました。 | Twitter(social networking service) 438
6 ラジオ(radikoのタイムフリー)を「Windows10」で録音するために、「らじれこ」を使用した | ラジオ 291
7 Twitter 画像サイズの問題 | Twitter(social networking service) 268
8 このたび、ご利用のアカウントが凍結されましたのでお知らせしております | Twitter(social networking service) 190
9 オンラインサービス 0 172
10 FLAC → MP3変換 | オンラインオーディオコンバーター(音) 155
11 Windows10で、Twitterタイムラインを一番下(最後)まで自動でスクロールする無料ソフトウェア「Twitterオートスクローラー」 | Twitter(social networking service) 151
12 AGPTEK A01TM / 気になる点。まだ良く分かっていない点 | AGPTEK A01TM(MP3プレーヤー) 104
13 ビックカメラの配達受け取りは、「郵便ポスト投函」を指定できない | ビックカメラ(EC) 102
14 Amazonの「カスタマー Q&A」より製品に関する質問を行っても、回答がつくまで、投稿者自身も確認することは出来ない | Amazon(EC) 92
15 インターネットへ突然接続できなくなった理由は、NTTぷららのマイページのパスワードを変更したから | NTTぷらら(インターネットサービスプロバイダ) 88
16 2019/11/29 11:46、AGPtEK C8-JP を受け取る  | AGPtEK C8-JP(MP3プレーヤー) 86
16 Unsupported phone number. | Twitter(social networking service) 86
17 Twitterから思うようにデータを取得できないためツラい | Twitter(social networking service) 84
18 ログイン 79
19 受信メール「あなたのAmazonアカウントはセキュリティ上の理由で中断されました」内に表示されたリンクをクリックしたため、メールアドレスを変更 | Amazon(EC) 76
2021/4/14 1:01 更新