What are Open Graph tags?

Open Graph (og:) tags control how your page appears when shared on Facebook, LinkedIn, and other social platforms. They set the title, description, and thumbnail image for link previews.

What is a Twitter Card?

Twitter Cards are meta tags that control how your URL looks when tweeted. Summary cards show a small thumbnail, while summary_large_image cards show a large banner image.

What should the meta description length be?

Google typically displays 150–160 characters of the meta description. The generator shows a live character count and highlights if you exceed the limit.

What is a canonical URL?

A canonical URL tells search engines which version of a page is the primary one, preventing duplicate content issues when a page is accessible via multiple URLs.

Developer 免费无需注册

Meta Tag Generator

Generate SEO-optimized HTML meta tags with live Google and Twitter card preview.

正在加载工具…

关于此工具

Create complete, SEO-ready HTML meta tags in seconds. Fill in your page title, description, keywords, author, canonical URL, og:image URL, and Twitter card type. The tool generates all essential meta tags: charset, viewport, description, keywords, author, robots, Open Graph (og:title, og:description, og:image, og:url), and Twitter Card tags. A live preview pane shows exactly how your page would appear in Google search results and as a Twitter/X card share. One-click copy puts the entire block on your clipboard.

使用方法

1 Enter your page title, description, and optional keywords.
2 Add author, canonical URL, og:image URL, and choose Twitter card type.
3 Watch the live Google search preview and Twitter card preview update in real time.
4 Review the generated HTML meta tag block.
5 Click Copy to copy all tags to your clipboard.

What meta tags actually do for your page

Meta tags are lines of HTML in the <head> of a page that describe the page to machines rather than to human visitors. They never appear in the body of the page, but they decide how your page is summarised in a Google result, how it looks when someone pastes the link into Slack, Facebook, or X, and whether search engines should index it at all. Getting them right is one of the cheapest, highest-leverage things you can do for a page, because the same content can earn very different click-through rates depending on how its title and description are written. This generator builds the whole block for you from a handful of fields and shows live previews so you can edit with intent instead of guessing.

The three families of tags this tool writes

The output is organised into three commented sections, which mirror the three audiences that read them:

Basic SEO tags — charset, viewport, <title>, description, keywords, author, robots, and a canonical link. These speak to search-engine crawlers and to the browser itself.
Open Graph tags (the og: prefix) — read by Facebook, LinkedIn, Slack, Discord, and most messaging apps to build the rich link card. The tool emits og:type, og:title, og:description, og:url, and og:image.
Twitter Card tags — control how the link unfurls on X. The tool writes twitter:card plus title, description, and image. The card type you pick (summary, summary_large_image, app, or player) determines whether the thumbnail is a small square or a wide banner.

Notice that the title and description are reused across all three sections. That is deliberate: keeping them consistent means a search snippet and a social card tell the same story, which builds trust.

A worked example

Suppose you type the title "Free Online Image Compressor — No Upload" and a 142-character description. The live character counters turn red the instant the title passes 60 characters or the description passes 160, because that is roughly where Google truncates with an ellipsis. The Google preview pane redraws your green URL, blue title, and grey snippet exactly as a desktop result would render them. If you also paste an og:image URL, the Twitter card preview loads that image into a wide banner. When everything looks right, one click copies the full block — and because the generator runs entirely in your browser, nothing you type is ever sent to a server.

Practical tips that improve real click-through

Front-load the title. Put the most important keyword in the first 30 characters; the tail is what gets cut off on mobile.
Write the description for a human, not a robot. Google often rewrites descriptions, but a clear, benefit-led sentence still wins clicks when it is shown. Make it read like ad copy, not a keyword list.
Always set og:image to an absolute URL. Relative paths break in link previews. The recommended size is 1200x630 pixels for a large card; smaller images get cropped or rejected.
Use the canonical tag whenever the same content is reachable at more than one URL — for example with and without a trailing slash, or with tracking parameters. It tells search engines which version is the original.

Common mistakes

The keywords meta tag is the most misunderstood field here. Google has ignored it for indexing since 2009, so stuffing it with terms does nothing for ranking — it is included mainly for a few niche search engines and internal site search. Do not spend effort on it. A second frequent error is leaving robots on noindex after launch: the dropdown defaults to index, follow, but if you copied a block from a staging page you may carry over a noindex that quietly removes the live page from search. Finally, remember that meta tags describe a page accurately; they cannot make thin content rank. If a title promises more than the page delivers, the higher click-through is wiped out by a higher bounce rate.

Where to paste the result

The generated block belongs inside the <head>...</head> element of your HTML, ideally near the top so the charset declaration comes before any text content. On a static site you paste it directly; on a CMS like WordPress an SEO plugin usually exposes equivalent fields, and you can use this tool's previews to draft the copy before transferring it. Either way, validate the social cards afterward with the platforms' own debuggers (Facebook's Sharing Debugger and X's Card Validator) so you can confirm the image and text render the way the preview here suggests.