Meta Tags Generator
Generate SEO, Open Graph and Twitter Card meta tags — 12 page types, image and account properties, and a preview of the card as six sites will draw it.
Preview image details
More Open Graph properties
Twitter accounts
<title>The Complete Guide to Astro for Beginners</title> <meta name="description" content="Learn how to build blazing-fast static sites with Astro, step by step, with hands-on examples."> <meta property="og:title" content="The Complete Guide to Astro for Beginners"> <meta property="og:description" content="Learn how to build blazing-fast static sites with Astro, step by step, with hands-on examples."> <meta property="og:url" content="https://example.com/blog/astro-guide"> <meta property="og:image" content="https://example.com/images/astro-guide-cover.png"> <meta property="og:site_name" content="My Dev Blog"> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="The Complete Guide to Astro for Beginners"> <meta name="twitter:description" content="Learn how to build blazing-fast static sites with Astro, step by step, with hands-on examples."> <meta name="twitter:image" content="https://example.com/images/astro-guide-cover.png">
Preview
How each site draws this card. Where the text is cut depends on the reader’s screen, so these lengths are close, not exact.
Check the finished page with the platforms’ own validators
Facebook · X (Twitter) · LinkedIn · Google Rich Results
🔒 Tags are generated in your browser — nothing is uploaded.
What this meta tag generator does
Fill in your page title, description, canonical URL, preview image, and site name, and this tool builds the matching HTML <head> tags in real time. It outputs a <title>, a meta description, the Open Graph tags used by Facebook, LinkedIn, and most link previews (og:title, og:description, og:url, og:image, og:site_name, og:type), and the Twitter Card tags (twitter:card, twitter:site, twitter:creator, twitter:title, twitter:description, twitter:image). Open Graph is a typed vocabulary rather than a fixed list, so Page type offers all twelve types — website, article, book, profile, four music types and four video types — and a type that carries its own properties brings them out as fields: an article gets a publishing, modification and expiration date, an author, a section and tags (each tag written as its own article:tag), a book gets an author, ISBN and release date, a profile a first and last name, username and gender. The preview image takes the three properties that go with it — og:image:alt, og:image:width and og:image:height — written directly after og:image, where they belong. Only fields you fill in produce tags, and every attribute value is HTML-escaped so special characters like &, quotes, and angle brackets stay valid.
How to use the output
Copy the generated block and paste it inside the <head> of your page, above the closing </head> tag. Use an absolute https:// URL for the preview image (roughly 1200×630 px works well for large cards), and keep the description around 150–160 characters so it is not truncated in search results. Choose summary_large_image for a big banner-style Twitter preview or summary for a compact thumbnail. As you type, the tool also flags common mistakes below the output — a title or description that search engines will truncate, a description that is too thin, or a preview image or URL that is relative instead of an absolute https:// link that social crawlers can resolve.
See the card before you ship it
Twelve lines of <meta> do not tell you whether your title survives Google's cut. Under the tag block the same fields are drawn as Google, X, Facebook, LinkedIn, Pinterest and Slack will draw them — Google as a search result with its breadcrumb and no picture, X as a banner or a square thumbnail depending on the card type you chose, LinkedIn with no description at all because its feed card has none, Pinterest as a tall pin, Slack as an unfurl. Each one cuts the title and description where that site cuts them, so a headline too long for Google is visibly short there and whole on X. The picture is fetched by your own browser straight from the address you typed; nothing is uploaded, and an address that does not resolve simply shows an empty frame. Where the text is cut depends on the reader's screen, so treat the lengths as close rather than exact.
Frequently asked questions
Which meta tags does it generate?
A page title, a meta description, Open Graph tags (og:title, og:description, og:url, og:image with its alt, width and height, og:site_name and og:type), and Twitter Card tags (twitter:card, twitter:site, twitter:creator, twitter:title, twitter:description, twitter:image). og:type is whichever of the twelve Open Graph types you pick — website unless you change it — and picking article, book or profile adds that type's own properties too, such as article:published_time or book:isbn. Tags for fields you leave blank are omitted.
What is the difference between summary and summary_large_image?
They are the two common Twitter card types. summary_large_image shows a large banner-style preview image, while summary shows a small square thumbnail beside the text. Pick whichever matches your image.
What do the warnings below the output mean?
They are gentle SEO and social-sharing checks: a title over 60 characters or a description over 160 may be truncated, a description under 50 characters is likely too thin, og:image or og:url values should be absolute https:// URLs so link previews resolve, and an image width or height that is not a whole number of pixels — a value like 1200px — is left out of the tags rather than dropped in silence. Warnings never block the output — they just highlight things worth fixing.
Is anything I type uploaded to a server?
No. The tags are built entirely in your browser with JavaScript. Your title, description, URLs, and image link are never sent, stored, or uploaded anywhere. The one thing that leaves your browser is the preview image itself, which your browser loads straight from the address you typed, the same way any page on the web loads a picture.
Can I see how the link preview will look?
Yes. Under the tag block the same fields are drawn as Google, X, Facebook, LinkedIn, Pinterest and Slack draw them, one at a time. Each site is different and the preview keeps those differences: Google shows a breadcrumb and no picture, X follows your card type, LinkedIn draws no description, Pinterest is a tall pin. Titles and descriptions are cut where each site cuts them, so you can watch a headline go short on Google and stay whole on X. Where the cut falls depends on the reader's screen, so treat the lengths as close rather than exact.
What does the page type change?
og:type, and which fields the form shows. Open Graph defines twelve types — website, article, book, profile, four music types and four video types — and some of them carry their own properties. Choose Article and the form adds a publishing, modification and expiration date, an author, a section and tags; Book adds an author, ISBN, release date and tags; Profile adds a first and last name, username and gender. Each is written under its own prefix, such as article:published_time, and a comma-separated tag list becomes one article:tag per tag.