How to use
- Fill in Title, Description and Canonical URL for your page.
- Add Image URL, Image alt and Site name for link previews.
- Choose og:type and Twitter card, and select Include Open Graph and Include Twitter Card as needed.
- Review Google, Facebook and X in Preview, and check the counters under Title and Description.
- Click Copy and paste the code into your page’s head section.
Examples
Coffee blog post
Input
title: How to Make Cold Brew Coffee at Home description: Make cold brew with coarsely ground coffee, water and a mason jar. Follow our recipe for a smooth batch you can keep in the fridge. canonical: https://example.com/blog/cold-brew image: https://example.com/images/cold-brew.jpg imageAlt: A glass of cold brew coffee with ice siteName: Mason Jar Coffee twSite: @masonjarcoffee author: Jamie Miller
Output
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>How to Make Cold Brew Coffee at Home</title> <meta name="description" content="Make cold brew with coarsely ground coffee, water and a mason jar. Follow our recipe for a smooth batch you can keep in the fridge."> <meta name="robots" content="index, follow, max-image-preview:large"> <meta name="author" content="Jamie Miller"> <link rel="canonical" href="https://example.com/blog/cold-brew"> <!-- Open Graph --> <meta property="og:type" content="article"> <meta property="og:url" content="https://example.com/blog/cold-brew"> <meta property="og:title" content="How to Make Cold Brew Coffee at Home"> <meta property="og:description" content="Make cold brew with coarsely ground coffee, water and a mason jar. Follow our recipe for a smooth batch you can keep in the fridge."> <meta property="og:image" content="https://example.com/images/cold-brew.jpg"> <meta property="og:image:alt" content="A glass of cold brew coffee with ice"> <meta property="og:site_name" content="Mason Jar Coffee"> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@masonjarcoffee"> <meta name="twitter:image:alt" content="A glass of cold brew coffee with ice">
Product page with separate social copy
Input
title: Lightweight & Waterproof Trail Shoes | Ridge Supply description: Shop waterproof trail shoes with a grippy sole for muddy paths. Choose men's and women's sizes, with free US shipping on orders over $75. canonical: https://shop.example.com/products/trail-shoes image: https://shop.example.com/images/trail-shoes.jpg imageAlt: Blue trail running shoes on a rocky path siteName: Ridge Supply socialTitle: Meet your next pair of trail shoes socialDescription: Muddy trails ahead? Explore lightweight, waterproof shoes from Ridge Supply. locale: en_US
Output
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Lightweight & Waterproof Trail Shoes | Ridge Supply</title> <meta name="description" content="Shop waterproof trail shoes with a grippy sole for muddy paths. Choose men's and women's sizes, with free US shipping on orders over $75."> <link rel="canonical" href="https://shop.example.com/products/trail-shoes"> <!-- Open Graph --> <meta property="og:type" content="product"> <meta property="og:url" content="https://shop.example.com/products/trail-shoes"> <meta property="og:title" content="Meet your next pair of trail shoes"> <meta property="og:description" content="Muddy trails ahead? Explore lightweight, waterproof shoes from Ridge Supply."> <meta property="og:image" content="https://shop.example.com/images/trail-shoes.jpg"> <meta property="og:image:alt" content="Blue trail running shoes on a rocky path"> <meta property="og:site_name" content="Ridge Supply"> <meta property="og:locale" content="en_US"> <!-- Twitter --> <meta name="twitter:card" content="summary"> <meta name="twitter:image:alt" content="Blue trail running shoes on a rocky path">
FAQ
Can I generate meta tags from an existing URL?
This tool builds tags from the fields you enter; it does not fetch tags from an existing page. Use View Page Source to inspect a page’s current tags.
Does this generator include meta keywords?
It does not generate meta keywords, revisit-after, language or copyright tags.
What image size should I use for Open Graph?
The tool recommends 1200×630 pixels and warns when an image is less than 600 pixels wide or 315 pixels high. Use an absolute https:// URL that points to a public image file.
Will Google show my exact title and description?
Google may rewrite titles and descriptions. The preview does not guarantee the text that will appear in search results.
Are my meta tag fields saved or uploaded?
Tags are generated in your browser, and the tool does not send your field values to the site’s server. Only checkbox and select options are saved locally, not text fields. Opening Facebook or X in Preview loads Image URL directly from that address.