Insights › Technical SEO
Title tags: the one tag that decides whether anyone clicks
The title tag is the headline in every search result, browser tab and link preview. A generated app ships with a default or duplicate title — and that's the first thing a searcher sees. Here's how to write one per page, how long it should be, and the SPA mistake that titles every page the same.
Aug 8, 2026 · 5 min read
The short version
The <title> tag is the single most important on-page SEO element. It's the clickable headline in search results, the text in the browser tab, and the default title in link previews when OG tags are absent. A generated app typically ships with Vite App or the builder's placeholder — and that's what Google shows. Every public page needs its own specific title. Every. Single. One.
What a good title looks like
<title>Tabby — split expenses with friends, no signup</title>A good title puts the most important words first — usually the page's topic and your product name. Google may rewrite titles it considers unhelpful, but if you write one that accurately describes the page, your version usually stands.
The rules
- One per page. Two
<title>tags in the same<head>is invalid HTML, and browsers pick one arbitrarily. - 50–60 characters. Longer titles get truncated with "…" in search results. The cut is by pixel width, so wider characters (W, M) take more space. 55 characters is a safe target.
- Unique per route. Every indexable page needs its own title. A single-page app that serves the same
<title>on every route is telling Google every page is the homepage. - In the server-rendered HTML. A title injected by JavaScript after the page loads is invisible to crawlers that don't execute JS — which includes all AI crawlers.
- Put the important words first. "Tabby — split expenses" is better than "Split expenses with friends — Tabby" because Google truncates from the right, so the distinguishing words stay visible.
- Include your brand name, but don't lead with it. Leading with the brand on every page wastes the space that should describe the specific page's content.
The SPA title trap
In a single-page app, the <title> is often set by a JavaScript router after the page loads. The raw HTML the server sends has one static <title> — usually the app's name — and JavaScript changes it on route transitions. Googlebot's first pass reads the raw HTML and sees the same generic title on every page. The result: every page's search result shows "My App" instead of "Pricing — My App" or "Docs — My App."
The fix is server-side rendering or a pre-render step that writes the correct title into the static HTML before it's served. If every page's raw HTML has the right title, Google indexes the right title.
The three most common mistakes
| Mistake | Result in search | Fix |
|---|---|---|
| Default builder title ("Vite App", "React App") | Search result shows the builder's brand instead of yours | Replace with your product name + page topic |
| Same title on every route (SPA) | Every page ranks for the same generic term, internal pages compete with the homepage | SSR or pre-render with per-route titles |
| Title too long (70+ chars) | Truncated in results — the cut often removes the product name or the call to action | Cut to 55 characters, put important words first |
How to check
- 1
View Page Source on every route
Cmd+U on each public page. The
<title>should be different on each and should describe that specific page. - 2
Google a few pages
Search
site:yourapp.comand look at the titles in the results. If they're all identical, Google is reading the static HTML title on every page. - 3
Use a SERP preview tool
Paste your URL into any SERP simulator. It shows the title as Google would display it, with truncation applied.
Actuant reads the <title> from every page's raw HTML: is it present, is it the right length, is it unique across routes, and is it the builder's default or something you wrote.
Keep reading
Meta descriptions: what they actually do and how to write one
A meta description has no direct ranking impact, but it's the snippet under your search result — and that snippet decides whether someone clicks. Here's what makes a good one, how generated apps break them, and the one test that catches every problem.
Open Graph tags: the minimum set that makes every link preview work
Open Graph tags power the preview card when you share a link — the image, title and description that shows on Twitter, Slack, iMessage and everywhere else. Without them your link unfurls blank. Here's the six tags you need and the image rules that decide whether they work.