Meta Tag Generator (SEO, Open Graph, Twitter)
Create title, description, canonical, Open Graph and Twitter card tags.
0 characters (aim for 50 to 60). Add a title.
0 characters (aim for 120 to 160). Add a description.
Google preview (approximate)
example.com
Your page title
Your meta description will appear here.
- Add a title. It is the most important tag for search results and link previews.
- Add a description. Without one, search engines and social sites pick text from the page.
Use via API
Generate HTML <head> tags for SEO and social sharing (title, description, canonical, robots, Open Graph, Twitter card), with length advice. Send JSON, get JSON back.
POST https://pithlab.com/api/v1/tools/meta-tag-generator
curl https://pithlab.com/api/v1/tools/meta-tag-generator \
-H "Authorization: Bearer $PITHLAB_KEY" \
-H "Content-Type: application/json" \
-d '{"title":"Handmade Oak Furniture | Northwood Studio","description":"Solid oak tables, chairs and shelving, made to order in our Yorkshire workshop and delivered across the UK.","canonicalUrl":"https://northwood.example/","imageUrl":"https://northwood.example/og.jpg","siteName":"Northwood Studio"}'About the Meta Tag Generator
Generate SEO meta tags, Open Graph and Twitter card tags for your page head, safely HTML-escaped, with length guidance and a Google search result preview.
How to use the Meta Tag Generator
- Enter the page title and description. The counters show whether they fit what Google usually displays.
- Add the canonical URL and a share image URL. Both must be absolute, starting with https://.
- Optionally set the site name, content type, X (Twitter) handle, author, language and theme colour.
- Untick Index or Follow if search engines should not list the page or follow its links.
- Copy the generated tags into the <head> of your page. Set the language on your <html lang> attribute too.
Examples
Input
title: Fish & Chips description: The best "chippy" in town. canonicalUrl: https://example.com/fish
Output
<title>Fish & Chips</title> <meta name="description" content="The best "chippy" in town."> <meta name="robots" content="index, follow"> <link rel="canonical" href="https://example.com/fish"> <!-- Open Graph --> <meta property="og:type" content="website"> <meta property="og:title" content="Fish & Chips"> <meta property="og:description" content="The best "chippy" in town."> <meta property="og:url" content="https://example.com/fish"> <!-- Twitter / X --> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Fish & Chips"> <meta name="twitter:description" content="The best "chippy" in town.">
Frequently asked questions
How long should a title and meta description be?
Google cuts titles by pixel width, which usually works out at about 50 to 60 characters, and descriptions at roughly 120 to 160 characters. Put the important words first so nothing vital is lost if it is cut.
What are Open Graph and Twitter card tags?
Open Graph (og:) tags control the title, description and image shown when a link is shared on Facebook, LinkedIn, Slack and many chat apps. X (Twitter) reads twitter: tags and falls back to Open Graph. With an image, the large image card is used.
Why must URLs be absolute?
Social platforms fetch og:image and og:url without knowing which page they came from, so a relative path such as /img/share.jpg cannot be resolved. Canonical URLs should also be absolute to avoid ambiguity.
Why are characters like & and quotes changed?
They are HTML-escaped (& becomes & and " becomes ") so that a quote in your title cannot end the content attribute early and break the page. Browsers and crawlers show the original characters.
Is my data uploaded?
No. The tags are generated in your browser and nothing you type is sent anywhere.