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

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

カテゴリー: Twitter  閲覧数:559 配信日: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


週間人気ページランキング / 6-25 → 7-1
順位 ページタイトル抜粋 アクセス数
1 「mmpx12 / twitter-media-downloader」は 52 件しか一括ダウンロードできません | X 30
2 「楽天トラベル」の宿泊履歴は 3 年経過すると削除されるため、注意が必要です。 | 旅行 10
2 このエントリーの結論 / Xから一括ダウンロードするまでの手順 / 52 件しかダウンロードされない 10
3 ソフトバンクの携帯電話番号は「My SoftBank」から無料で変更できます。※My SoftBankから電話番号の変更手続きをする場合には、料金(事務手数料)の発生はありません | ソフトバンク(通信) 9
4 LINEヤフー共通利用規約に反する行為を確認したため、この携帯電話番号は利用できません / 感想 5
4 「LINEヤフー共通利用規約に反する行為を確認したため、この携帯電話番号は利用できません」と表示される | Yahoo!メール(メール) 5
4 AGPTEK A01TM / 気になる点。まだ良く分かっていない点 | AGPTEK A01TM(MP3プレーヤー) 5
4 Twitter Image Downloader バージョン 2.2.10 | X 5
4 Xの「矢印を使い、指示された席に人物を移動させてください。」は縦横アイコンを合わせる方式 | X 5
5 デスクトップ vs モバイル / 600×335 vs 506×253 / そもそも論として 4
5 「Twitterデータ」をダウンロード出来ない。途中で失敗する。ネットワークエラーが発生する | Twitter 4
6 MP3プレーヤー カテゴリー 3
6 「お客様電話番号等が不正です。」と「NTT東日本のWebページでエラー表示」された場合は、「お客様ご請求番号」を入力する | コミュニケーション ツール(social networking service) 3
6 身に覚えがない「下書きメール」と「受信メール」があったので、「Yahoo!メール」のパスワードを変更しました。 | Yahoo!メール(メール) 3
6 「NTTぷららがイケていない」と私が思う4つの理由 | NTTぷらら(インターネットサービスプロバイダ) 3
6 Twitter 画像サイズの問題 | Twitter 3
6 「ツイートの一括削除ツール!」では、「返信ありツイート」と「いいねされたツイート」を除外して一括削除することはできません。 | ツイート削除(Twitter) 3
6 「教えて!goo」へ投稿した質問に対する著作権は、質問者にはありません。投稿した時点で「エヌ・ティ・ティレゾナント株式会社」および「株式会社オウケイウェイヴ」に帰属します。 | 教えて!goo(Q&Aサイト) 3
6 Twitter 利用規約 | Twitter 3
7 2019/11/28より「AGPtEK M20」を再度使用することにしたため、基本的な操作方法を再確認 | AGPtEK M20(MP3プレーヤー) 2
2025/7/2 1:02 更新
指定期間人気ページランキング / 2020-5-27 → 2025-7-1
順位 ページタイトル抜粋 アクセス数
1 ビックカメラへの苦情連絡先 | ビックカメラ(EC) 7929
2 Twitter全ツイート履歴は、2019年7月以降、ツールを使用しなければ取得不可能(index.htmlはダウンロードファイルに含まれないよう仕様変更されている) | Twitter(social networking service) 3973
3 Twitter動画ダウンロード | Twitter(social networking service) 3768
4 Yahoo!メールで[SendMessageFailed]が表示される場合は、しばらく待ってから再度試す | Yahoo!メール(メール) 3428
5 「Twitterデータ」をダウンロード出来ない。途中で失敗する。ネットワークエラーが発生する | Twitter(social networking service) 3146
6 Xの「矢印を使い、指示された席に人物を移動させてください。」は縦横アイコンを合わせる方式 | X 2242
7 Twitterモーメント作成しようと思い、自分の過去のツイートを遡る。途中までしか遡れない。面倒くさくなって止める | Twitter(social networking service) 2096
8 Twitter 画像サイズの問題 | Twitter(social networking service) 1453
9 「mmpx12 / twitter-media-downloader」は 52 件しか一括ダウンロードできません | X 1418
10 オンラインサービス 0 1392
11 ソフトバンクの携帯電話番号は「My SoftBank」から無料で変更できます。※My SoftBankから電話番号の変更手続きをする場合には、料金(事務手数料)の発生はありません | ソフトバンク(通信) 1378
12 お使いのアカウントに不自然なアクティビティを検出しました。安全のため、パスワードが変更されるまでアカウントはロックしました。 | Twitter(social networking service) 1215
13 Amazon Music「まだ再生中ですか?」問題 | Amazon Music(Amazon) 1103
14 Amazonの「カスタマー Q&A」より製品に関する質問を行っても、回答がつくまで、投稿者自身も確認することは出来ない | Amazon(EC) 1006
15 Windows10で、Twitterタイムラインを一番下(最後)まで自動でスクロールする無料ソフトウェア「Twitterオートスクローラー」 | Twitter(social networking service) 988
16 3 種類ある「楽天カード」利用明細確認方法の内、「楽天e-NAVI」の「Web明細サービス」だけは、過去 15 カ月以前の情報が表示されないため注意が必要です。 | カード 880
17 「Google Chrome」ブラウザで「Yahoo!メール」を開くと「読み込み中」が耐え切れないほど長いです。検索してみましたが、解決する方法が分かりません。 | Yahoo!メール(メール) 749
18 インターネットへ突然接続できなくなった理由は、NTTぷららのマイページのパスワードを変更したから | NTTぷらら(インターネットサービスプロバイダ) 708
19 「楽天トラベル」の宿泊履歴は 3 年経過すると削除されるため、注意が必要です。 | 旅行 684
20 故障した小型冷蔵庫(46L)をどうするの? | 冷蔵庫(購入履歴) 649
2025/7/2 1:02 更新