SEO tools
Meta Tag Generator
Fill in what your page is about and get the full block of head tags for it: title, description, canonical, Open Graph and Twitter card, with a live preview of how the result looks in a search result and in a sh...
What these tags actually do
Three separate audiences read the head of your page and none of them read the same tags. A search engine takes <title> and <meta name="description">, and it treats both as a strong suggestion rather than an instruction: if the description does not match what the page says, it will write its own. A social network reads the Open Graph tags, og:title, og:description and og:image, and shows whatever it finds in the preview card. X reads the Twitter card tags, and falls back to Open Graph when they are absent, which is why a separate twitter:title is optional and a twitter:card is worth setting.
The tag most people miss is <link rel="canonical">. It names the one address you consider official for this page, which matters the moment the same content is reachable at more than one URL: with and without a trailing slash, with a tracking parameter on the end, or on both a staging address and a live one. Without it a search engine picks for you, and it sometimes picks the wrong one.
How long should each one be
A title is cut off around 60 characters in a desktop search result and less on a phone, so the part that identifies the page belongs at the front and the brand name at the end. A description is cut around 155 to 160. Neither limit is a rule you can break to your advantage: going longer does not add ranking weight, it just means the end of your sentence is replaced by an ellipsis in the one place a stranger decides whether to click.
An Open Graph image should be 1200 by 630 pixels. Smaller images get cropped or rendered as a small square thumbnail instead of a wide card, which is the difference between a link that looks like a page and a link that looks like a mistake. Use an absolute URL for it, including the scheme: several networks refuse a relative path outright.
Where the tags go, and what to check afterwards
Everything this generates belongs inside <head>, before the closing tag and after the charset declaration. Order between the tags themselves does not matter. If your page is generated by a framework, put them wherever that framework manages the document head rather than editing the built output, or the next build will drop them.
When they are in place, check what a crawler actually sees rather than what you meant to write, because a template can escape a quote or drop a tag without the page looking any different. The Open Graph checker next door fetches a live URL and reports the tags it finds, which is the fastest way to catch a description that ended up empty.
How to use it
-
Describe the page
Enter the title, description, canonical URL and social image for the page you are writing tags for.
-
Check the previews
Watch the search result and social card previews update as you type, with character counters for the two fields that get truncated.
-
Copy or publish
Copy the block of tags into your page head, or publish a starter page carrying them to a live link.
Frequently asked questions
Is the meta tag generator free?
Is anything I type uploaded?
How long should my title and description be?
Do I need both Open Graph and Twitter card tags?
twitter:card, which decides whether you get a small thumbnail or a large image.Why is my image not showing when I share the link?
https:// URL and re-check with the Open Graph checker.