Meta Tag Generator
Browser-based Meta tag generation tool supporting title, description, keywords, canonical, Open Graph, Twitter Card, robots and other tag generation, automatic HTML entity escaping, real-time character length guidance with color status, one-click copy and download.
Related
Use Cases
- Batch generate complete Meta tags for homepage, listing pages, and detail pages before new website launch, quickly completing basic SEO setup
- Configure article-type Open Graph tags and summary_large_image Twitter Card before publishing blog posts to improve social platform sharing performance
- Configure product-type og:type for e-commerce product pages, set structured information such as og:image, og:price:amount to optimize product display on social platforms
- Regenerate canonical tags after website redesign or domain change to standardize URLs and avoid authority dilution from duplicate content
- Configure theme-color for mobile web pages to keep Chrome and Safari mobile address bars consistent with brand colors
- When developing with SSR/SSG frameworks like Next.js, Nuxt.js, Gatsby, quickly generate complete Meta tag code needed for head configuration
- Manually configure Meta tags for custom page templates in CMS systems like WordPress and Shopify without relying on SEO plugins
- Quickly generate correct robots meta tag combinations when troubleshooting website indexing issues (e.g., noindex,nofollow for staging environments)
- Social media operators configure share cards for campaign landing pages to ensure correct preview when shared to Facebook, Twitter/X, LinkedIn, WhatsApp, Slack, Discord
- Frontend developers writing HTML page templates get automatic entity escaping for Meta tags, avoiding HTML syntax errors caused by special characters
How to Use
- Fill in page title (recommended 50-60 characters), meta description (recommended 120-160 characters), keywords (comma-separated), canonical URL, and author in the "Basic SEO Tags" section
- Select appropriate indexing and tracking rules in the "robots Crawler Directives" section: index/noindex (whether to index), follow/nofollow (whether to follow links), with additional options for noarchive, nosnippet, etc.
- Enter or select a theme-color hex color value in the "Theme Color Settings" section for mobile browser address bar coloring
- Switch to the "Open Graph Tags" section, select og:type (one of website/article/product/profile), fill in og:title, og:description, og:image (share image URL, recommended 1200×630 pixels), og:url, og:site_name, og:locale
- Switch to the "Twitter Card Tags" section, select twitter:card type (one of summary/summary_large_image/app/player), fill in twitter:site @handle, twitter:title, twitter:description, twitter:image
- Observe the real-time preview area on the right and character count color indicators during input: green means optimal length, orange means near boundary, grey means too short or too long requiring adjustment
- After confirming tags are correct, click the "Copy to Clipboard" button to copy all code and paste into the HTML head area, or click "Download HTML File" to save as meta-tags.html for later use
Features
- Automatic HTML entity escaping: safely escapes five special characters &, <, >, ", ' to prevent syntax errors in generated HTML tags
- Smart title length indicator: green (optimal) within 50-60 character range, orange/grey status indicators when over or under, real-time character count
- Smart meta description length indicator: green (optimal display range) within 120-160 characters, real-time color status changes when over or too short
- Supports 4 og:type options: website (general site), article (blog/post), product (product page), profile (personal page), matching different page types
- Supports 4 twitter:card types: summary (small image), summary_large_image (large image), app (app card), player (video/player card)
- robots directive combination: supports freely combining index/noindex, follow/nofollow, noarchive, nosnippet, noimageindex and other crawler directives
- author meta tag: supports content-author, article:author and other attribution tags, suitable for blogs and news sites
- theme-color configuration: supports setting browser mobile address bar theme color, provides color picker and hex value input
- og:site_name configuration: specifically sets the site name field in the Open Graph protocol for correct display during social sharing
- twitter:site @handle configuration: supports filling in the official Twitter/X @handle account to link share cards with the official account
- Three-section structured output: displays generated results in three clear sections: Primary SEO, Open Graph, and Twitter Card, with clear structure at a glance
- One-click copy to clipboard: generated code can be copied with one click without manual selection, compatible with various browser environments
- Download as meta-tags.html: generated tags can be fully downloaded as a standalone HTML file for easy saving or direct import into projects
- Real-time generation and preview: input content instantly generates tag code, with synchronized preview of SERP search result display and social share card styles
FAQ
Can the code generated by the Meta Tag Generator be directly copied to a website for use? Does it need modifications?
It can be directly copied for use. The code generated by this tool is standard-format HTML Meta tags with automatic HTML entity escaping; just paste directly between your page's <head> and </head>. You only need to ensure the URLs you fill in (canonical, og:image, og:url, twitter:image) are your website's real online addresses, not example placeholders. If using head management solutions from frameworks like Next.js, Nuxt.js, React Helmet, Vue Meta, you may need slight adjustments according to the framework's JSX/Vue template syntax, but tag attributes and values can be directly reused.
Why must I fill in an og:image? What happens without an image?
og:image directly affects the visual effect and click-through rate of social share cards. Links without og:image shared to Facebook, Twitter, LinkedIn, WeChat and other platforms either show bare text links without any image preview, or the platform randomly grabs a small image from the page (which could be logo, avatar, ad image, or even irrelevant image), resulting in extremely poor display, with click-through rates typically 50%+ lower than shares with correct preview images. Recommended og:image size is 1200×630 pixels (1.91:1 ratio), must be a publicly accessible absolute URL, file size not exceeding 5MB.
Do both Open Graph and Twitter Card tags need to be configured? Is it OK to only configure OG?
The Twitter/X platform does read Open Graph tags as fallback — if you don't configure any twitter: prefixed tags, Twitter will attempt to use og:title, og:description, og:image to generate cards. But specifically configuring Twitter Cards has several benefits: ① you can choose the most suitable twitter:card type (especially summary_large_image large image type; OG may not default to large image style); ② you can set twitter:site to link your official Twitter account, increasing follow conversions; ③ you can optimize title/description length separately for Twitter, distinguishing from OG. We recommend configuring both; this tool supports simultaneous generation with essentially the same effort.
What happens if title and meta description lengths exceed the recommended range? Will they be penalized?
Exceeding length won't result in search engine penalties, but content will be truncated. In Google search results, portions of title exceeding approximately 600 pixel width (about 50-60 characters) are truncated with an ellipsis, and users can't see the complete title; meta description exceeding approximately 920 pixel width (about 120-160 characters) is also truncated. The problem with being too short is wasting valuable display space, unable to fully convey page value and attract clicks. Note this isn't a precise character count limit but a pixel width limit — full-width characters, uppercase letters, wide letters like W/M, and emoji occupy more width, so actual display may truncate earlier than character count suggests. This tool's color indicators are best-practice references based on character count.
What does HTML entity escaping mean? Why does the tool do this automatically?
Certain characters in HTML have special syntactic meaning; writing them directly in attribute values would break HTML structure: double quote " is the attribute value terminator, writing it directly causes tags to close early; & is the entity escape starter; < and > are tag delimiters. These characters must be written in entity form to display correctly: & → &, < → <, > → >, " → ", ' → '. If your title or description contains &, quotes, angle brackets or other special characters, writing them without escaping causes HTML syntax errors that could make subsequent tags all invalid. This tool handles this escaping automatically; you just input original text directly without manual escaping.
Why can't Facebook/Twitter crawlers capture Meta tags from pages I wrote with React/Vue?
Because modern frontend frameworks like React, Vue, and Angular default to client-side rendering (CSR) — HTML source is empty or contains only a container div, and Meta tags are dynamically inserted into the DOM after the browser executes JavaScript. But most social platform crawlers like Facebook's facebookexternalhit, Twitterbot, LinkedInBot, and WeChat crawler don't execute JavaScript (or have very limited execution capability); the raw HTML they crawl doesn't contain Meta tags, naturally unable to generate share cards. Solutions: ① Use SSR (Server-Side Rendering) or SSG (Static Site Generation) with frameworks like Next.js, Nuxt.js, Gatsby, Astro, rendering complete Meta tags into HTML source on the server side; ② Use prerendering services like prerender.io, Rendertron to return static HTML to crawlers; ③ Use dedicated OG image generation services to dynamically generate tags.
Should canonical and og:url for the same page be filled in identically?
Yes, they should be consistent. The canonical tag is for search engines, telling them the preferred URL; og:url is for social platforms, telling them the unique URL for this content to aggregate likes, comments, and share counts. Both pointing to the same URL is a best practice, avoiding authority dilution and social count fragmentation. Note both must be complete absolute URLs (including https://, domain, complete path), not relative paths. If URLs have UTM parameters or tracking parameters, both canonical and og:url should point to the clean URL without parameters.
Will links on noindex pages still be crawled by crawlers? Will they pass authority?
noindex means "don't index this page", not "don't crawl" and not "don't follow links". Crawlers still fetch noindex pages (only way they can see the noindex tag), and if robots meta also sets follow (which is the default), crawlers will continue crawling links on the page. But regarding authority passing: Google's official statement is that noindex pages are eventually removed from the index, and link weight on those pages doesn't pass normally (because the page itself isn't indexed). So if you want crawlers to reach other pages through a certain page but don't want that page itself indexed, using noindex,follow works, but don't expect noindex pages to pass weight like normal pages.
Which browsers support theme-color? Does iOS Safari support it?
theme-color currently supported on: Chrome/Firefox/Edge/Brave and other Chromium-based browsers on Android have supported it for a long time with the most obvious effects; Safari has supported theme-color since iOS 15 and macOS Monterey, but Safari's implementation differs slightly — it automatically adjusts based on page background color and also supports setting different colors for light/dark mode using the media attribute. Desktop Chrome also applies theme-color in tab bars etc. from certain versions. IE and older browsers don't support it, but lack of support doesn't matter — there's just no theme color effect, no impact on any functionality. Recommended theme color should match your website header/navigation bar color for visual consistency.
Why does Google search results sometimes show a description that's not the one I wrote?
Google doesn't guarantee 100% use of your written meta description. When Google judges your description insufficiently relevant to the user's search query, or description quality is low (e.g., keyword stuffing, site-wide identical, mismatched content), Google automatically extracts a snippet from page body content it considers most relevant to the search term as the displayed search result description. This is normal Google behavior, not a bug. To increase the probability of description being used: ① Write unique, accurate content-describing descriptions for each page; ② Naturally include page core keywords in description without stuffing; ③ Keep length within reasonable range, not too short; ④ Description content should actually be reflected in page body. Even though Google sometimes rewrites, you should still write descriptions carefully — this is your primary means of actively controlling display.
After configuring tags, how do I verify they're correctly taking effect? What checking tools are available?
Verifying Meta tags involves several steps and tools: ① First use browser "View Page Source" to search for title, description, og: and other tags in raw HTML source to check they exist with correct content (note: source code, not Elements panel, because source is what the server returns; CSR won't show in source); ② Use Facebook Sharing Debugger to verify OG tags and refresh cache; ③ Use Twitter Card Validator to verify Twitter Cards; ④ Use Google Rich Results Test to check basic tags; ⑤ Use Google Search Console's "URL Inspection" tool to see what Google actually crawled, indexing status; ⑥ For local testing, use browser user-agent switcher to simulate social media crawlers, or use curl command with Facebook UA to crawl and check returned HTML.
Does each page need separately configured Meta tags? Is it OK to use one set of tags site-wide?
Absolutely not! Every page must have unique title and meta description. If all pages across the site use the same title and description, search engines cannot distinguish different pages' content topics: ① Search engines don't know what each page is about and can't rank correctly; ② All pages show the same title and description in search results, users can't tell which to click, resulting in extremely low CTR; ③ May be judged as low-quality site by search engines, affecting entire site authority. OG and Twitter Card tags should in principle also differ per page. Only site-level configurations like theme-color, og:site_name, twitter:site can be unified site-wide; all other tags should be configured individually per page content.
Should I still write meta keywords now? How many are appropriate?
Google, Bing, Baidu and other mainstream search engines in 2026 no longer use meta keywords as a ranking factor; whether you write them or not, and what you write, essentially doesn't affect SEO. If your CMS or template has this field, spend a few seconds filling in 3-5 core keywords; don't spend too much time deliberating keyword selection and density. Importantly: don't stuff dozens of keywords, don't repeat the same word many times, don't write irrelevant popular terms — although keywords themselves aren't used for ranking, excessive stuffing may be treated as a spam signal by search engines, which is counterproductive. If your website doesn't have a keywords field or you don't bother filling it, leaving it completely empty is fine with no negative impact on rankings.
What's the difference between robots meta tags and robots.txt? Which has higher priority?
The two operate at different levels and mechanisms: ① robots.txt is a text file placed in website root, controlling crawler behavior at site or directory level, e.g., Disallow: /admin/ tells all crawlers not to crawl the /admin/ directory; but robots.txt is a "gentlemen's agreement" — compliant crawlers respect it, and if pages prohibited from crawling have external links pointing to them, they may still be indexed just without descriptions. ② robots meta is a page-level tag placed in each page's HTML head, which can precisely control individual page index/noindex/follow/nofollow etc. behavior, with higher priority than robots.txt. ③ X-Robots-Tag is HTTP response header level, same functionality as robots meta but returned via HTTP headers, can be used for non-HTML files (e.g., PDF, images) indexing control. To completely prevent pages from being indexed, you must use noindex (meta or X-Robots-Tag); relying solely on robots.txt Disallow cannot guarantee non-indexing.
After generating Meta tags with this tool, do I still need to configure Schema.org structured data (JSON-LD)?
Meta tags and Schema.org structured data are complementary, not replacements. Meta tags primarily address: search engine results page titles/descriptions, social platform share cards, basic crawler control. Schema.org structured data (typically embedded in pages as JSON-LD) addresses: Rich Snippets, such as product rating stars, price/stock, breadcrumb navigation, article publish dates, FAQ accordion blocks, event times/locations and other enhanced displays, which can further improve CTR. We recommend configuring both for important pages: ① Basic Meta tags (content generated by this tool); ② Schema.org structured data for the corresponding page type. The two don't conflict, jointly optimizing search display effects.
Troubleshooting
When sharing links to Facebook/Twitter/LinkedIn, images don't display, or the displayed image isn't the set og:image
og:image URL uses relative path or localhost/127.0.0.1/internal IP; social platform crawlers cannot access public addresses Image is blocked by robots.txt, or server/WAF/CDN/firewall blocks Facebook/Twitter crawler User-Agents (facebookexternalhit/Twitterbot/LinkedInBot) Image size doesn't meet requirements: og:image smaller than 200×200 pixels is ignored; summary_large_image smaller than 300×157 is downgraded Image file too large (exceeding 5MB-8MB) or format unsupported (only JPG/PNG/WebP/GIF supported; SVG not supported by some platforms) Tags are dynamically rendered client-side with JavaScript; social platform crawlers don't execute JS, only SSR/SSG can be crawled og:image URL returns 404/403/5xx error, or redirects to login page/error page Platform cached old no-image version; after modifying tags, official Debugger tool wasn't used to force Scrape Again to refresh cache
In Google search results, title is truncated and not fully displayed, or Google automatically rewrote the title
Title length exceeds 50-60 characters (or about 600 pixel width), excess is truncated with ellipsis Title contains full-width special symbols, emoji occupying extra width causing early truncation; actual display length shorter than character count Title keyword stuffing or mismatch with page content; Google considers your title inaccurate and grabs other text from page body or anchor text to rewrite title Titles for each page are duplicated or highly similar; Google cannot distinguish pages and automatically generates different titles Title contains only brand name without page topic description, or brand name is too long taking too much space Too many separators like |, -, _ used, or non-standard separator usage, causing Google to judge as separator stuffing Page has messy h1-h6 heading hierarchy or multiple h1 tags; Google may rewrite title using h1 content
After Meta tag configuration, page shows garbled text, special characters display abnormally, or HTML syntax errors occur
<meta charset="UTF-8"> not declared, or declaration position not at the very beginning of head (must be before title) Content attribute values in meta description, og:description etc. contain unescaped double quotes ("), causing tags to close early and HTML structure to break Content contains &, <, > and other special characters without HTML entity escaping (& should be written as &, < as <, > as >) HTML file actual save encoding is not UTF-8 (e.g., saved as GBK/GB2312), but charset declares UTF-8 causing encoding mismatch Server HTTP response Content-Type header specifies charset=GBK or other non-UTF-8 encoding, overriding meta charset declaration Incorrect entity escaping used (e.g., using " to escape quotes outside attributes, or escaping characters that don't need escaping) CMS or template engine auto-escaping causes double escaping (e.g., & becomes &amp;, displayed as & instead of &)
Configured canonical tags don't take effect, duplicate URLs still get indexed, or canonical is ignored by search engines
The URL canonical points to returns 404/403/5xx error, or redirects to another page; search engines cannot access the canonical version Page A canonicals to B, Page B canonicals to A (circular canonical), or A→B→C→D chain canonicals confuse search engines Canonical points to pages with significantly different content (not highly duplicate/same content); search engines consider canonical setting incorrect and ignore it Canonical uses relative path (e.g., href="/page") instead of complete absolute URL (href="https://example.com/page") Website has multiple protocol/domain versions (http/https, www/non-www) canonically pointing to each other, but 301 redirects are not properly configured Paginated pages (e.g., ?page=2, ?page=3) all canonical to first page, causing subsequent content to not be indexed; search engines ignore such unreasonable canonicals Same page declares different canonical URLs simultaneously via link tag in HTML, HTTP response header Link: <...>; rel="canonical", and Sitemap; priority conflict
After modifying Meta tags, resharing still shows old titles, descriptions, or images; can't see updated effects
Social platforms (Facebook/Twitter/LinkedIn) cache OG/Twitter Card information for a long time (potentially days to weeks), not re-crawling on every share Official debugging tools for corresponding platforms (Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector) weren't used to execute Scrape Again/re-crawl to force cache refresh CDN (Cloudflare, etc.) cached old HTML pages; crawlers receive CDN-cached old versions Server-side, SSR cache, WordPress cache plugins, Redis page cache, etc. not cleared; output is still old HTML og:image and other resource URLs didn't change but image content was updated; browsers and platforms cache based on URL; adding ?v=2 and other version parameters is needed to force update After modifying tags, page wasn't properly deployed to production; files changed locally but production environment still has old version Meta tags placed in HTML body area or dynamically inserted with JS; crawlers don't read new tags at all, still reading previously cached versions
Accidentally setting noindex,nofollow causes the entire website or important pages not to be indexed by Google, unsearchable
Development/staging environment noindex,nofollow tags weren't removed at launch; entire site went live with noindex WordPress and other CMS backend "Discourage search engines from indexing this site" option was checked, automatically adding noindex to all pages robots.txt also set Disallow, causing crawlers to not even fetch pages and thus not see noindex; but if there are external links pointing, pages may still be indexed HTTP response header returns X-Robots-Tag: noindex (higher priority than meta tags, many people don't notice response headers), e.g., from Nginx/Apache configuration, CDN settings CDN/WAF/security plugins automatically add noindex headers (some security plugins misoperate or have default settings) Wrong combination directives used, e.g., writing noindex as index but other parameters conflicting, or site-wide template includes noindex with only homepage removing it while inner pages still have it When migrating website from staging/testing to production, base URL, canonical, robots configurations weren't updated; staging environment noindex carried over to production
Glossary
- Meta tag
- HTML meta tags placed in the head section, used to describe page metadata, conveying page title, description, author, crawler rules and other information to browsers, search engines, and social platforms.
- title
- HTML title tag, defining the browser tab title and clickable title on search engine results pages (SERP); the most important SEO tag, recommended length 50-60 characters.
- meta description
- Page description meta tag, displayed as description text below the SERP title; doesn't directly affect rankings but significantly impacts click-through rate (CTR), recommended length 120-160 characters.
- meta keywords
- Keywords meta tag, used by early search engines to determine page topics; due to abuse, Google announced in 2009 it was no longer used, now has essentially no SEO value.
- canonical
- Canonical link tag (rel="canonical"), telling search engines which is the preferred version among multiple similar URLs, used to solve duplicate content, parameter URLs, preferred domains and other issues.
- Open Graph
- Social sharing metadata protocol launched by Facebook in 2010, using og: prefixed tags to control link share card styles on social platforms, supported by Facebook, LinkedIn, WhatsApp, Slack and almost all platforms.
- Twitter Card
- Twitter/X platform share card protocol using twitter: prefixed tags, supporting four card types: summary, summary_large_image, app, player; read by Twitter with priority over OG tags.
- og:type
- Open Graph page type tag, specifying content type; common values are website (general site), article (article), product (product), profile (personal profile), determining how social platforms parse content.
- og:image
- Open Graph share image tag, specifying the social share card preview image URL; recommended size 1200×630 pixels (1.91:1 ratio), must be a publicly accessible absolute URL.
- twitter:card
- Twitter Card type tag, specifying share card type; values are summary (small image), summary_large_image (large image), app (application), player (player); a required Twitter Card tag.
- robots meta
- Crawler control meta tag, telling search engines at page level whether to index (index/noindex), follow links (follow/nofollow), show snapshots (noarchive), etc.; higher priority than robots.txt.
- noindex
- One of the robots directives, prohibiting search engines from indexing the page; the page will not appear in search results. Crawlers still fetch the page to read this tag but won't index it. Commonly used for test pages, internal pages, low-value pages.
- nofollow
- One of the robots directives, prohibiting search engine crawlers from following all links on the page (distinct from rel="nofollow" on individual links); commonly used for user-generated content, advertising links, untrusted external link pages.
- theme-color
- Browser theme color meta tag, defining mobile browser address bar/toolbar color; effective on Android Chrome, Safari 15+ and other browsers, providing a more immersive branded experience.
- author meta
- Author meta tag (name="author"), declaring content creator information; used in blogs and news sites with article:author to identify content authors.
- HTML entity
- HTML entity escape characters, used to safely display special characters in HTML, such as & for &, < for <, > for >, " for ", ' for ', avoiding syntax errors and XSS issues.
- SERP
- Search Engine Results Page, referring to the results page returned after users enter keywords in Google/Baidu and other search engines, containing titles, descriptions, URLs, rich media snippets and other elements.
- CTR
- Click-Through Rate, the proportion of users who click after search results are displayed. CTR is one of the core SEO metrics, directly influenced by title and meta description appeal, and is also a user signal in Google's ranking algorithm.
- crawl budget
- Crawl budget, the number of crawls and pages search engines allocate to your website within a certain time. Proper use of robots meta, canonical, noindex can avoid wasting crawl budget on low-value pages, allowing important pages to be crawled more frequently.
- viewport
- Viewport meta tag (name="viewport"), essential for modern responsive web pages, controlling page rendering width and initial zoom on mobile; standard configuration is width=device-width, initial-scale=1.0.
Common Meta Tags List and Attribute Reference Table
| Tag Name | Purpose | Attribute/Usage Example | Notes |
|---|---|---|---|
title | Page title, browser tab and SERP title | <title>Page Title | Brand</title> | Recommended 50-60 characters, front-load core keywords, brand name at end, unique per page |
meta description | Page description, description text shown in SERP | <meta name="description" content="..."> | Recommended 120-160 characters, include keywords and CTA, unique per page |
meta keywords | Keywords tag | <meta name="keywords" content="word1,word2,word3"> | Google/Bing/Baidu and other mainstream search engines no longer use, no need for priority configuration |
link canonical | Canonical link, specifying preferred URL | <link rel="canonical" href="https://example.com/page"> | Must write complete absolute URL, solves duplicate content issues, don't set in chains |
meta robots | Crawler control, page-level indexing/following rules | <meta name="robots" content="index,follow"> | Higher priority than robots.txt; noindex is what truly prevents indexing |
meta charset | Character encoding declaration | <meta charset="UTF-8"> | Must be placed at the very beginning of head; modern web pages uniformly use UTF-8 |
meta viewport | Mobile viewport control | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | Essential for responsive web pages; must be configured otherwise mobile experience is very poor |
meta author | Page author information | <meta name="author" content="Author Name"> | Identifies content creator; used for blogs/news sites |
meta theme-color | Mobile browser theme color | <meta name="theme-color" content="#2563eb"> | Android Chrome/Safari 15+ support; recommended to use brand primary color |
og:title | Open Graph share title | <meta property="og:title" content="..."> | Social share card title, can differ from SEO title, more click-attracting |
og:description | Open Graph share description | <meta property="og:description" content="..."> | Social card description, recommended under 200 characters |
og:image | Open Graph share image | <meta property="og:image" content="https://.../img.jpg"> | Recommended 1200×630 pixels, absolute URL, publicly accessible, file <5MB |
og:url | Open Graph canonical URL | <meta property="og:url" content="https://example.com/page"> | Should be consistent with canonical, used for aggregating likes and shares |
og:type | Open Graph content type | <meta property="og:type" content="website"> | Options: website/article/product/profile; different types support different extended attributes |
og:site_name | Open Graph site name | <meta property="og:site_name" content="GeekFormat"> | Displays overall website name, distinguished from page title |
twitter:card | Twitter Card type | <meta name="twitter:card" content="summary_large_image"> | Options: summary/summary_large_image/app/player |
twitter:site | Twitter official account | <meta name="twitter:site" content="@username"> | Fill in website/brand Twitter @handle |
twitter:image | Twitter Card image | <meta name="twitter:image" content="https://.../img.jpg"> | Falls back to og:image if not filled; use 1:1 for summary type, 2:1 for large type |
og:type Use Case Reference Table
| og:type Value | Use Case | Recommended Image Ratio | Extensible Tags |
|---|---|---|---|
website | Website homepage, general pages, About Us, Contact Us and other non-content/product pages | 1.91:1 (1200×630) | Basic og: tags sufficient, no special extensions |
article | Blog posts, press releases, knowledge documents, tutorials, column content and other time-related content | 1.91:1 (1200×630) | article:published_time (publish time), article:modified_time (modify time), article:author (author), article:section (category), article:tag (tags) |
product | E-commerce product detail pages, merchandise pages, paid service pages, SaaS product landing pages | 1.91:1 (1200×630); product images recommended square or 4:3 | product:price:amount (price), product:price:currency (currency such as CNY/USD), product:availability (stock status), product:brand (brand) |
profile | Personal homepages, user profile pages, author pages, personal resume pages | 1:1 avatar image or 1.91:1 cover image | profile:first_name (first name), profile:last_name (last name), profile:username (username), profile:gender (gender) |
twitter:card Type Reference Table
| twitter:card Type | Card Style | Image Requirements | Use Case | Additional Required Fields |
|---|---|---|---|---|
summary | Small image summary card, small image on left/top, text on right/bottom | Minimum 144×144 pixels, 1:1 square, <5MB | Ordinary articles, pages, tool pages, general content | No mandatory additional fields; fill in basic tags |
summary_large_image | Large image summary card, full-width banner at top, strong visual impact | Minimum 300×157 pixels, recommended 1200×675, approximately 2:1 ratio, <5MB | Blog posts, product pages, campaign pages, content desiring high click-through rates (recommended as default) | No mandatory additional fields; ensure image size meets requirements |
app | App download card, displaying app icon, name, rating, download button | App logo square image, 144×144 or larger | iOS/Android App download pages, mobile app promotion pages | twitter:app:name:iphone/ipad/googleplay, twitter:app:id:iphone/ipad/googleplay (app store ID), twitter:app:url:iphone/ipad/googleplay (custom scheme) |
player | Video/audio player card, directly embedded media player in-stream | Player cover image, player page must be HTTPS | Video content pages, podcasts, audio pages, livestream pages | twitter:player (player URL, HTTPS), twitter:player:width (player width), twitter:player:height (player height), twitter:player:stream (video/audio stream URL), requires Twitter whitelist approval |
- Color Blind Simulator
- Color Converter
- .htaccess to Nginx Converter
- SQL Converter
- Cookie Parser
- Cron Expression Generator
- Cron Expression Validator
- CSS Formatter
- CSS Minifier
- CSV to Excel
- CSV Viewer
- CSV Editor
- Currency Converter
- Diff Checker
- Excel to CSV
- Favicon Generator
- CSS Formatter
- HTML Formatter
- Markdown Formatter
- XML Formatter
- Hexadecimal Converter
- HTML Formatter
- HTML Minifier
- HTML to Markdown
- Markdown to HTML
- JavaScript Formatter
- JS Minifier
- JSX Formatter
- JSX Minifier
- Keyword clustering
- Lorem Ipsum Generator
- Markdown Table Generator
- Meta Tag Generator
- Password Generator
- Password Strength Checker
- QR Code & Barcode Generator
- Regex Tester
- Slug Generator
- SQL Builder
- SQL Formatter
- Word Counter
- Text Translator
- Time Tools
- TS Formatter
- TS Minifier
- TSX Formatter
- TSX Minifier
- Unix Timestamp Converter
- UUID Generator
- YAML Formatter
- Case Converter