0/60 characters
0/160 characters
Separate keywords with commas
Generated Code
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta http-equiv="content-language" content="en">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">Search Engine Preview
Meta Tag Best Practices
- • Keep titles under 60 characters for optimal display
- • Write descriptions between 150-160 characters
- • Use high-quality images for social sharing (1200x630px)
- • Include your main keyword in the title and description
How to Generate Meta Tags for Your Website
- 1
Enter your page title and description
Type your page title (50-60 characters) and meta description (150-160 characters) in the Basic tab. The live preview updates instantly so you can see exactly how your page will look in Google search results before copying any code. - 2
Configure Open Graph tags for social sharing
Switch to the Open Graph tab and set an OG image URL (1200x630px recommended), content type, and optional custom title and description. These tags control how your page appears when someone shares it on Facebook, LinkedIn, WhatsApp, and Slack. - 3
Set up Twitter Card tags
Open the Twitter tab to choose a card type (summary or summary_large_image) and add your Twitter handle. If you leave the title and description blank, the generator automatically falls back to your Open Graph values. - 4
Copy the generated HTML and paste it into your site
Review the generated code in the preview pane, then click Copy Code. Paste the entire block inside the section of your HTML page, before any CSS or JavaScript references. The tags work with any framework including WordPress, Next.js, Astro, and plain HTML.
Common Use Cases
Launching a New Website or Landing Page
Improving Click-Through Rates from Search Results
Controlling Social Media Previews
SEO Audits and Bulk Page Updates
Why Use Meta Tags?
Meta tags are HTML elements placed in the <head> section of a webpage that provide structured information to search engines, social platforms, and browsers. The most important tags for SEO are the title tag and meta description, which directly influence how your page appears in Google, Bing, and other search results. A well-written title tag with your primary keyword near the beginning can improve rankings, while a compelling meta description with a clear call to action increases click-through rates by 5-10% on average. This generator handles all of these tags plus Open Graph and Twitter Card markup in a single interface.
Open Graph (OG) tags were introduced by Facebook and are now supported by LinkedIn, WhatsApp, Slack, Discord, Pinterest, and most messaging apps. They let you specify the exact image, title, and description that appear when someone shares your URL. Without OG tags, these platforms guess what to display, often pulling the wrong image or a truncated paragraph. Twitter (now X) uses its own card format but falls back to OG tags when Twitter-specific tags are missing. This generator creates both sets so your content looks polished everywhere. For structured data beyond meta tags, use our Schema.org Generator to add JSON-LD markup, or generate a proper robots.txt file to control crawler access.
All processing happens entirely in your browser. Nothing you type is ever sent to a server, making this tool safe for generating tags on client sites, internal projects, and confidential pages. The output is standard HTML that works with any platform: WordPress, Shopify, Next.js, Astro, Hugo, plain HTML, and any custom CMS. If you need to validate the HTML structure of your pages after adding tags, our HTML Formatter can clean up and indent the markup, and the JSON-LD Generator can add further structured data for rich search results.