Online Meta Tag Generator for Google, Facebook & Twitter
Create fully optimized meta tags for search engines and social media platforms instantly. This free tool generates Google SEO tags, Facebook Open Graph tags, and Twitter Card tags with live preview and ready to copy code.
Contents
What Is a Meta Tag?
Meta tags help search engines and social media platforms understand your page content. This tool allows you to quickly generate the correct meta tags for titles, descriptions, images, and more without writing any code manually.
Required Meta Tags for Every Webpage
Below is the essential set of meta tags that should be included in every HTML page for proper SEO, browser compatibility, and responsive design.
<!-- Required Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Recommended for SEO -->
<title>Your Page Title</title>
<meta name="description" content="Short description about your webpage (150–160 characters).">
<link rel="canonical" href="https://www.example.com/category/page">
Meta Title Pixel Limit and Description Length
Google typically displays meta titles up to 580 pixels wide, which equals roughly 60 characters with spaces. For meta descriptions, aim for a length of 50–160 characters to keep the text fully visible in search results.
Type your Title and Meta Description below. The tool measures pixel width and tells you whether it fits common safe SERP pixel limits. Generate optimized meta tags for Google, Facebook, and Twitter. Live Meta Preview (Google / Facebook / Twitter)
Extract Your Page Meta Tags
Quickly fetch and analyze your webpage existing meta tags. Use this feature to review, update, and optimize your SERP snippet instantly.
Add your web page title, description, URL For Google Search
Live SERP Preview
Note: Google measures visible snippet by pixel width and may rewrite snippets. This tool measures using font weight & family to approximate truncation.
Enter Your Information for Facebook Tags
Enter your information for Twitter Card tags
summary (small thumbnail),summary_large_image (large preview image), player (video/audio card), and app (mobile app promotion)Live Preview Twitter Share View
Your Meta Tag Code Copy and Paste
You can add Google SEO meta tags, Facebook Open Graph tags, and Twitter Card tags directly inside your website <head> section. Simply paste the codes before the closing </head> tag.
Google meta tags help search engines understand your page title and description, while Facebook and Twitter meta tags control how your link looks when shared on social media. After adding the tags, upload your page and use tools like Facebook Sharing Debugger, and Twitter Card Validator to confirm that all previews and data are displayed correctly.
General Optional Meta Tags help improve your page structure, accessibility, and browser compatibility. These tags handle basic settings like character encoding, viewport control, authorship, browser behavior, and visual customization. While not required for search engines, they enhance user experience, mobile responsiveness, and overall page quality.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Your Name">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="copyright" content="Your Company">
<meta name="theme-color" content="#ffffff">
<meta name="color-scheme" content="light dark">
<meta name="robots" content="index, follow">
<!-- Mobile & App Integration Meta Tags -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="format-detection" content="telephone=no">
<meta name="mobile-web-app-capable" content="yes">
<!-- App Icons -->
<link rel="apple-touch-icon" href="/apple-icon.png">
<link rel="manifest" href="/manifest.json">
Tag Usage
- charset - Sets character encoding (UTF-8 recommended).
- viewport - Makes your page responsive on mobile.
- author - Page creator/author name.
- keywords - Old SEO tag, still used by some search engines (not Google).
- copyright - Indicates ownership of page content.
- theme-color - Sets browser UI color for mobile Chrome/Android.
- color-scheme - Indicates support for light/dark modes.
- robots - Controls crawling behavior (index/noindex, follow/nofollow).
- apple-mobile-web-app-capableAllows full-screen experience on iOS.
- apple-mobile-web-app-status-bar-styleCustomize the iOS status bar look.
- format-detectionPrevents iOS from auto-detecting phone numbers.
- mobile-web-app-capableSimilar fullscreen capability for Android/Chrome.
- icon / apple-touch-iconIcons for browsers, iOS home screen, Android.
- manifest - Defines PWA settings (app icons, theme, install behavior).
These tags help Google and other search engines display your page title and description properly in search results.
<!-- Primary Meta Tags -->
<title>Your Page Title Here</title>
<meta name="description" content="Enter a short description of your webpage. length is 150-160 characters.">
<link rel="canonical" href="https://example.com/page-url">
Tag Usage
- title - The page title displayed in search results and browser tabs (50-60 characters optimal)
- description - A brief summary of your page content shown in search results. (140–160 characters.)
- canonical - Helps Google understand the original/primary URL to avoid duplicate-content issues.
Open Graph tags control how your page looks when someone shares your link on Facebook or Messenger. Facebook Open Graph tags help you customize the preview title, description, and image shown when your page is shared.
<!-- Facebook Open Graph Meta Tags -->
<meta property="og:title" content="Your Page Title Here">
<meta property="og:description" content="Short description used when sharing your page on Facebook.">
<meta property="og:image" content="https://example.com/your-image.jpg">
<meta property="og:url" content="https://example.com/your-page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Your Website Name">Facebook (og) Tag Usage
- og:title - Title displayed in Facebook share preview.
- og:description - Short snippet shown under the title in the preview.
- og:image - Preview image (recommended size: 1200×630).
- og:url - Canonical URL Facebook should treat as the shared page.
- og:type - Declares content type (website, article, product).
Twitter Cards allow your link to display rich previews on Twitter. Twitter Card tags help your content stand out by showing a custom title, description, and image whenever your link is posted on Twitter.
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title Here">
<meta name="twitter:description" content="Short description used for Twitter link preview.">
<meta name="twitter:image" content="https://example.com/your-image.jpg">
<meta name="twitter:url" content="https://example.com/your-page">
<meta name="twitter:site" content="@YourTwitterId">
Twitter (X) Tag Usage
- twitter:card - Defines card type (commonly summary_large_image).
- twitter:title - Title text appearing in the tweet preview.
- twitter:description - Short description below the title.
- twitter:image - Thumbnail image for the card.
- twitter:site - (Optional) Your Twitter username for attribution.
Use these meta robots tags inside your HTML <head> to control how search engines index and crawl your pages. These tags help you allow or restrict indexing, link following, caching, image previews, and snippets.
1. Allow Indexing (Default)
index, follow Allows search engines to index this page and follow all links.
2. Block Indexing (Do Not Show in Search Results)
noindex, follow Prevents this page from appearing in search results, but links can still be followed.
3. Block Indexing & Block Link Following
noindex, nofollow Blocks this page from search results and stops crawlers from following any links.
4. Block Search Engine Caching
noarchive Prevents Google from storing and showing a cached copy of this page.
5. Block Image, Video & Snippet Preview
nosnippet Stops Google from showing text snippets, image thumbnails, or video previews.
6. Limit Snippet Length
max-snippet:150 Limits the search result snippet length to 150 characters.
7. Block Image Indexing (Only Images)
noimageindex Blocks this page’s images from being included in Google Images.
8. Control Googlebot Separately
googlebot: noindex, nofollow Applies indexing rules only to Googlebot, not other search engines.
Add a theme color to customize the browser address bar and mobile UI for your website. This improves the appearance on Android Chrome and modern mobile browsers by matching your site branding.
<!-- Theme color for mobile browsers -->
<meta name="theme-color" content="#0d6efd">
<!-- Android Chrome top bar color -->
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000">
<!-- For iOS PWAs -->
<meta name="apple-mobile-web-app-status-bar-style" content="default">
Theme Tag Usage
- theme-color - Controls the color of the mobile browser address bar.
- theme-color (light mode) - Applies a custom theme color when the device is in light mode.
- theme-color (dark mode) - Applies a different theme color for users in dark mode.
- apple-mobile-web-app-status-bar-style - Status bar style for iOS when the site is added to the home screen.
Redirect meta tags automatically send users from one page to another after a specified delay. They are useful for maintenance pages, moved URLs, or simple user guidance when server redirects are not available.
<!-- Redirect after 5 seconds -->
<meta http-equiv="refresh" content="5; url=https://www.example.com/">
<!-- Instant redirect -->
<meta http-equiv="refresh" content="0; url=https://www.example.com/">
Redirect Tag Usage
- refresh: 5; - Redirects the page to another URL after 5 seconds.
- refresh: 0; - Instantly redirects the page to another URL.
Icon meta tags define the icons that browsers and devices use for bookmarks, home-screen shortcuts, and tabs. Apple Touch Icons are specifically designed for iOS devices.
<!-- Standard Favicon -->
<link rel="icon" type="image/png" href="/icons/favicon-32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/icons/favicon-16.png" sizes="16x16">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-touch-icon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-touch-icon-76.png">
<!-- SVG icon -->
<link rel="icon" type="image/svg+xml" href="/icons/icon.svg">
<!-- Manifest Icon (for PWA compatibility) -->
<link rel="manifest" href="/site.webmanifest">
<!-- Safari Pinned Tab -->
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5">
<!-- Apple iPhone startup splash screens (optional) -->
<link rel="apple-touch-startup-image" href="/splash/launch-640x1136.png">
Icons Tag Usage
- Favicon 16×16 - Small favicon used in browser tabs and bookmarks. Standard size for most browsers.
- Favicon 32×32 - High-resolution favicon for modern browsers and desktop displays.
- Apple Touch Icon - Home screen icon for iPhone/iPad when the site is saved to the device.
- SVG - Scalable SVG icon that stays sharp on any screen size.
- Manifest File - Defines icons and settings for Progressive Web Apps. Required for installation prompts.
- Safari Pinned Tab Icon - Used in Safari pinned tabs. Must be an SVG with a single color.
- apple-touch-startup-image - Splash screen displayed while your website loads on iOS devices.