How to use the Meta Tag Generator
- Enter the page title, meta description and canonical URL. The counters warn you before Google would truncate them.
- Fill in the Open Graph image, site name and locale, and pick an X card type — the Google, Facebook and X previews update as you type.
- Set robots directives, theme colour and icon paths if you need them.
- Copy the Full <head> output for a hand-coded site, or switch to Webflow custom code to get only the tags Webflow doesn’t generate from its settings.
What are meta tags?
Meta tags are HTML elements in a page’s <head> that describe the page to browsers, search engines and social networks. They are invisible on the page itself but decide how it appears in Google results, how a link unfurls in Slack, LinkedIn or WhatsApp, whether it may be indexed, and how it scales on a phone.
The tags that actually matter
| Tag | Used by | Purpose |
|---|---|---|
<title> | Google, browser tabs | The clickable headline in search results — a confirmed relevance signal. |
meta description | Google, Bing | Often used as the snippet under the title; affects click-through, not rankings. |
link rel="canonical" | Google, Bing | Names the preferred URL when the same content is reachable at several addresses (parameters, trailing slashes, http/https). |
meta robots | All major crawlers | noindex keeps a page out of results; max-image-preview:large allows large image thumbnails in Discover. |
og:* | Facebook, LinkedIn, Slack, Discord, iMessage… | The Open Graph protocol — title, description, image and type of a shared link. |
twitter:* | X | Card layout (summary or summary_large_image) and account attribution; falls back to og: tags. |
viewport, charset | Browsers | Correct mobile scaling and text encoding. |
The old meta keywords tag is deliberately not generated: Google has ignored it for well over a decade, and it only reveals your keyword strategy to competitors.
Common mistakes this generator avoids
- Relative og:image URLs. Social scrapers need an absolute
https://URL. Addog:image:widthandog:image:heightso the image renders on the very first share instead of after a re-scrape. - Noindex plus canonical. Pointing a canonical at another URL while also setting
noindexsends mixed signals; pick one. - Unescaped quotes. A
"inside a description breaks the attribute. All values are HTML-escaped in the output. - Duplicate tags. Platforms such as Webflow, WordPress SEO plugins and Shopify already output many tags. Adding a second
<title>orog:imageby hand leaves crawlers to guess which one wins.
Webflow: settings fields vs custom code
Webflow writes the title, description, Open Graph title/description/image, canonical, charset and viewport for you from Page and Site settings, so pasting a full head into custom code would duplicate them. Choose Webflow custom code above and the output contains only what Webflow can’t set natively — robots directives, theme-color, og:site_name, og:locale, X account handles and extra icon links. On CMS template pages, the same custom code box accepts inserted CMS fields. After publishing, verify the live output with the Meta Tag Checker and the Open Graph Checker, or design a share image with the OG Image Generator.
Tools that pair well with the Meta Tag Generator
- Favicon Generator — Make a complete favicon package from a logo, a letter or an emoji: a multi-size favicon.ico, Apple touch icon, Android/PWA icons, a Webflow webclip, the web manifest and the HTML tags to paste.
- Schema Markup Generator — Pick a schema type, fill in the form and copy ready-to-paste JSON-LD.
- SEO Checker & Site Audit — Paste a URL to run up to 70 on-page SEO checks in seconds.
- Heading Checker — Visualise the heading outline of any page.
Frequently asked questions
Do meta tags still matter for SEO?
What size should an Open Graph image be?
Do I need both Open Graph and Twitter tags?
og:title, og:description and og:image as fallbacks, so you only need twitter:card (and optionally twitter:site) on top of Open Graph.