Google’s search results truncate page titles at roughly 600 pixels — about 60 characters on most desktop fonts. Write a 90-character title and the last third gets swapped for an ellipsis. Write a 30-character title and you’ve given up half the width Google was willing to show. Most meta tags seo work is like this: a small number of tags, each with a narrow job, each easy to get roughly right and easy to get subtly wrong. There are dozens of meta tags you could set. Five of them move the needle on rankings, clicks, or rendering. The rest are noise. This is the short list worth your time, with the HTML for each.
<title> — the one tag that still moves rankings
The title element is the single most important on-page SEO signal you control. It appears as the clickable headline in search results and as the browser tab label, and Google has confirmed it uses title text as a ranking signal. Two rules cover most cases.
Put the primary keyword near the start. Google weights the first words more heavily, and users scan the left side of a result. A page targeting “json formatter” should read JSON Formatter & Validator — DevTidy, not DevTidy — Format and Validate Your JSON Online. Keep the brand at the end, separated by a pipe or em dash.
Keep it under 60 characters or 600 pixels. Pixel width matters more than character count because wide characters (W, M, uppercase) eat budget faster than lowercase i or l. If you have to choose, cut the brand suffix before the keyword.
<title>JSON Formatter & Validator — DevTidy</title>meta description — it does not rank, it does affect clicks
Google has said repeatedly, most recently in their search central documentation, that meta description is not a ranking signal. What it does is supply the text under your result link, and that text changes whether people click.
Aim for around 155 characters. Google shows roughly 960 pixels of description on desktop, which lands at 150 to 160 characters for typical English prose. Go long and you get truncated mid-sentence, which reads as unfinished. Go short and you leave persuasion on the table.
Write it like ad copy, not like a tagline. One concrete sentence about what the page does, ideally with a verb the user was searching for. If your keyword matches the query, Google bolds it in the snippet, which draws the eye.
<meta name="description" content="Format, validate, and minify JSON in your browser. Paste your data, get clean output with line numbers, no upload required.">Google reserves the right to ignore this tag and pull snippet text from the page body if it thinks its pick is more relevant to the query. That is normal. Write the tag anyway for the queries where it gets used.
meta robots — tell crawlers what to do
The robots meta tag gives per-page instructions to crawlers. The two values you will use almost always are index,follow (allow indexing, follow links) and noindex,follow (drop from index but still crawl outgoing links).
<meta name="robots" content="index,follow"><meta name="robots" content="noindex,follow">Use noindex on thin pages, search result pages, internal filters, staged previews, and anything that should not appear in Google. Pair it with follow unless you specifically want to block link equity flow, because the default when you write noindex alone varies by crawler.
Other values worth knowing: noarchive (no cached copy in results), nosnippet (no text snippet shown), max-snippet:0 (no text but images OK), and noimageindex (images not indexed from this page). The full list is in Google’s robots meta tag docs. For site-wide rules about which paths to crawl, use a robots.txt file instead — meta robots and robots.txt do different jobs and one does not replace the other.
viewport and charset — the boring two that break mobile
These two tags have nothing to do with rankings directly and everything to do with rendering. Get them wrong and your page either looks broken on phones (Google indexes mobile-first, so broken mobile is broken SEO) or displays mojibake for any non-ASCII character. Both fail silently. There’s no error in the console. The page just loads looking wrong on a device you didn’t test.
Charset declares the document encoding. Put it first inside <head>, within the first 1024 bytes, so the parser doesn’t have to restart. The HTML spec requires it to appear early, and browsers will re-parse the document if they encounter it later, which costs a paint. UTF-8 is the only sane choice in 2026.
<meta charset="utf-8">Viewport tells the browser how to size the layout on small screens. Without it, mobile browsers render the page at a desktop width and shrink it down, producing tiny unusable text.
<meta name="viewport" content="width=device-width, initial-scale=1">That’s the entire tag. Don’t disable user scaling (maximum-scale=1 or user-scalable=no) — it’s an accessibility failure and Google flags it in Lighthouse and PageSpeed.
link rel="canonical" — one paragraph
Canonical tells Google which URL is the master version of a page when the same content is reachable from multiple URLs (sort parameters, tracking queries, http vs https, trailing slash variants). It is the strongest signal you can send to consolidate duplicate content into a single ranking URL instead of splitting link equity across copies. Put one self-referential canonical on every page pointing to its preferred URL — even if you have no duplicates today, parameter creep will eventually create them. Google treats canonical as a hint, not a directive, and will override it when it disagrees, but in normal cases it follows the tag. There’s more nuance — pagination, hreflang pairings, when Google ignores your canonical — that gets a full writeup in the canonical tags article. For now, the tag is:
<link rel="canonical" href="https://devtidy.com/json-formatter/">Open Graph and Twitter tags — one paragraph
Open Graph is Facebook’s spec, adopted everywhere social previews happen — Slack, Discord, LinkedIn, Twitter, iMessage, Teams. The three that matter are og:title, og:description, and og:image. Twitter has its own twitter:card tag for layout; set twitter:card to summary or summary_large_image and the rest falls back to OG values. Image should be 1200x630px, under 8MB, and use an absolute URL. The full mechanics, image sizing rules, and debugging workflow live in the Open Graph article. A minimal set looks like:
<meta property="og:title" content="JSON Formatter & Validator">
<meta property="og:description" content="Format, validate, and minify JSON in your browser.">
<meta property="og:image" content="https://devtidy.com/og/json-formatter.png">
<meta property="og:url" content="https://devtidy.com/json-formatter/">
<meta name="twitter:card" content="summary_large_image">The full table
| Tag | Example | What it does |
|---|---|---|
<title> | <title>JSON Formatter — DevTidy</title> | The clickable headline in search results and the browser tab. Strong ranking signal. Keep under ~60 chars. |
meta description | <meta name="description" content="..."> | Snippet text under the result link. Not a ranking signal but affects click-through. ~155 chars. |
meta robots | <meta name="robots" content="noindex,follow"> | Per-page crawl and index instructions. Use noindex for pages you don’t want in Google. |
meta viewport | <meta name="viewport" content="width=device-width, initial-scale=1"> | Controls mobile layout sizing. Missing it means broken mobile rendering. |
meta charset | <meta charset="utf-8"> | Declares document encoding. First tag in <head>. Missing it means mojibake. |
link canonical | <link rel="canonical" href="https://..."> | Picks the master URL when the same content is reachable from multiple URLs. |
og:title | <meta property="og:title" content="..."> | Title shown in social previews (Slack, Discord, LinkedIn, etc.). |
og:description | <meta property="og:description" content="..."> | Description shown in social previews. |
og:image | <meta property="og:image" content="https://..."> | Preview image, 1200x630px. Absolute URL. |
og:url | <meta property="og:url" content="https://..."> | Canonical URL for social aggregation. |
twitter:card | <meta name="twitter:card" content="summary_large_image"> | Twitter preview layout. Other fields fall back to OG. |
meta theme-color | <meta name="theme-color" content="#0a0a0a"> | Browser chrome color on mobile. Cosmetic, not SEO. |
FAQ
Does the meta description affect ranking?
No. Google confirmed it is not a ranking signal. It does affect click-through rate, because Google often uses it as the snippet text in search results. Treat it as ad copy for your result, not as a keyword slot.
What is the ideal title length for SEO?
About 60 characters or 600 pixels. Google truncates titles wider than roughly 600 pixels on desktop, replacing the tail with an ellipsis. Put the primary keyword near the start, brand at the end, and cut the brand before the keyword if you’re over budget.
When should I use noindex?
On any page you do not want appearing in Google’s index: thin content, paginated archives, internal search results, filter pages, staged or duplicate versions. Pair it with follow unless you also want to block link equity. For path-level crawl control, use robots.txt instead.
Do I need Open Graph tags if I don’t share on Facebook?
Yes, because OG is the de facto social preview standard. Slack, Discord, LinkedIn, Twitter, iMessage, and Teams all read OG tags to build link previews. Without them your links show up with a random first sentence and no image.
Open any page on your site, view source, and check <head> against the table above. The fastest way to audit a live page is the Meta Tag Checker, which reports every tag Google and social crawlers will see. For previewing how a card renders before you ship, the Open Graph Preview tool renders the OG image and title as users will see them.