Meta Tag Generator
Create title, meta description, canonical, Open Graph and Twitter card tags, with an optional share image and length checks. Copy or download meta-tags.html.
What is the Meta Tag Generator?
Every page needs a title tag, a meta description and a canonical link, and pages that get shared on WhatsApp, Facebook, LinkedIn or X benefit from Open Graph and Twitter card tags too. Writing them by hand is repetitive, and one unescaped quote or ampersand can break the markup. This Meta Tag Generator turns a page title, a short description, the page address and an optional share image into a clean block of HTML tags you can paste straight into your site or download as meta-tags.html.
The tool escapes characters such as &, <, > and quotation marks, so a title like Tips & Tricks stays valid HTML. It produces the title, meta description, canonical link, og:type, og:title, og:description and og:url, plus twitter:card, twitter:title and twitter:description. Add a share image URL and it also writes og:image and twitter:image and switches the card to summary_large_image. The details count the characters in your title and description and suggest a typical length. It does not inspect your page or preview how Google will display the result, and all processing happens locally in your browser.
How to use the Meta Tag Generator
- Type your page title into Page title (up to 300 characters).
- Write a short summary of the page in Description (up to 1,000 characters).
- Paste the full preferred address of the page, starting with https://, into Canonical page URL.
- Optionally paste the full address of a share picture into Share image URL, then click Process to generate the HTML snippet; invalid addresses are flagged with a plain message.
- Check the title and description character counts under the result, then click Copy result or Download (meta-tags.html) and paste the tags into the head section of your page or theme template, replacing any duplicates.
Features
- Generates title, meta description, canonical, og:type, og:title, og:description, og:url and Twitter card tags in one block.
- Optional share image adds og:image and twitter:image and uses a summary_large_image card.
- Escapes &, <, >, double quotes and apostrophes so the output is valid, safe HTML.
- Counts title and description characters and suggests 50–60 and 140–160 characters.
- Checks that every address is an absolute HTTP or HTTPS URL, with Copy result and Download as meta-tags.html.
Why use this meta tag generator
- Save time setting up head tags for new pages, posts or landing pages.
- Avoid broken markup from quotes and ampersands in your titles.
- Signal your preferred URL to search engines with a canonical link.
- Make shared links show a proper title, description and image on social apps.
How it works
Escape text and quoted attributes; serialize the supplied HTTP(S) canonical URL into static tag snippets.
Examples
Basic tags without an image
Input: Title: Toolnest — Local Browser Tools | Description: Useful tools that run locally in your browser. | URL: https://example.com/tools/ | Share image: empty
Result: <title>Toolnest — Local Browser Tools</title> <meta name="description" content="Useful tools that run locally in your browser."> <link rel="canonical" href="https://example.com/tools/"> <meta property="og:type" content="website"> <meta property="og:title" content="Toolnest — Local Browser Tools"> <meta property="og:description" content="Useful tools that run locally in your browser."> <meta property="og:url" content="https://example.com/tools/"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Toolnest — Local Browser Tools"> <meta name="twitter:description" content="Useful tools that run locally in your browser."> Title: 30 characters (good length). Description: 46 characters (short; 140–160 is typical). All values are HTML-escaped. Paste into the <head> of your page. Both texts are on the short side, so the details suggest typical lengths.
News page with a share image
Input: Title: Paithan News Today – Latest Local Updates in Marathi | Description: Read the latest Paithan news, government scheme updates, exam results and local events in Marathi and English, updated daily for readers across the region. | URL: https://example.com/news/ | Share image: https://example.com/images/cover.jpg
Result: <title>Paithan News Today – Latest Local Updates in Marathi</title> <meta name="description" content="Read the latest Paithan news, government scheme updates, exam results and local events in Marathi and English, updated daily for readers across the region."> <link rel="canonical" href="https://example.com/news/"> <meta property="og:type" content="website"> <meta property="og:title" content="Paithan News Today – Latest Local Updates in Marathi"> <meta property="og:description" content="Read the latest Paithan news, government scheme updates, exam results and local events in Marathi and English, updated daily for readers across the region."> <meta property="og:url" content="https://example.com/news/"> <meta property="og:image" content="https://example.com/images/cover.jpg"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Paithan News Today – Latest Local Updates in Marathi"> <meta name="twitter:description" content="Read the latest Paithan news, government scheme updates, exam results and local events in Marathi and English, updated daily for readers across the region."> <meta name="twitter:image" content="https://example.com/images/cover.jpg"> Title: 52 characters (good length). Description: 155 characters (good length). All values are HTML-escaped. Paste into the <head> of your page. The image URL adds og:image and twitter:image and switches the card to summary_large_image.
Special characters escaped
Input: Title: Tips & Tricks for "Fast" Pages | Description: Speed up your site in 5 steps. | URL: https://example.com/blog/fast-pages | Share image: empty
Result: <title>Tips & Tricks for "Fast" Pages</title> <meta name="description" content="Speed up your site in 5 steps."> <link rel="canonical" href="https://example.com/blog/fast-pages"> <meta property="og:type" content="website"> <meta property="og:title" content="Tips & Tricks for "Fast" Pages"> <meta property="og:description" content="Speed up your site in 5 steps."> <meta property="og:url" content="https://example.com/blog/fast-pages"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Tips & Tricks for "Fast" Pages"> <meta name="twitter:description" content="Speed up your site in 5 steps."> Title: 30 characters (good length). Description: 30 characters (short; 140–160 is typical). All values are HTML-escaped. Paste into the <head> of your page.
Results are estimates for general information, not financial, medical, legal, tax, or property advice. Confirm important figures with the relevant institution or a qualified professional.
Meta Tag Generator: frequently asked questions
Which tags does the generator create?
It outputs a title element, a meta description, a canonical link, four Open Graph tags (og:type set to website, og:title, og:description and og:url) and three Twitter card tags (twitter:card, twitter:title and twitter:description). If you fill in Share image URL, it also adds og:image and twitter:image and sets the card type to summary_large_image instead of summary. It does not create robots or viewport tags.
How long should my title and description be?
The fields accept up to 300 and 1,000 characters, but those are input limits, not recommendations. The details under the result count your characters and give guidance: aim for about 50–60 characters for a title and 140–160 for a description, because longer text may be cut off in search results. Put the most important words first. The tool counts characters, not pixels, and does not preview the snippet.
Why does my title show & in the output?
Characters such as &, <, > and quotation marks have special meaning in HTML, so the generator converts them to entities like & and ". Browsers, search engines and social apps display them as the normal characters. This escaping prevents a stray quote from cutting off your description or breaking the page markup.
What should I enter as the canonical URL?
Enter the single, preferred address of the page, including https://, for example https://example.com/blog/fast-pages. Relative paths, bare domains and other schemes are rejected. If the same content is reachable at several addresses, such as with tracking parameters or a trailing slash, the canonical tells search engines which version to treat as the main one.
Will these tags guarantee my snippet or ranking in Google?
No. The generator only produces markup from what you type. Search engines may rewrite titles and descriptions based on the query, and rankings depend on many other factors. Before pasting, check that your theme or SEO plugin is not already printing the same tags, because duplicate titles or canonicals send mixed signals.