Title (SEO)

The <title> is the most important piece of text you give a search engine, and the first thing a person usually sees. It is a headline, a promise, and a label, all in about sixty characters.

You already learned the basics of the element in The HTML Title Element: where it shows, how to escape characters, and how to change it with JavaScript. This lesson is about the SEO side: how search engines use titles, and how to write ones that match what people are looking for and earn the click.

What You Will Learn

• How search engines use the title
• How to match search intent
• Where to put keywords without stuffing
• Patterns for home pages, articles, products, and categories
• How to handle brand names and separators
• Why search engines sometimes rewrite your title
• How to find duplicate and weak titles across a site
• How to measure whether a title works

The Big Idea

HTML Code

index.html

<!-- Weak: vague, and the same on every page -->
<title>Home</title>
<title>Page 2</title>

<!-- Stuffed: a list of keywords, not a title -->
<title>Bread, Rye Bread, Best Bread, Bread Recipe, Buy Bread Online</title>

<!-- Clickbait: promises something the page does not deliver -->
<title>You Won't BELIEVE This Bread Trick!!!</title>

<!-- Good: clear, specific, natural, and branded -->
<title>Rye Bread Recipe: Easy No-Knead Loaf | The Bread Bin</title>

Title Builder

http://127.0.0.1:5500/index.html

Page type Home pageArticle or recipeProductCategory page

Main topic (what the page is)

Helpful detail (optional)

Brand or site name

Separator before the brand Pipe ( | )Hyphen ( - )En dash ( – )

Article or recipe: the main topic first, then a helpful detail, then the brand.

Your title:

Rye Bread Recipe: Easy No-Knead Loaf | The Bread Bin

<title>Rye Bread Recipe: Easy No-Knead Loaf | The Bread Bin</title>

0 things to improve.

• OK: Long enough to say something (52 characters).
• OK: Short enough to usually fit in a result.
• OK: Not a generic placeholder.
• OK: Normal capitalisation.
• OK: No word is repeated again and again.
• OK: A clean structure.
• OK: No spammy punctuation.
• OK: The brand name is included.

These patterns are starting points, not rules. Real search results cut titles by pixel width, not by characters, and a search engine may show something different. Always read your title aloud, and ask whether a stranger would know what they are getting.

Change the page type, topic, detail, and brand. Notice how each type of page asks for a slightly different shape.

How Search Engines Use the Title

• A strong clue about the topic. The title is one of the clearest signals of what a page is about. It is one of several, along with your headings, content, and links.
• The clickable headline. In most results, the title is the big blue link people click.
• A label elsewhere. Browser tabs, bookmarks, history, and shared links often use it too.

A title is a promise

A search engine looks at whether your title matches the page. A title that says one thing while the page says another may be ignored or rewritten, and people who feel tricked leave quickly.

Match Search Intent

Before writing, ask: what is the person trying to do? The same topic can have different intents:

Search	Probable intent	A fitting title
"how to bake rye bread"	Learn how	How to Bake Rye Bread: Easy No-Knead Recipe
"best oven thermometer"	Compare, then choose	Best Oven Thermometers Tested: 6 Picks
"bread bin buy"	Buy	Wooden Bread Bin with Lid
"the bread bin"	Find a site	The Bread Bin: Easy Bread Recipes
"oven thermometer not working"	Fix a problem	Oven Thermometer Not Working? 5 Fixes

Use the words your readers use, and make the title promise the thing the page gives them.

Keywords: Natural, Not Stuffed

A keyword is simply a word or phrase people type. It makes sense to include the main one in your title, as long as the title reads like a human wrote it for a human.

• Put the most important words early. If a title is cut off, the end is lost.
• Use the words people actually use, such as "recipe," "how to," or "best."
• Use each important word once or twice, not five times.
• Do not list variations ("bread recipe, bread recipes, best bread recipe").
• Do not add words only for search engines.

Stuffing hurts

Piling keywords into a title can make your page look low quality to people and to search engines. It does not help, and it can hurt.

Patterns That Work

Page type	Pattern	Example
Home	Brand, then what you offer	The Bread Bin: Easy Bread Recipes for Home Bakers
Article or recipe	Topic, then a helpful detail, then brand	Rye Bread Recipe: Easy No-Knead Loaf | The Bread Bin
Product	Product, then a key detail, then brand	Wooden Bread Bin with Lid - Beech | The Bread Bin
Category	Group, then a detail, then brand	Bread Recipes (Beginner Friendly) | The Bread Bin
Guide or list	The number or promise, then the topic	10 Baking Tips Every Beginner Needs

Treat them as starting points. A helpful detail might be a number, a year, a level ("for beginners"), a benefit, or a limit ("no knead").

Brand Names and Separators

• Brand last on most pages, so the topic is read first. Brand first on the home page.
• One separator is enough: a pipe |, a hyphen, or a dash, with spaces around it.
• Be consistent across the site, so people recognise you.
• Shorten the brand if it is long, or leave it out if space is tight.
• Do not repeat the brand in other parts of the title.

How Long?

There is no official limit. Search engines cut titles when they are too wide for the space, which is measured in pixels, not characters. A rough guide is about 50 to 60 characters, and wide letters such as "W" and "M" take more room than "i" and "l."

• Front-load the important words. Anything cut is lost.
• Do not obsess over the exact number. A clear, slightly long title is better than a short, vague one.
• Check the result in a preview tool, or in the search results themselves.

Why a Search Engine May Rewrite Your Title

Search engines sometimes show a different title from the one you wrote. Common reasons:

• The title is empty, too generic, or the same on many pages.
• The title is stuffed or very long.
• The title does not match the page's content or main heading.
• The search itself suggests a different part of the page would answer it better.
• It includes boilerplate, such as a long brand repeated on every page.

If you see rewrites, do not panic. Compare the rewrite with your title, and ask what the search engine is telling you. Usually the fix is a clearer, more honest title that fits the page.

Title, Heading, and Social Title

These three often get mixed up, and should be related but not identical:

Element	Purpose	Notes
<title>	The headline in search results and tabs	Includes the brand, and works on its own
<h1>	The main heading on the page	Speaks to a visitor who is already there. See Headings and SEO
og:title	The headline when the link is shared	Can be shorter and friendlier. See Open Graph

They should agree on the topic. If the title says "Rye Bread Recipe" and the heading says "Welcome," something is wrong.

Test Your Titles

Play the title duel. For each search, pick the title you would want to click.

http://127.0.0.1:5500/index.html

Someone searches for the words shown. Which title would you choose to click, and be happy you did?

Search: "how to bake rye bread"

Rye Bread How to Bake Rye Bread: Easy No-Knead Recipe | The Bread Bin

Search: "rye bread recipe"

Bread | Rye Bread | Sourdough | Baking | Recipes | Flour | Yeast | The Bread Bin Rye Bread Recipe: Easy No-Knead Loaf | The Bread Bin

Search: "best oven thermometer"

You WON'T BELIEVE Which Oven Thermometer Wins!!! Best Oven Thermometers Tested: 6 Picks | The Bread Bin

Search: "the bread bin"

Home The Bread Bin: Easy Bread Recipes for Home Bakers

Search: "serrated vs straight bread knife"

Serrated vs Straight Bread Knife: Which Should You Buy? | The Bread Bin Knives

Audit a Whole Site

Individual titles can be fine while the site as a whole is a mess. The most common site-wide problems are missing titles, identical titles, and default titles (such as "Home" or "Untitled"). Paste your own pages in below, or use the sample:

http://127.0.0.1:5500/index.html

Your pages, one per line, in the form /path :: Page title
/ :: Home /recipes :: Recipes | The Bread Bin /recipes/rye-bread :: Rye Bread Recipe: Easy No-Knead Loaf | The Bread Bin /recipes/sourdough :: Recipes | The Bread Bin /recipes/bagels :: BAGELS BAGELS BAGELS - best bagels - bagel recipe - buy bagels /about :: About /blog/baking-tips :: 10 Baking Tips Every Beginner Needs | The Bread Bin /blog/baking-tips-2 :: 10 Baking Tips Every Beginner Needs | The Bread Bin

8 pages checked. 7 with something to improve, 2 duplicated titles.

• / "Home" Improve: Quite short (4 characters). Say what the page is about. Too generic. Say what the page is.
• /recipes "Recipes | The Bread Bin" Improve: Quite short (23 characters). Say what the page is about. Used on 2 pages. Every page should have its own title.
• /recipes/rye-bread "Rye Bread Recipe: Easy No-Knead Loaf | The Bread Bin" OK
• /recipes/sourdough "Recipes | The Bread Bin" Improve: Quite short (23 characters). Say what the page is about. Used on 2 pages. Every page should have its own title.
• /recipes/bagels "BAGELS BAGELS BAGELS - best bagels - bagel recipe - buy bagels" Improve: Long (62 characters), so it may be cut off. Put the important words first. The word "bagels" appears 5 times. That looks like keyword stuffing. Many separators. It reads like a list of keywords. Use one separator, before the brand.
• /about "About" Improve: Quite short (5 characters). Say what the page is about.
• /blog/baking-tips "10 Baking Tips Every Beginner Needs | The Bread Bin" Improve: Used on 2 pages. Every page should have its own title.
• /blog/baking-tips-2 "10 Baking Tips Every Beginner Needs | The Bread Bin" Improve: Used on 2 pages. Every page should have its own title.

The audit runs in your browser. Nothing is sent anywhere. It checks length, wording patterns, and duplicates, but cannot tell whether a title is truthful or fits what the page really says.

In a real site, you can find your titles with:

• Google Search Console, which has reports for pages and queries.
• A crawler tool, such as Screaming Frog, which lists every title on a site (check its current free limits).
• "View source" on a few key pages.

Measure What Works

After you change a title, give it time, then look at Search Console's performance report. Compare clicks, impressions, and click-through rate (CTR) for the page before and after. Two honest cautions:

• Change one thing at a time, and wait a few weeks. Rankings and seasons move on their own.
• A higher CTR is good only if people are happy when they arrive. A misleading title may raise clicks and hurt the site.

Titles in Docusaurus

Docusaurus builds the <title> from each page's frontmatter title, combined with the site title set in docusaurus.config.js. So give every page a clear title. Docusaurus also has a frontmatter field for the description, and a Head component for adding custom tags to a page. The exact options change between versions, so check the current Docusaurus documentation.

Good Habits

• Write a unique title for every page.
• Make it say what the page is, in plain words.
• Put the main topic first, and the brand last.
• Use natural wording, including the words your readers use.
• Keep it around 50 to 60 characters, without worrying about the exact number.
• Make it match the page, and its h1.
• Read it aloud, and ask whether you would click it.
• Audit the whole site from time to time.

Title SEO Checklist

• Every page has a title, and no two pages share one
• The title matches the content and the search intent
• The main topic comes first
• Keywords are natural, with no stuffing
• The brand is consistent, and usually last
• The title is not in all capitals, and has no spammy punctuation
• The title is roughly 50 to 60 characters
• The title agrees with the h1 and social title
• No private data is in the title
• Titles in each language are written in that language

Security and Privacy Notes

• Do not put private data in titles. Names, emails, order numbers, and tokens in a title end up in browser history, tabs, bookmarks, screen shares, and sometimes in search results.
• Be careful with user-supplied titles. If a title comes from user input (a profile, a post), escape it, and never build HTML from it without cleaning it. See The HTML Title Element for escaping.
• Do not impersonate. A title that copies another brand's name to draw clicks can mislead people, and may break trademark or search rules. This is not legal advice.
• Avoid misleading claims. Titles that promise "free," "official," or "guaranteed" without it being true can harm visitors, and your reputation.
• Be wary of "SEO title generators" that ask you to paste private content, or require access to your site. Use trusted tools.

Global Audience Notes

• Write the title in the language of the page. A French page needs a French title, and the lang attribute to match. See International SEO.
• Keyword research differs by language. People in different countries use different words for the same thing. Translate the meaning, not just the words.
• Characters take different widths. Chinese, Japanese, and Korean characters are wide, so titles are usually shorter in characters. Arabic and Hebrew read right to left. Test how yours look.
• Check that special characters display (use UTF-8), including accents and non-Latin scripts.
• Be careful with idioms and humour that may not translate.
• Dates, currencies, and units in titles should match the region.

Common Mistakes to Avoid

1. The same title on every page, or the site name only.
2. "Home," "Untitled," or "Document."
3. Keyword stuffing, lists of words with commas or pipes.
4. Clickbait, shouting, and repeated punctuation.
5. A title that does not match the page.
6. Burying the topic after a long brand name.
7. Titles that are far too long, with the key words cut off.
8. A title and h1 about different things.
9. Putting private data in titles.
10. Changing titles constantly, and never waiting to see the effect.
11. Forgetting about translated pages, which keep the original language title.
12. Never auditing the site.

Practice Time

Try these in your browser and your editor:

1. Use the title builder with each of the four page types. What changes?
2. Make a title that is too long, and one that is stuffed. Read what the checker says.
3. Take the title duel. Which one was closest?
4. Paste five pages from a site you built into the audit. Fix every problem it finds.
5. Write titles for a home page, a product, a guide, and a category for a site you can imagine.
6. Search for something you know, and read ten result titles. Which are the best, and why?
7. Find a result whose title was clearly rewritten. What might have caused it?
8. Compare <title> and <h1> on three pages. Do they agree on the topic?
9. Check your site in Search Console, and find the pages with the most impressions and the lowest click-through rate.
10. Bonus: change one title, wait three or four weeks, and compare its click-through rate with before.

Quick Recap

Click a question to check your answer.

1. Why is the title important for SEO?

It is one of the clearest signals of what a page is about, and it is usually the clickable headline in search results.

2. What does it mean to match search intent?

To write a title that promises what the searcher is trying to do or find: learn, compare, buy, find a site, or fix a problem.

3. How should you use keywords in a title?

Include the main words people use, early and naturally, once or twice. Do not stuff or list them.

4. Where do the brand name and the separator go?

On most pages the brand goes last, after a single separator, so the topic is read first. On the home page, the brand often goes first.

5. Why might a search engine rewrite your title?

Because it is empty, generic, duplicated, stuffed, too long, or does not match the page. The search itself may also suggest a better part of the page to use.

6. How do you know a new title is working?

Compare clicks, impressions, and click-through rate in Search Console before and after, changing one thing at a time and waiting a few weeks, while also checking that visitors are happy.

Key Takeaways

• The title is your headline and your promise. Make it clear and true.
• Match search intent, and use the words your readers use.
• Put the topic first and the brand last (home page: brand first).
• No stuffing, no clickbait, no shouting.
• Aim for around 50 to 60 characters, and front-load the key words.
• Every page needs its own title. Audit the whole site.
• Search engines may rewrite weak titles. Fix the cause.
• Measure, wait, and keep the visitor's trust.

Next, learn how to write the short summary that sits beneath your title, in Meta Description.