Meta Tag Generator
Generate the title, meta description, canonical, Open Graph and Twitter Card tags for a page. Fill in the fields and copy ready-to-paste HTML for your <head>.
What are meta tags?
Meta tags are elements in a page’s <head> that describe the page to software rather than to readers. Search engines use the <title> and the description when building a result; social networks and chat apps use Open Graph protocol tags (og:title, og:image and so on) to draw a link preview; and X (formerly Twitter) reads its own twitter: card tags, falling back to Open Graph values for any it cannot find. The canonical link, defined in RFC 6596, names the preferred URL when the same content is reachable at several addresses.
This generator writes all of those from six fields, ready to paste into a template.
How to use the meta tag generator
- Fill in Title, Description and URL. The page starts with sample values; replace them.
- Optionally add Image URL, Site name and Twitter @handle.
- The Meta tags box updates as you type. Generate rebuilds it on demand, but you do not need to press it.
- Click Copy, or the copy icon in the box’s header, and paste the result inside
<head>, replacing any title and description your template already outputs.
What each field produces
| Field | Tags generated |
|---|---|
| Title | <title>, og:title, twitter:title |
| Description | meta name="description", og:description, twitter:description |
| URL | link rel="canonical", og:url |
| Image URL | og:image, twitter:image, and switches twitter:card from summary to summary_large_image |
| Site name | og:site_name |
| Twitter @handle | twitter:site, copied exactly as typed |
| (always) | og:type set to website, and twitter:card |
Empty fields are left out. Values are not trimmed or checked, but &, <, > and " are escaped, so quotes in a title cannot break an attribute. The tool does not generate charset, viewport, robots, keywords or image dimension tags; add those yourself if you need them.
Example output
With Title Tea & Biscuits: A "Proper" Guide, an image and the handle @example, the generator produced the following (some lines left out here for brevity):
<title>Tea & Biscuits: A "Proper" Guide</title>
<meta name="description" content="How to brew tea <properly> and pick biscuits.">
<link rel="canonical" href="https://example.com/tea/">
<!-- Open Graph -->
<meta property="og:title" content="Tea & Biscuits: A "Proper" Guide">
<meta property="og:image" content="https://example.com/img/tea.jpg">
<meta property="og:type" content="website">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@example">The entities are correct: browsers and crawlers decode & back to & before showing the text.
Common problems and fixes
| Symptom | Cause | Fix |
|---|---|---|
| The shared link shows no image | The image URL is relative, blocked, behind a login or too small. | Use an absolute https:// URL to a public image. Meta recommends at least 1200 × 630 pixels. |
| An old title or image keeps appearing | Platforms cache previews when a URL is first shared. | Ask the platform to re-fetch the page with its sharing debugger, or wait for the cache to expire. |
| X shows a small card | No Image URL was entered, so twitter:card is summary. | Add an image to get summary_large_image. |
| Two titles or descriptions in the page source | Your CMS or theme already writes them. | Remove the template’s tags or switch them off in its SEO settings. |
twitter:site has no @ | The handle is copied exactly as typed. | Type it with the @, as in @example. |
Writing titles and descriptions that work
- Make each page’s title and description unique. Google’s title link and snippet guidance warns against boilerplate repeated across pages.
- Put the important words first. Google publishes no character limit, but long titles and descriptions are shortened to fit the results page.
- Describe, do not stuff. A plain summary of what the page offers is more likely to be shown than a list of keywords.
Frequently asked questions
Do meta tags improve search rankings?
The title helps search engines understand the page. The description is not a ranking factor in Google, but it can become the snippet people read before clicking. Open Graph and card tags affect link previews, not rankings.
Why does Google show a different description from mine?
Google builds snippets mainly from the page content and may use the meta description when it judges that it describes the page more accurately for that search. A specific, accurate description is more likely to be chosen.
Do I need both Open Graph and Twitter tags?
Strictly, X can fall back to Open Graph for the title, description and image, but it needs twitter:card to choose a layout. The generator writes both sets so each platform finds what it looks for.
Should I add a keywords meta tag?
Google has stated that it does not use the keywords meta tag in web search, which is why this generator leaves it out.
When should og:type be something other than website?
The Open Graph protocol defines other types such as article, profile and video.movie, with extra properties of their own. For a blog post, change it to article after pasting.
Is what I type stored or sent anywhere?
No. The tags are assembled in your browser and nothing you type is saved or uploaded by the tool.