glunty

Meta Tag Generator (SEO + Open Graph)

SEO, Open Graph, and Twitter Card tags from your page details. Local only.

What this tool does

A meta tag generator turns a handful of page details into the block of HTML that search engines and social platforms read to build a listing or a link preview. Fill in a page title, a meta description, a canonical URL, and (optionally) an image, then copy the generated tags into the <head> of your page. It emits the classic SEO tags (<title>, meta description, canonical), the Open Graph set that Facebook, LinkedIn, and most chat apps use, and the Twitter Card set for X. Every value you type is HTML-escaped before it lands in an attribute, so a stray & or quote can't break the markup. Everything runs in your browser; nothing you type is sent anywhere.

How to use it

Type or paste your page title and description; the live counters show how close you are to the ideal lengths (about 50 to 60 characters for the title, 150 to 160 for the description). Add the canonical URL for the page, and an image URL if you want a picture in the social preview. Pick a Twitter card type: summary_large_image for a wide banner or summary for a small thumbnail. The output box updates as you type. When it looks right, press Copy tags and paste the block inside your page's <head>.

Common use cases

  • Adding SEO and social preview tags to a static HTML page or a hand-built landing page.
  • Producing a starter block of Open Graph and Twitter Card tags to drop into a template.
  • Checking how your title and description compare against the 50-60 and 150-160 character targets.
  • Generating a correct canonical link so duplicate URLs consolidate to one address.
  • Teaching or documenting what a complete set of head meta tags looks like.

Common pitfalls

  • Relative image or canonical URLs. Open Graph and canonical tags expect absolute URLs (starting with https://). A relative path like /og.png often fails to resolve when another site fetches your preview.
  • Card type without an image. summary_large_image only shows a large banner when a valid, reachable image URL is present. With no image, most platforms fall back to a plain text card regardless of the card type.
  • Over-long titles and descriptions. Text past roughly 60 characters in a title or 160 in a description is usually truncated in the search result, so put the important words first.
  • Forgetting to keep the title tag. og:title only controls the social card. You still need the real <title> for the browser tab and the search result heading; this tool emits both.

Frequently asked questions

What meta tags does this generator create?
It produces a title tag, a meta description, a canonical link, five Open Graph tags (og:title, og:description, og:url, og:image, and og:type set to website), and four Twitter Card tags (twitter:card, twitter:title, twitter:description, and twitter:image). Paste the whole block into the head section of your HTML page. The og:image and twitter:image lines are only emitted when you supply an image URL.
How long should the title and meta description be?
Search engines typically display roughly the first 50 to 60 characters of a title and 150 to 160 characters of a description before truncating with an ellipsis. The live counters flag when you land in those ranges. Shorter is fine; going well over the limit means the tail may be cut off in the search result.
What is the difference between Open Graph and Twitter Card tags?
Open Graph (the og: prefix) is the protocol most social platforms read when they build a link preview, including Facebook, LinkedIn, and many chat apps. Twitter Cards are the equivalent for X (formerly Twitter). The two overlap heavily, so this tool fills both from the same inputs. When a Twitter tag is missing, X falls back to the matching Open Graph tag.
Why are characters like the ampersand escaped in the output?
Your values are inserted into HTML attributes, so any ampersand, double quote, less-than, or greater-than character is replaced by its HTML entity before it reaches the snippet. Without that step, a stray quote or ampersand could break the attribute or the surrounding markup. The escaped block is safe to paste directly into your page head.
Which Twitter card type should I choose?
Use summary_large_image when you have a wide, high-quality image you want shown as a large banner above the title; it suits articles and marketing pages. Use summary for a compact card with a small square thumbnail beside the text, which fits reference pages or sites without a strong hero image. Both still need an image URL to show a picture.
Do I still need a title tag if I set og:title?
Yes. The title tag drives the browser tab label and the clickable heading in a search result, while og:title only controls the social preview. Keep both, and it is normal for them to match. This tool always emits a title tag plus og:title and twitter:title so every surface is covered.

Embed this tool

Free for any use; attribution appreciated. Paste this on your site:

The embed runs the same tool that lives at this URL. No tracking; no ads inside the embed. Resize height as needed for your layout.

Cite this tool

For academic, journalistic, or technical references. Pick a format:

Citations use 2026 as the publication year. Access date is left as a fillable placeholder where the citation style expects one.

Embedded tool from glunty.com