How to use
- Write the page title and description, keeping an eye on the character count and the short / good / long indicator.
- Enter the canonical URL and share image URL as full addresses starting with
https://. - Choose the page type (og:type), language (og:locale) and X card style. If the page should stay out of search, turn off “Show in search results”.
- Check the search result and share card previews, then copy the HTML into your page’s
<head>.
What each tag does
| Tag | Where it shows up |
|---|---|
<title> |
Browser tab, the blue headline in search results |
<meta name="description"> |
The snippet under the headline (search engines may choose other text) |
<link rel="canonical"> |
Names the preferred URL when the same content lives at several addresses |
og:title, og:description, og:image |
Link preview cards on Facebook, LinkedIn, Slack, iMessage and more (the Open Graph protocol) |
og:url, og:site_name, og:type, og:locale |
The card’s URL, site name, type and language |
twitter:card and friends |
X (Twitter) cards; without them, X falls back to the Open Graph tags |
<meta name="robots" content="noindex"> |
Removes the page from search results |
How long should they be?
Search engines don’t publish character limits for titles or descriptions; they truncate by pixel width. The ranges used here (30–60 characters for titles, 70–160 for descriptions) are common industry guidelines, not rules. Wide letters like W and M use up the space faster than narrow ones, so put the important words first. The previews truncate by actual width too, not by character count.
Share image tips
- Facebook recommends 1200×630 px (a 1.91:1 ratio) for link share images, and most other platforms use large cards of a similar shape.
- Social networks can’t read relative paths like
/og.png— always use a full URL. - Facebook, LinkedIn and others cache previews. If an old card keeps appearing after you change the tags, refresh it with the platform’s sharing debugger.
Things to watch out for
- Every platform draws cards a little differently (lines shown, image crop), so treat the preview as an approximation.
- To see the share image in the preview, turn on “Load the share image” — your browser then requests the image from its server.
FAQ
Is anything I type saved?
No. The tags are built in your browser and nothing is uploaded. Quotes and characters like < are escaped automatically so your HTML doesn’t break.
Can I create a robots.txt too?
Use the robots.txt Generator for crawler rules, including AI bots. To count characters on their own, try the Character Counter.