Meta Tag Generator
Generate HTML meta tags, Open Graph, and Twitter Card tags for your pages. See a live preview of how links appear when shared.
This meta tag generator creates a complete set of HTML meta tags for SEO, Open Graph (Facebook, LinkedIn, Discord, Slack), and Twitter/X Cards. Fill in your page title, description, URL, and image, then copy the output block directly into your page's head element. A live preview shows how the link will appear in Google search results and on social feeds before you deploy anything.
About Meta Tag Generator
How Meta Tags Work
Meta tags sit inside the <head> of an HTML page and tell search engines and social platforms what the page is about. The <title> tag sets the browser tab text and the blue link in Google results. The <meta name="description"> tag provides the two-line snippet below that link. Open Graph tags, created by Facebook in 2010 and now defined at ogp.me, use the RDFa property attribute (not name) to control link previews across Facebook, LinkedIn, Discord, Slack, WhatsApp, and iMessage. Twitter Cards use the name attribute instead and give separate control over how links render on X.
A Backlinko analysis of 4 million Google search results found that title tags between 40 and 60 characters get the highest organic click-through rates. Titles in that range hit the sweet spot - long enough to be descriptive, short enough to avoid truncation. According to Safari Digital, about 25% of top-ranking pages had no meta description at all, meaning Google generated its own snippet. Adding a clear, specific description gives you direct control over what searchers see.
What Tags Does This Generator Create?
| Tag Group | Tags | Purpose |
|---|---|---|
| Primary meta | title, description, author, robots, viewport | Browser tab title, search engine snippet, crawl directives |
| Open Graph | og:title, og:description, og:image, og:url, og:type, og:site_name | Link previews on Facebook, LinkedIn, Discord, Slack, iMessage, WhatsApp |
| Twitter Card | twitter:card, twitter:title, twitter:description, twitter:image, twitter:creator | Link previews on X (formerly Twitter) |
Twitter/X falls back to Open Graph tags when Twitter-specific tags are missing. Including both sets means each platform gets exactly the title, description, and image you intended. The generator outputs both sets automatically from the same inputs.
Worked example: Suppose you are launching a product page at https://shop.example.com/widget. Enter the title "Widget Pro - Precision Tools for Makers", a description of "Stainless steel widget with lifetime guarantee. Ships worldwide.", the page URL, and an image URL pointing to a 1200x630 product photo. The generator outputs roughly 15 lines of HTML covering the title element, meta description, all six Open Graph tags, and all five Twitter Card tags. Paste that block into your <head> and every platform will show your chosen preview instead of guessing.
Meta Tag Length Guidelines
| Tag | Recommended Length | What Happens If Too Long |
|---|---|---|
| title | 50-60 characters | Google truncates with an ellipsis in search results |
| meta description | 120-160 characters | Google truncates or rewrites with its own snippet |
| og:title | Under 60 characters | Facebook truncates at about 88 chars, LinkedIn at about 70 |
| og:description | Under 200 characters | Platforms truncate differently - keep it concise |
| og:image | 1200 x 630 pixels (1.91:1 ratio) | Image is cropped or letter-boxed if the ratio is wrong |
| twitter:title | Under 70 characters | Truncated with ellipsis |
| twitter:description | Under 200 characters | Truncated with ellipsis |
The character counter next to the title and description fields in this generator shows the current length in real time so you can stay within limits as you type.
Open Graph Image Requirements by Platform
| Platform | Recommended Image Size | Minimum Size | Aspect Ratio | Max File Size |
|---|---|---|---|---|
| 1200 x 630 | 600 x 315 | 1.91:1 | 8 MB | |
| X / Twitter (large card) | 1200 x 628 | 300 x 157 | About 2:1 | 5 MB |
| 1200 x 627 | 200 x 200 | 1.91:1 | 5 MB | |
| Discord | 1200 x 630 | No strict minimum | 1.91:1 | 8 MB |
| Slack | 1200 x 630 | No strict minimum | 1.91:1 | Not specified |
Use 1200 x 630 pixels as the universal size - it works across every major platform. JPEG works best for photographs, PNG for images with transparency or sharp text. Keep important content (logos, headlines) within a centred 1100 x 544 safe zone because some platforms crop the edges. Facebook recommends keeping images under 8 MB; most other platforms cap at 5 MB.
Essential vs Optional Meta Tags
| Tag | Priority | Impact |
|---|---|---|
| <title> | Required | Browser tab, search results, social fallback |
| meta description | Important | Search snippet (Google may override with its own) |
| og:title | Important | Social preview title (falls back to <title>) |
| og:description | Important | Social preview description |
| og:image | Important | Social preview image - links with images get significantly higher engagement |
| og:url | Recommended | Canonical URL for the shared content |
| og:type | Recommended | Content type (website, article, product, profile) |
| twitter:card | Recommended | Card type (summary, summary_large_image) |
| viewport | Required | Responsive rendering on mobile devices |
| robots | Optional | Crawl and index directives (defaults to index, follow) |
Twitter/X Card Types Explained
| Card Type | Image Display | Best For |
|---|---|---|
| summary | Small square thumbnail (150 x 150) | General content, profile links |
| summary_large_image | Large banner image above title | Articles, blog posts, product pages |
| app | App icon with download link | Mobile app promotion |
| player | Embedded video or audio player | Video content, podcasts |
summary_large_image is the most widely used card type. It produces a large banner image above the title and description, which drives higher click-through rates than the smaller summary card. If you are sharing an article or landing page, summary_large_image is almost always the right choice.
Understanding the Robots Meta Tag
The robots directive controls how search engines interact with a page. The default value, index, follow, tells crawlers to add the page to their index and follow all links on it. Most public pages should use this default. noindex, follow hides the page from search results while still passing link equity to other pages - useful for thank-you pages, internal dashboards, or staging URLs. index, nofollow allows the page to appear in results but tells crawlers not to follow any outbound links. noindex, nofollow blocks both indexing and link following - use this for pages that should stay completely private from search engines.
Google respects the robots meta tag as a directive, not a suggestion. If you accidentally set a page to noindex, it will drop from search results within days once Google recrawls it. The generator defaults to index, follow so you do not accidentally hide a page.
Open Graph Type Values
The og:type tag tells platforms what kind of content the page represents. The most common values are:
| Type | When to Use | Additional Tags Available |
|---|---|---|
| website | Homepages, landing pages, general pages | None beyond the basics |
| article | Blog posts, news articles, editorial content | article:published_time, article:author, article:section, article:tag |
| product | Product pages, e-commerce listings | product:price:amount, product:price:currency |
| profile | User profiles, author pages | profile:first_name, profile:last_name, profile:username |
| video.other | Video content pages | video:duration, video:release_date |
| music.song | Music tracks, playlists | music:duration, music:album, music:musician |
If unsure, use website. Facebook treats pages with og:type=article slightly differently in the feed algorithm, giving them a news-style layout. The type value does not affect how other platforms render the link preview.
Common Mistakes with Meta Tags
The most frequent mistake is leaving out the og:image tag entirely. Social platforms will still show the link, but without a preview image the post blends into the feed and gets far less engagement. The second most common error is using an image that is too small - anything under 600 x 315 pixels will either be letter-boxed or ignored by Facebook.
Another issue is putting the wrong attribute on Open Graph tags. The OG spec at ogp.me requires the property attribute (<meta property="og:title">), not name. Twitter Cards are the opposite - they use name (<meta name="twitter:card">). Mixing these up can cause platforms to miss the tags entirely. This generator handles the distinction automatically.
Duplicate titles are also a problem. The <title> element and og:title do not need to be identical. You might want a shorter, punchier OG title for social feeds and a keyword-rich title for Google. This tool lets you fill in one title and generates both, but you can always edit the output before pasting.
Caching is another trap. After deploying updated meta tags, Facebook and LinkedIn will keep showing the old preview for hours or even days. Always use the platform debug tool to force a fresh scrape. If you are running a time-sensitive campaign (product launch, event promotion), update the tags and clear the cache well before sharing the link.
Finally, watch out for relative image URLs. The og:image value must be an absolute URL starting with https://. A relative path like /images/hero.jpg will not resolve and platforms will show a blank preview. Make sure the image URL is publicly accessible too - images behind authentication or on localhost will not load.
How to Debug Social Previews
| Platform | Debug Tool | Status (as of 2026) |
|---|---|---|
| Facebook / Meta | Sharing Debugger (developers.facebook.com/tools/debug/) | Active - has "Scrape Again" to clear cache |
| X / Twitter | cards-dev.twitter.com/validator | Preview removed in 2022; card validation only |
| Post Inspector (linkedin.com/post-inspector/) | Active - shows current cached preview |
Social platforms cache link previews aggressively. After updating your meta tags, use the platform's debug tool to force a refresh. Facebook's debugger has a "Scrape Again" button - sometimes you need to click it two or three times before the CDN cache fully clears. X deprecated its Card Validator preview in 2022 and has not replaced it, so the only way to check your X preview as of 2026 is to paste the link into the tweet composer or use a third-party tool.
For previewing how your OG tags will render before deploying, the OG Preview tool shows a live mockup of the social card. To tidy up the generated HTML before pasting it into your codebase, the HTML Prettifier formats it with proper indentation. And if you need to minify the markup for production, the HTML Minifier strips whitespace and reduces file size.
Sources
Frequently Asked Questions
What are Open Graph meta tags?
Open Graph tags are HTML meta tags that control how your page appears when shared on Facebook, LinkedIn, Discord, and other platforms. Key tags include og:title, og:description, og:image, and og:url. Without them, platforms guess how to display your link.
What is a Twitter Card?
Twitter Cards are meta tags that control how your link previews appear on Twitter (X). The most common type is summary_large_image, which shows a large image above the title and description. Use twitter:card, twitter:title, twitter:description, and twitter:image.
How long should my meta title and description be?
Keep the title under 60 characters and the description under 160 characters for best results in Google search. Social platforms may truncate longer text differently, but these limits work well across all services.
Do I need both Open Graph and Twitter tags?
Twitter falls back to Open Graph tags if Twitter-specific tags are missing. However, including both gives you full control over how your content appears on each platform. This generator creates both sets for you.
Is this tool free and private?
Yes, completely free. All tag generation happens in your browser. Your content data is never sent to any server.
Related Tools
Link to this tool
Copy this HTML to link to this tool from your website or blog.
<a href="https://toolboxkit.io/tools/meta-tag-generator/" title="Meta Tag Generator - Free Online Tool">Try Meta Tag Generator on ToolboxKit.io</a>