Meta Tag Generator

What Are HTML Meta Tags?

HTML meta tags are snippets of code placed inside the <head> section of a web page. They provide metadata — information about the page that is not directly visible to visitors but is read by search engines, social media platforms, and browsers. Meta tags influence how your page appears in search results, how it is shared on social media, and how the browser renders it.

While meta tags alone do not guarantee high search rankings, they are a foundational element of on-page SEO. A well-crafted title tag and meta description can significantly improve your click-through rate (CTR) from search engine results pages (SERPs), which in turn can positively influence rankings.

The Title Tag

The <title> tag is arguably the single most important on-page SEO element. It appears as the clickable headline in search results, in browser tabs, and as the default text when a user bookmarks your page.

Best practices for title tags:

Keep it under 60 characters. Google typically displays the first 50–60 characters. Titles longer than this are truncated with an ellipsis, which can reduce CTR.
Put primary keywords near the beginning. Search engines give slightly more weight to words that appear early in the title.
Make each title unique. Duplicate titles across pages confuse search engines and dilute ranking signals.
Write for humans first. The title should accurately describe the page content and entice clicks. Keyword stuffing harms CTR and can trigger spam filters.

The Meta Description

The <meta name="description"> tag provides a brief summary of the page content. Search engines often display this text as the snippet below the title in search results.

Key guidelines:

Keep it between 120 and 160 characters. Google may display up to about 155–160 characters on desktop and fewer on mobile. Aim for this range to ensure your full message is visible.
Include a call to action. Phrases like “Learn how to...”, “Free online tool...”, or “Get started today” can improve CTR.
Include target keywords naturally. Google bolds search terms in the snippet, which draws the eye.
Do not duplicate descriptions. Every page should have a unique description that accurately reflects its specific content.

Note that Google sometimes ignores the meta description and generates its own snippet from page content. This happens when Google determines that another passage better answers the user’s query. Despite this, providing a well-written meta description remains a best practice.

The Robots Meta Tag

The <meta name="robots"> tag tells search engine crawlers how to handle the page. Common directives include:

index / noindex: Whether the page should appear in search results.
follow / nofollow: Whether crawlers should follow links on the page.
noarchive: Prevents search engines from showing a cached copy of the page.
nosnippet: Prevents search engines from showing a text snippet or video preview in results.

The default behavior (when no robots tag is present) is index, follow, which means the page will be indexed and all links will be followed.

Open Graph Meta Tags

Open Graph (OG) is a protocol originally created by Facebook that allows web pages to control how they appear when shared on social media. OG tags are used by Facebook, LinkedIn, Pinterest, Discord, Slack, and many other platforms that display link previews.

The essential Open Graph tags are:

og:title: The title displayed in the social preview. Can differ from the HTML title tag for social-specific messaging.
og:description: The description shown below the title in the social preview.
og:image: The URL of the image displayed in the preview. Facebook recommends images at least 1200×630 pixels.
og:url: The canonical URL of the page. This helps consolidate engagement metrics when the same content is accessible via multiple URLs.
og:type: The type of content. Common values include website, article, and product.

Without OG tags, social platforms attempt to infer a title, description, and image from the page content, which often produces poor results — wrong images, truncated descriptions, or missing previews entirely.

Twitter Card Meta Tags

Twitter Cards are Twitter’s equivalent of Open Graph. They control how your link appears in tweets. The primary card types are:

summary: A small card with a thumbnail image, title, and description.
summary_large_image: A larger card with a prominent image above the title and description. This is the most commonly used type for blog posts and articles.
app: A card designed for mobile app promotion with direct download links.
player: A card that embeds audio or video content directly in the tweet.

Twitter will fall back to Open Graph tags if Twitter-specific tags are not present. For example, if twitter:title is missing, Twitter uses og:title instead. However, specifying both gives you more control over how your content appears on each platform.

The Viewport Meta Tag

The <meta name="viewport"> tag is critical for responsive web design. The standard value is:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Without this tag, mobile browsers render the page at a desktop viewport width (typically 980px) and then scale it down to fit the screen, making text tiny and forcing users to zoom. Including the viewport meta tag ensures your responsive CSS media queries work correctly on mobile devices.

Keywords Meta Tag: Still Relevant?

The <meta name="keywords"> tag was once a significant ranking factor, but Google publicly confirmed in 2009 that it does not use the keywords meta tag for ranking. Bing has stated it uses the tag as a spam signal (pages with keyword-stuffed meta tags may be penalized).

Despite being irrelevant for Google ranking, some SEO professionals still include a modest list of keywords for internal documentation purposes or for the rare search engine that still considers them. If you include keywords, keep the list short and relevant — never stuff dozens of terms.

How This Tool Works

This meta tag generator runs entirely in your browser. As you fill in the form fields, the tool generates the corresponding HTML meta tags in real-time. Character counts for the title (60 max) and description (160 max) are shown next to each field to help you stay within recommended limits.

Special characters in your input (such as quotes, angle brackets, and ampersands) are automatically escaped to produce valid HTML. The generated output includes charset, viewport, basic SEO tags, Open Graph tags, and Twitter Card tags — everything you need to paste into your page’s <head> section.

Frequently Asked Questions

Where do I put meta tags in my HTML?

All meta tags go inside the <head> section of your HTML document, before the closing </head> tag. The order of meta tags within the head does not matter, but convention places <meta charset> first and the <title> tag early.

How do I test my Open Graph tags?

Facebook provides the Sharing Debugger tool that lets you enter a URL and see exactly how Facebook reads your OG tags. Twitter has a similar Card Validator. LinkedIn offers a Post Inspector tool. Each platform caches link previews, so you may need to use these tools to clear the cache after updating your tags.

Do I need both Open Graph and Twitter Card tags?

Strictly speaking, no. Twitter falls back to OG tags when Twitter-specific tags are absent. However, having both gives you independent control over how your content appears on each platform. For example, you might want a shorter description on Twitter than on Facebook.

Does the meta description affect SEO rankings?

Google has stated that the meta description is not a direct ranking factor. However, a compelling meta description improves CTR, and higher CTR can indirectly influence rankings. Think of the meta description as advertising copy for your search result listing.

What image size should I use for og:image?

Facebook recommends a minimum of 1200×630 pixels for optimal display on high-resolution devices. The image should have an aspect ratio of approximately 1.91:1. Images smaller than 600×315 pixels may display as a small thumbnail rather than a large preview card.

Can I have multiple title tags on one page?

No. Each HTML page should have exactly one <title> tag. If multiple title tags are present, browsers will use the first one, and search engines may become confused about the intended title. Similarly, there should be only one <meta name="description"> tag per page.