QiLing Tools

🪧Meta Tag Generator - SEO, Open Graph & Twitter Card Preview

Whether a page earns the click in search results, and whether it turns into a good-looking card when shared, depends largely on a few lines in its <head>. Fill in the title, description, canonical URL, share image and so on, and get a complete <head> snippet: title and meta description, canonical, robots (index/follow plus directives such as max-image-preview), Open Graph (og:type, og:image with size and alt text, og:locale), X (Twitter) card tags, hreflang alternates with x-default, favicon, Apple touch icon, manifest and theme-color, plus JSON-LD structured data templates for WebSite, Organization, Article, Product and FAQ pages. Under the title and description you see both the character count and an estimated pixel width based on the font Google uses; titles beyond about 600px and descriptions beyond about 920px get truncated, and the preview truncates them the same way. Switch between Google result, Facebook / LinkedIn, X and WeChat share card previews. You can also inspect an existing page: paste its HTML source to list every tag found and flag problems such as missing descriptions, overlong titles, relative canonical or og:image URLs, invalid hreflang codes and broken JSON-LD, then load the existing tags into the generator with one click. Everything runs locally in your browser.

Free · No sign-up · Runs in your browserLast updated:

Loading tool...

How to use Meta Tag Generator

  1. 1Fill in the title, description, canonical URL and share image, then set robots, hreflang, icons and JSON-LD as needed
  2. 2Switch between Google, Facebook, X and WeChat previews and tune the copy using the length and pixel meters
  3. 3Copy or download the <head> code, or switch to Inspect a page and paste HTML to find issues

FAQ

How long should the title and meta description be?
Google truncates by pixel width, not characters: on desktop roughly 600px for titles (about 50–60 characters) and about 920px for descriptions (about 150–160 characters). The tool estimates pixel width from the Arial glyph widths Google uses, and the meter turns red when text will be cut off. Search engines may still rewrite titles or pick their own snippet.
What size should og:image be?
Use 1200×630 pixels (1.91:1), keep the file under 5 MB and give a full https URL — many platforms cannot fetch relative URLs. X’s large image card uses the same ratio; the small summary card crops to a square, so keep key content centred.
Does WeChat use these tags for share cards?
When a link is opened inside WeChat and shared, WeChat usually reads the page title, og:description (or description) and an image from the page as the thumbnail; official accounts and pages using the WeChat JS-SDK use the values set through the SDK instead. The WeChat preview here shows how the title and description are clipped in a card.
Does inspecting a page fetch the URL?
No. For privacy and cross-origin reasons the tool never requests URLs on your behalf; paste the page source (Ctrl+U or ⌥⌘U in your browser) and it is parsed locally. Images in the previews are loaded directly by your browser.