Fill in your page details, get copy-paste HTML for every tag that matters — title, description, Open Graph, Twitter Card, canonical, robots — with a live preview of the search result and social card.
<!-- Fill in a title to generate tags -->A handful of tags in your page's <head> control three separate things: how you rank in search, how your link looks when someone pastes it in Slack or X, and whether crawlers should index the page at all. Get them wrong and the page still works — it just looks broken or invisible everywhere else.
Nothing in the visible page changes when you add these tags — they're read by machines, not humans. Three consumers care:
A devbio page ships correct title, description, canonical, Open Graph and Twitter Card tags — including a per-page OG image — with nothing to paste anywhere.
Free forever · no credit card · your page lives at devbio.me/yourname
title and description often become your search-result snippet verbatim.robots and canonical tell them whether to index a page and which URL is the "real" one when duplicates exist.Skip them and you don't get an error — you get a blank gray link preview and a search snippet Google generates from whatever text it finds first on the page, which is rarely what you'd have chosen.
The 60/160-character guides in the form aren't hard technical limits — they're where Google truncates the rendered snippet with an ellipsis on a typical desktop search result. Go over and the important part of your sentence might get cut.
Two habits that matter more than hitting an exact count: put the distinct, specific part of the sentence first (front-load it, don't bury it after your company name), and write a description that's actually different from the title — a title repeated verbatim in the description wastes the second line entirely.
Open Graph (og:*) is the standard almost every platform reads — Facebook invented it, but Slack, Discord, LinkedIn, and iMessage all use it too. Twitter/X maintains its own separate twitter:* tags, which is why you need both sets, not one.
The practical rule: fill in og:* fully, then lettwitter:card, twitter:title, and twitter:description mirror it — X falls back to the matching og:* value for anything you omit, but explicit is safer than relying on fallback behavior that can change.
summary_large_image needs a roughly 1200×630 image (1.91:1) — anything much off that ratio gets cropped unpredictably per platform. No image at all silently downgrades the card to a small text-only summary on most platforms.
<link rel="canonical"> tells search engines which URL is the source of truth when the same content is reachable at more than one address — with or without a trailing slash, with tracking params, via `www` vs bare domain. Without it, search engines pick one for you, and it's not always the one you'd want ranking.
noindex (via the robots meta tag) is the correct way to keep a page out of search results — a login page, a thank-you page, a staging environment. It is not a security control: the page is still reachable by URL, just excluded from crawling. Don't use it in place of actual auth.
og:image must be a full absolute URL (https://…) — most crawlers won't resolve a relative path against your domain.og:url. Without it, some platforms unfurl the URL exactly as pasted (including tracking params) instead of your canonical page. og:* the way other platforms do. Everyone else (Slack, Discord, LinkedIn, iMessage, Facebook) reads Open Graph only.<head>, before </head>. In a framework with per-page metadata APIs (Next.js's metadata export, Remix's meta function, etc.) you'd translate these into that API instead of hand-writing HTML — the generated tags above are the reference for exactly which fields to set.