Meta Tag Generator

What are Meta Tags?

Meta tags are snippets of HTML code that provide metadata about a webpage. These tags don't appear visibly on the page but are read by search engines, web browsers, and social media platforms to understand the content and how to display it.

Using This Tool

1. Fill in the Basic Information:
   • Page Title - The title that appears in browser tabs and search results (recommended: 50-60 characters)
   • Language - The primary language of your webpage (default: English)
   • Meta Description - A summary of your page content (recommended: 150-160 characters)
   • Meta Keywords - Comma-separated keywords related to your content (less important for SEO now, but still used by some systems)
   • Author - The name of the content creator or organization
   • Viewport - Controls how your page scales on different devices (default setting works for most websites)
2. Configure Robots Meta Tags:
   • Check "Include Robots Meta Tags" to control how search engines interact with your page
   • Select the appropriate options based on your needs:
     • Index - Allow search engines to index the page (show it in search results)
     • Follow - Allow search engines to follow links on the page
     • No Image Index - Prevent search engines from indexing images on the page
     • No Archive - Prevent search engines from showing cached versions of the page
3. Add Social Media Meta Tags:
   • Check "Include Social Media Meta Tags" to control how your page appears when shared on social platforms
   • Fill in the Open Graph and Twitter Card details:
     • OG Title - Title for social media sharing (defaults to page title if left empty)
     • OG Description - Description for social media sharing (defaults to meta description if left empty)
     • OG URL - The canonical URL of your page
     • OG Image - URL to an image that represents your content (recommended size: 1200×630 pixels)
     • OG Type - The type of content (website, article, product, etc.)
     • Twitter Card - The type of Twitter card to use (summary, summary with large image, etc.)
4. Include Extra Meta Tags (Optional):
   • Theme Color - Defines a color for browser UI elements (like the address bar in mobile browsers)
   • Canonical URL - Specifies the preferred URL for your page if multiple URLs serve the same content
   • Refresh - Automatically refreshes the page after a specified number of seconds
   • Refresh URL - Redirects to this URL when the refresh occurs
5. Generate Meta Tags:
   • Click the "Generate Meta Tags" button to create your meta tag HTML
   • Review the generated code and copy it using the "Copy Code" button
   • Paste the code into the section of your HTML document
6. Reset the Tool:
   • Click the "Reset" button to clear all fields and start over

Common Meta Tag Examples

<!-- Basic Meta Tags -->
<title>Your Page Title</title>
<meta name="description" content="A description of your page content.">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="author" content="Your Name">

<!-- Robots Meta Tags -->
<meta name="robots" content="index, follow">

<!-- Social Media Meta Tags -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A description for social media sharing">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="A description for Twitter">
<meta name="twitter:image" content="https://example.com/image.jpg">