ToolsForWeb

Meta Tag Generator

Fill in a page's title, description and social image and get a complete <head> block: the title and meta description, the canonical link, a robots directive, and the Open Graph and Twitter Card tags — with the social title and description inheriting the page ones unless you override them. Runs entirely in your browser.

Loading tool…

About this tool

Fill in a page's title, description and social image and the tool assembles the block of tags its <head> should carry: the <title>, the meta description, the canonical link, an optional robots directive, and the Open Graph and Twitter Card tags. The social title and description inherit the page ones automatically, so the common case is three fields; the Open Graph and Twitter groups are there for when you want a different headline or image on the share card. Character counters under the title and description show where you stand against the lengths search engines typically display, turning red past the mark without stopping you. Every value is HTML-escaped and empty fields are dropped, so the output is safe to paste straight in. Nothing is uploaded — the block is built in your browser.

When to use it

Writing the <head> for a new page or template and wanting the title, description, canonical and social tags in one consistent block.
Adding Open Graph and Twitter Card tags to a page so it gets a proper preview when shared on social media or in chat apps.
Setting a noindex directive on a staging, thank-you or filtered page without hand-typing the meta syntax.
Checking your title and description against the length search results tend to show before briefing a writer or CMS editor.

Questions

What is the difference between the title, og:title and twitter:title?

The <title> is what the browser tab shows and what Google usually uses as the clickable heading in search results. og:title is the headline on the card when the page is shared on Facebook, LinkedIn, Slack, WhatsApp and most other apps that read Open Graph. twitter:title is the same idea for X. In practice you want one headline everywhere, so this tool copies the page title into og:title and twitter:title for you; fill in the OG or Twitter title field only when you genuinely want the share card to say something different from the search listing.

How long should the meta description be, and why does Google sometimes rewrite it?

Aim for roughly 150 to 160 characters — that is about what Google shows on desktop before truncating, and the counter here flags 160. But length is not the real point: Google rewrites the description snippet for the majority of results, pulling a passage from the page body that matches the user's query instead of using your meta tag. A good description is still worth writing because it is the fallback and it is often what social and other search engines display, but treat it as a suggestion to Google, not a setting.

When do I actually need a canonical tag?

Whenever the same or very similar content is reachable at more than one URL: a product page that also lives under a category path, pages with tracking parameters, a printer-friendly version, http and https, or www and non-www. The canonical tells search engines which URL is the real one so ranking signals are not split. If a page has only one address, a self-referential canonical — the page pointing at itself — is still recommended: it is harmless and it protects you when someone links to your page with a stray ?ref= parameter attached.

What is the difference between summary and summary_large_image?

They are the two Twitter Card layouts this tool supports. summary is a small square thumbnail next to the title and description. summary_large_image puts a full-width image above the text, which is the format most people want for articles and landing pages. If you leave the card set to auto, the tool emits summary_large_image whenever an image is present, since that is the usual intent. Pick summary explicitly when you only have a logo-sized image or want the compact layout.

What size should the social image be?

1200 by 630 pixels is the safe choice — it satisfies Open Graph's recommended 1.91:1 ratio and Twitter's large-image card, and it is comfortably above the 300-pixel minimum width crawlers enforce. Keep it under about 5 MB, use PNG or JPEG, and always give an absolute URL (https://example.com/og.png, not /og.png) because the scrapers that fetch it have no base URL to resolve a relative path against. Put any important text near the centre, since different apps crop the edges differently.

Do Open Graph tags help my SEO ranking?

Not directly. Google has said Open Graph and Twitter tags are not ranking factors; it reads them for some features but they do not lift your position. What they do is control how your link looks when it is shared — a page with a clear og:title, description and image gets a rich, clickable card instead of a bare URL, and that drives clicks and shares, which is where the value is. Think of them as social presentation, not search optimisation.

Do I need twitter: tags if I already have og: tags?

Usually not many. X falls back to the Open Graph tags when the matching twitter: tag is missing — og:title stands in for twitter:title, og:image for twitter:image, and so on. The one tag with no Open Graph equivalent is twitter:card, which chooses the layout, so this tool emits it for you when an image is present. Add twitter:site (your @handle) if you want the 'via @account' attribution, and only override the title, description or image when X should show something different from everywhere else.

What is the difference between the robots meta tag and robots.txt?

robots.txt, at the root of your domain, controls crawling — whether a bot is allowed to fetch a URL at all. The robots meta tag (and the equivalent X-Robots-Tag header) controls indexing — whether a page that has been fetched may appear in search results. The important consequence: if you block a page in robots.txt, Google cannot see its noindex meta tag, so the URL can still show up in results as a bare link. To keep a page out of the index, allow crawling and use noindex; use robots.txt to save crawl budget on things like faceted-search URLs, not to hide pages.

Should these tags be unique on every page?

The title and description, yes — every page needs its own, written for that page's content and the query it targets. Duplicate titles across a site are one of the most common technical-SEO problems and they make your own results compete with each other. The canonical must be per-page by definition. og:type and twitter:card are fine to keep constant within a section (all articles use article), and og:site_name is the same site-wide. The social image is often per-page for articles but a single branded default is acceptable for the rest of a site.

Related tools