[{"data":1,"prerenderedAt":768},["ShallowReactive",2],{"guide-twitter-card-meta-tags":3},{"id":4,"title":5,"body":6,"date":759,"description":760,"extension":761,"meta":762,"navigation":763,"path":764,"readingTime":621,"seo":765,"stem":766,"__hash__":767},"guides\u002Fguides\u002Ftwitter-card-meta-tags.md","Twitter Card Meta Tags Guide",{"type":7,"value":8,"toc":752},"minimark",[9,13,18,21,97,112,116,119,232,238,327,330,401,415,419,422,495,500,504,507,688,691,695,698,737,740,748],[10,11,12],"p",{},"When someone shares your URL on Twitter (now X), the platform reads specific meta tags to decide whether to show a plain text link or a rich card with an image, title, and description. These Twitter Card meta tags are separate from Open Graph tags, though Twitter falls back to OG tags when Card-specific ones are missing. Getting them right means your links stand out in feeds and attract more clicks.",[14,15,17],"h2",{"id":16},"the-four-card-types","The Four Card Types",[10,19,20],{},"Twitter defines four card types, each with its own visual layout:",[22,23,24,40],"table",{},[25,26,27],"thead",{},[28,29,30,34,37],"tr",{},[31,32,33],"th",{},"Card Type",[31,35,36],{},"Layout",[31,38,39],{},"Best For",[41,42,43,58,71,84],"tbody",{},[28,44,45,52,55],{},[46,47,48],"td",{},[49,50,51],"code",{},"summary",[46,53,54],{},"Small square thumbnail on the left, text on the right",[46,56,57],{},"Blog posts, articles, generic pages",[28,59,60,65,68],{},[46,61,62],{},[49,63,64],{},"summary_large_image",[46,66,67],{},"Large banner image above text",[46,69,70],{},"Product pages, feature announcements, visual content",[28,72,73,78,81],{},[46,74,75],{},[49,76,77],{},"app",[46,79,80],{},"Direct download button for mobile apps",[46,82,83],{},"Mobile app promotion",[28,85,86,91,94],{},[46,87,88],{},[49,89,90],{},"player",[46,92,93],{},"Embedded audio\u002Fvideo player",[46,95,96],{},"Video content, audio podcasts, live streams",[10,98,99,100,102,103,105,106,108,109,111],{},"The ",[49,101,51],{}," and ",[49,104,64],{}," types cover 95% of use cases. The ",[49,107,77],{}," card is niche, and the ",[49,110,90],{}," card requires approval from Twitter before it will render.",[14,113,115],{"id":114},"required-meta-tags-for-summary-cards","Required Meta Tags for Summary Cards",[10,117,118],{},"The minimal set of tags for a summary card:",[120,121,126],"pre",{"className":122,"code":123,"language":124,"meta":125,"style":125},"language-html shiki shiki-themes github-light github-dark","\u003Cmeta name=\"twitter:card\" content=\"summary\">\n\u003Cmeta name=\"twitter:title\" content=\"JSON Formatter Online - Free Formatting Tool\">\n\u003Cmeta name=\"twitter:description\" content=\"Format and validate JSON data instantly in your browser. No sign-up required.\">\n\u003Cmeta name=\"twitter:image\" content=\"https:\u002F\u002Fexample.com\u002Fimages\u002Fjson-formatter-card.png\">\n","html","",[49,127,128,163,186,209],{"__ignoreMap":125},[129,130,133,137,141,145,148,152,155,157,160],"span",{"class":131,"line":132},"line",1,[129,134,136],{"class":135},"sVt8B","\u003C",[129,138,140],{"class":139},"s9eBZ","meta",[129,142,144],{"class":143},"sScJk"," name",[129,146,147],{"class":135},"=",[129,149,151],{"class":150},"sZZnC","\"twitter:card\"",[129,153,154],{"class":143}," content",[129,156,147],{"class":135},[129,158,159],{"class":150},"\"summary\"",[129,161,162],{"class":135},">\n",[129,164,166,168,170,172,174,177,179,181,184],{"class":131,"line":165},2,[129,167,136],{"class":135},[129,169,140],{"class":139},[129,171,144],{"class":143},[129,173,147],{"class":135},[129,175,176],{"class":150},"\"twitter:title\"",[129,178,154],{"class":143},[129,180,147],{"class":135},[129,182,183],{"class":150},"\"JSON Formatter Online - Free Formatting Tool\"",[129,185,162],{"class":135},[129,187,189,191,193,195,197,200,202,204,207],{"class":131,"line":188},3,[129,190,136],{"class":135},[129,192,140],{"class":139},[129,194,144],{"class":143},[129,196,147],{"class":135},[129,198,199],{"class":150},"\"twitter:description\"",[129,201,154],{"class":143},[129,203,147],{"class":135},[129,205,206],{"class":150},"\"Format and validate JSON data instantly in your browser. No sign-up required.\"",[129,208,162],{"class":135},[129,210,212,214,216,218,220,223,225,227,230],{"class":131,"line":211},4,[129,213,136],{"class":135},[129,215,140],{"class":139},[129,217,144],{"class":143},[129,219,147],{"class":135},[129,221,222],{"class":150},"\"twitter:image\"",[129,224,154],{"class":143},[129,226,147],{"class":135},[129,228,229],{"class":150},"\"https:\u002F\u002Fexample.com\u002Fimages\u002Fjson-formatter-card.png\"",[129,231,162],{"class":135},[10,233,234,235,237],{},"For ",[49,236,64],{},", change only the card type:",[120,239,241],{"className":122,"code":240,"language":124,"meta":125,"style":125},"\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\">\n\u003Cmeta name=\"twitter:title\" content=\"Markdown Preview Tool - Live Rendering\">\n\u003Cmeta name=\"twitter:description\" content=\"Preview Markdown with math, tables, and syntax highlighting in real time.\">\n\u003Cmeta name=\"twitter:image\" content=\"https:\u002F\u002Fexample.com\u002Fimages\u002Fmarkdown-preview-banner.png\">\n",[49,242,243,264,285,306],{"__ignoreMap":125},[129,244,245,247,249,251,253,255,257,259,262],{"class":131,"line":132},[129,246,136],{"class":135},[129,248,140],{"class":139},[129,250,144],{"class":143},[129,252,147],{"class":135},[129,254,151],{"class":150},[129,256,154],{"class":143},[129,258,147],{"class":135},[129,260,261],{"class":150},"\"summary_large_image\"",[129,263,162],{"class":135},[129,265,266,268,270,272,274,276,278,280,283],{"class":131,"line":165},[129,267,136],{"class":135},[129,269,140],{"class":139},[129,271,144],{"class":143},[129,273,147],{"class":135},[129,275,176],{"class":150},[129,277,154],{"class":143},[129,279,147],{"class":135},[129,281,282],{"class":150},"\"Markdown Preview Tool - Live Rendering\"",[129,284,162],{"class":135},[129,286,287,289,291,293,295,297,299,301,304],{"class":131,"line":188},[129,288,136],{"class":135},[129,290,140],{"class":139},[129,292,144],{"class":143},[129,294,147],{"class":135},[129,296,199],{"class":150},[129,298,154],{"class":143},[129,300,147],{"class":135},[129,302,303],{"class":150},"\"Preview Markdown with math, tables, and syntax highlighting in real time.\"",[129,305,162],{"class":135},[129,307,308,310,312,314,316,318,320,322,325],{"class":131,"line":211},[129,309,136],{"class":135},[129,311,140],{"class":139},[129,313,144],{"class":143},[129,315,147],{"class":135},[129,317,222],{"class":150},[129,319,154],{"class":143},[129,321,147],{"class":135},[129,323,324],{"class":150},"\"https:\u002F\u002Fexample.com\u002Fimages\u002Fmarkdown-preview-banner.png\"",[129,326,162],{"class":135},[10,328,329],{},"The optional but recommended tags:",[120,331,333],{"className":122,"code":332,"language":124,"meta":125,"style":125},"\u003Cmeta name=\"twitter:site\" content=\"@yourhandle\">\n\u003Cmeta name=\"twitter:creator\" content=\"@authorhandle\">\n\u003Cmeta name=\"twitter:image:alt\" content=\"Screenshot of the JSON formatter interface\">\n",[49,334,335,357,379],{"__ignoreMap":125},[129,336,337,339,341,343,345,348,350,352,355],{"class":131,"line":132},[129,338,136],{"class":135},[129,340,140],{"class":139},[129,342,144],{"class":143},[129,344,147],{"class":135},[129,346,347],{"class":150},"\"twitter:site\"",[129,349,154],{"class":143},[129,351,147],{"class":135},[129,353,354],{"class":150},"\"@yourhandle\"",[129,356,162],{"class":135},[129,358,359,361,363,365,367,370,372,374,377],{"class":131,"line":165},[129,360,136],{"class":135},[129,362,140],{"class":139},[129,364,144],{"class":143},[129,366,147],{"class":135},[129,368,369],{"class":150},"\"twitter:creator\"",[129,371,154],{"class":143},[129,373,147],{"class":135},[129,375,376],{"class":150},"\"@authorhandle\"",[129,378,162],{"class":135},[129,380,381,383,385,387,389,392,394,396,399],{"class":131,"line":188},[129,382,136],{"class":135},[129,384,140],{"class":139},[129,386,144],{"class":143},[129,388,147],{"class":135},[129,390,391],{"class":150},"\"twitter:image:alt\"",[129,393,154],{"class":143},[129,395,147],{"class":135},[129,397,398],{"class":150},"\"Screenshot of the JSON formatter interface\"",[129,400,162],{"class":135},[10,402,99,403,406,407,410,411,414],{},[49,404,405],{},"twitter:site"," tag associates the card with your brand account. The ",[49,408,409],{},"twitter:creator"," tag credits the individual author. The ",[49,412,413],{},"image:alt"," tag provides accessibility text for the card image.",[14,416,418],{"id":417},"image-specifications","Image Specifications",[10,420,421],{},"Image sizing is where most card implementations fail. Twitter caches images aggressively and rejects cards with undersized images silently — you get a plain text link instead.",[22,423,424,442],{},[25,425,426],{},[28,427,428,430,433,436,439],{},[31,429,33],{},[31,431,432],{},"Minimum Size",[31,434,435],{},"Maximum Size",[31,437,438],{},"Max File Size",[31,440,441],{},"Aspect Ratio",[41,443,444,462,478],{},[28,445,446,450,453,456,459],{},[46,447,448],{},[49,449,51],{},[46,451,452],{},"144×144 px",[46,454,455],{},"4096×4096 px",[46,457,458],{},"5 MB",[46,460,461],{},"1:1",[28,463,464,468,471,473,475],{},[46,465,466],{},[49,467,64],{},[46,469,470],{},"300×157 px",[46,472,455],{},[46,474,458],{},[46,476,477],{},"2:1",[28,479,480,484,487,490,492],{},[46,481,482],{},[49,483,90],{},[46,485,486],{},"128×128 px card, 640×360 px player",[46,488,489],{},"—",[46,491,458],{},[46,493,494],{},"Varies",[10,496,234,497,499],{},[49,498,64],{},", design your image at 1200×600 pixels for sharp rendering on high-DPI displays. Use PNG for screenshots and JPG for photographs. Avoid animated GIFs — Twitter converts them to static images in cards.",[14,501,503],{"id":502},"player-card-implementation","Player Card Implementation",[10,505,506],{},"The player card embeds an iframe-based media player directly in the tweet. It requires additional tags:",[120,508,510],{"className":122,"code":509,"language":124,"meta":125,"style":125},"\u003Cmeta name=\"twitter:card\" content=\"player\">\n\u003Cmeta name=\"twitter:title\" content=\"Live Coding Session\">\n\u003Cmeta name=\"twitter:description\" content=\"Watch the team build a REST API from scratch.\">\n\u003Cmeta name=\"twitter:image\" content=\"https:\u002F\u002Fexample.com\u002Fvideo-thumbnail.jpg\">\n\u003Cmeta name=\"twitter:player\" content=\"https:\u002F\u002Fexample.com\u002Fembed\u002Fvideo-123\">\n\u003Cmeta name=\"twitter:player:width\" content=\"480\">\n\u003Cmeta name=\"twitter:player:height\" content=\"270\">\n\u003Cmeta name=\"twitter:player:stream\" content=\"https:\u002F\u002Fexample.com\u002Fvideo-123.mp4\">\n",[49,511,512,533,554,575,596,619,642,665],{"__ignoreMap":125},[129,513,514,516,518,520,522,524,526,528,531],{"class":131,"line":132},[129,515,136],{"class":135},[129,517,140],{"class":139},[129,519,144],{"class":143},[129,521,147],{"class":135},[129,523,151],{"class":150},[129,525,154],{"class":143},[129,527,147],{"class":135},[129,529,530],{"class":150},"\"player\"",[129,532,162],{"class":135},[129,534,535,537,539,541,543,545,547,549,552],{"class":131,"line":165},[129,536,136],{"class":135},[129,538,140],{"class":139},[129,540,144],{"class":143},[129,542,147],{"class":135},[129,544,176],{"class":150},[129,546,154],{"class":143},[129,548,147],{"class":135},[129,550,551],{"class":150},"\"Live Coding Session\"",[129,553,162],{"class":135},[129,555,556,558,560,562,564,566,568,570,573],{"class":131,"line":188},[129,557,136],{"class":135},[129,559,140],{"class":139},[129,561,144],{"class":143},[129,563,147],{"class":135},[129,565,199],{"class":150},[129,567,154],{"class":143},[129,569,147],{"class":135},[129,571,572],{"class":150},"\"Watch the team build a REST API from scratch.\"",[129,574,162],{"class":135},[129,576,577,579,581,583,585,587,589,591,594],{"class":131,"line":211},[129,578,136],{"class":135},[129,580,140],{"class":139},[129,582,144],{"class":143},[129,584,147],{"class":135},[129,586,222],{"class":150},[129,588,154],{"class":143},[129,590,147],{"class":135},[129,592,593],{"class":150},"\"https:\u002F\u002Fexample.com\u002Fvideo-thumbnail.jpg\"",[129,595,162],{"class":135},[129,597,599,601,603,605,607,610,612,614,617],{"class":131,"line":598},5,[129,600,136],{"class":135},[129,602,140],{"class":139},[129,604,144],{"class":143},[129,606,147],{"class":135},[129,608,609],{"class":150},"\"twitter:player\"",[129,611,154],{"class":143},[129,613,147],{"class":135},[129,615,616],{"class":150},"\"https:\u002F\u002Fexample.com\u002Fembed\u002Fvideo-123\"",[129,618,162],{"class":135},[129,620,622,624,626,628,630,633,635,637,640],{"class":131,"line":621},6,[129,623,136],{"class":135},[129,625,140],{"class":139},[129,627,144],{"class":143},[129,629,147],{"class":135},[129,631,632],{"class":150},"\"twitter:player:width\"",[129,634,154],{"class":143},[129,636,147],{"class":135},[129,638,639],{"class":150},"\"480\"",[129,641,162],{"class":135},[129,643,645,647,649,651,653,656,658,660,663],{"class":131,"line":644},7,[129,646,136],{"class":135},[129,648,140],{"class":139},[129,650,144],{"class":143},[129,652,147],{"class":135},[129,654,655],{"class":150},"\"twitter:player:height\"",[129,657,154],{"class":143},[129,659,147],{"class":135},[129,661,662],{"class":150},"\"270\"",[129,664,162],{"class":135},[129,666,668,670,672,674,676,679,681,683,686],{"class":131,"line":667},8,[129,669,136],{"class":135},[129,671,140],{"class":139},[129,673,144],{"class":143},[129,675,147],{"class":135},[129,677,678],{"class":150},"\"twitter:player:stream\"",[129,680,154],{"class":143},[129,682,147],{"class":135},[129,684,685],{"class":150},"\"https:\u002F\u002Fexample.com\u002Fvideo-123.mp4\"",[129,687,162],{"class":135},[10,689,690],{},"Important restrictions on player cards: the player URL must serve HTTPS, the iframe must be responsive, and Twitter must whitelist your domain before player cards will render. Submit your domain through the Twitter Card Validator for approval.",[14,692,694],{"id":693},"debugging-and-validation","Debugging and Validation",[10,696,697],{},"Twitter's Card Validator tool was removed in 2023, but you can still debug cards effectively:",[699,700,701,709,715,725,731],"ol",{},[702,703,704,708],"li",{},[705,706,707],"strong",{},"Use the URL debugger"," at cards-dev.twitter.com\u002Fvalidator (when available) or the newer Twitter developer tools.",[702,710,711,714],{},[705,712,713],{},"Check your tags"," with a meta tag inspector that parses both Twitter and Open Graph tags.",[702,716,717,720,721,724],{},[705,718,719],{},"Force cache refresh"," by appending a query parameter to your URL when sharing: ",[49,722,723],{},"?v=2"," tells Twitter to re-fetch the page metadata.",[702,726,727,730],{},[705,728,729],{},"Verify HTTPS"," — Twitter will not render cards for pages served over HTTP.",[702,732,733,736],{},[705,734,735],{},"Test the fallback chain"," — remove your Twitter tags temporarily and confirm that your Open Graph tags produce acceptable results.",[10,738,739],{},"The most common failure is forgetting that Twitter caches card data aggressively. If you update your meta tags, the old card may persist for days. Increment your URL version or use the cache-busting query parameter trick to push updates live.",[10,741,742,743,747],{},"Twitter Card tags work best when combined with comprehensive Open Graph and structured data markup. Build all three at once using the meta tag generator at ",[744,745,746],"a",{"href":746},"\u002Ftools\u002Fmeta-tag-generator"," to ensure consistent previews across every platform.",[749,750,751],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":125,"searchDepth":165,"depth":165,"links":753},[754,755,756,757,758],{"id":16,"depth":165,"text":17},{"id":114,"depth":165,"text":115},{"id":417,"depth":165,"text":418},{"id":502,"depth":165,"text":503},{"id":693,"depth":165,"text":694},"2026-05-28","Implement summary, summary_large_image, and player Twitter Card tags for rich link previews.","md",{},true,"\u002Fguides\u002Ftwitter-card-meta-tags",{"title":5,"description":760},"guides\u002Ftwitter-card-meta-tags","y3maU5pdisvCeltYjCfltaFzD82F7fHO45Z9AI12JGw",1780401337617]