Skip to main content

Title tag copywriting tips


The HTML <title> tag defines a webpage's purpose, aiding user orientation and enhancing online marketing. Tips for creating effective titles include clear subject identification, coherence when read out of context, conciseness, branding, uniqueness, and consistent language use.

Introduction #

HTML titles play a crucial role in web content organization and user experience. This guide explains how HTML titles provide orientation, assist in content discovery, and enhance online marketing.

Learn best practices for creating descriptive, concise titles that work seamlessly across various contexts while avoiding common pitfalls.

What are HTML titles? #

Titles qualify as descriptive metadata, providing descriptive information about a Web page. The main purpose of titles is to provide orientation, and help with discovery and identification of contents.

The HTML title element defines an HTML document’s title, a concise description of the purpose or topic of the Web page and should quickly give an idea of what the Web page is about without without having to look at the content.

To add a <title> to an HTML document, you should include the <title> element within the document’s <head> section, like this:

  <title>Your Title Here</title>

The text placed between the opening <title> and closing </title> tags will be displayed as the title of the web page.

Where titles are displayed? #

Apart from the browser title bar, titles are mostly displayed where they are out of context. For example:

By following the tips outlined below, you can create title tag contents that accurately reflect the content of the page and help improve visibility and engagement which may also have positive effects on online marketing efforts such as Search Engine Optimization (SEO) and search engine advertising (SEA).

Title tag copywriting best practices #

The title of each Web page should:

Identify the subject of the Web page #

Provide accurate and concise information to describe the Web page’s purpose or subject.

<title>Manuals and Instructions For Use (IFUs) | Brand Name</title>

Make sense when read out of context #

Ensure the title remains coherent when read out of context, like by a screen reader, in a sitemap, or search results.

<title>Recipe: Delicious Chocolate Chip Cookies</title>

Be descriptive yet concise #

Though there is no strict length limit, it’s best to avoid excessive verbosity. Aim for around 55 characters.

<title>10 Tips for Effective Time Management | Brand Name</title>

Identify the website last #

State the name of the Website to which the Web page belongs to. Brand titles concisely. Append branding to the title.

<title>Job Vacancies | Brand Name</title>

Uniqueness #

Ensure that each page on your website has a unique title.

<title>Wonders of the Amazon Rainforest | Eco Adventures</title>

Consistent language and writing system #

Use the same language and writing system, meaning the script or alphabet of a specific language, as the main content.

<title>Latest News - Politics | Brand Name</title>

Title tag copywriting bad practices #

The title of each Web page should not:

Contain repeated or boilerplate text #

Steer clear of repetitive or boilerplate text, ensuring unique and descriptive titles for each page on your site.

<title>Home Page | About Us | Contact Us | Blog</title>

Contain keyword stuffing #

Including some keyword terms in the title can be useful, but refrain from using repetitive words or phrases.

<title>Buy Laptops, Computers, Personal Computers, PC's</title>

Be empty or half-empty #

Ensure the title isn’t empty or missing parts to accurately describe a webpage’s purpose or subject.

<title>| Brand Name</title>

Contain obsolete elements #

When a page consistently displays recurring information, but the title lacks the latest date update.

<title>Meetings and Conferences 2018 | Brand Name</title>

Identify the website first #

Identifying the website (e.g., Brand name) at the beginning of the title prioritizes branding over providing concise information of the page’s content.

<title>Brand name: Best news, blog posts and articles</title>

Contain aggressive, attention-grabbing elements #

Refrain from using Emojis, special characters, and similar click-generating elements with the goal to grab user’s attention.

<title>★★★ Best Products, ultra cheap! ★★★</title>

FAQ's #

Most common questions and brief, easy-to-understand answers on the topic:

Are HTML titles different from SEO titles?

Terms like "SEO title" or "SEO title tags" are a made up marketing terms by the search engine optimization (SEO) community. The terms refer to the HTML title. As titles do not soley cater search engine optimization, terms like "SEO title" should not be used. Sources that speak of "SEO titles" or "SEO title tags" might give questionable advise and should only be read with skepticism.

How long should HTML titles be for optimal SEO?

Technically there is no length limit for titles. For the sake of usability and Search Engine Optimization (SEO) it is best to keep them short. As most search engines trim titles (especially on smaller screens) it makes sense titles do not exceed a length of 50-60 characters. This ensures the title is concise and fully visible in search engine results.

Is it important to have unique HTML titles for each page?

Titles should allow for a quick identification of what a Web page is about. Good titles help users with orientation and identification of specific pages. That is why it is important to write unique titles that identify Web pages.

Can I use special characters and emojis in meta descriptions?

Technically, yes, you can use all kinds of special characters and emojis in titles to make them stand out. Emojis may not display consistently across all devices and browsers. Ideally you refrain from using Emojis, special characters, and similar click-generating elements with the sole goal to grab user’s attention. It's bad practice. You can use special characters like &, |, or symbols in HTML titles, but avoid overusing them. Keep in mind that some characters may need to be HTML-encoded.

Should I include keywords in the HTML title?

Yes, including relevant keywords in the HTML title is essential for user experience and SEO. It helps users and search engines understand the content of your page. Make sure the keywords flow naturally and don't overstuff the title.

How can I make my HTML titles more compelling?

To make titles more compelling, use action verbs, numbers, and create a sense of urgency or curiosity. Make it relevant and engaging.

Can I change the HTML title dynamically using JavaScript?

Yes, you can change the HTML title dynamically using JavaScript. This is often done to provide real-time information or update the title based on user interactions. It improves user experience and relevance of the title.

Should every page on my website have a unique HTML title?

Yes, every page should have a unique HTML title that accurately represents its content. This helps users and search engines distinguish between different pages.

What's the best practice for branding in HTML titles?

Include your brand name at the end of the title, typically separated by a pipe (|) or dash (-). For example "Page Title | Your Brand Name". This helps with brand recognition.

Is capitalization important in HTML titles?

Capitalization is not important but a matter of style. It's common to use title case for HTML titles, capitalizing the first letter of each word. Example: "The Art of Writing HTML Titles." Stick to correct grammatical spelling for better readability. Example: "The art of writing HTML titles."

Should I update HTML titles regularly?

You should update HTML titles when the content changes significantly or to improve Search Engine Optimization (SEO). Regularly reviewing and optimizing titles is a good practice.

Further readings #

Sources and recommended, further resources on the topic:


Jonas Jared Jacek • J15k

Jonas Jared Jacek (J15k)

Jonas works as project manager, web designer and developer since 2001. On top of that, his areas of expertise are in user experience, accessibility, internationalization, and domain names. See:


License: Title tag copywriting tips by Jonas Jared Jacek is licensed under CC BY-SA 4.0.

This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, for noncommercial purposes only. To give credit, provide a link back to the original source, the author, and the license e.g. like this:

<p xmlns:cc="" xmlns:dct=""><a property="dct:title" rel="cc:attributionURL" href="">Title tag copywriting tips</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="">Jonas Jared Jacek</a> is licensed under <a href="" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a>.</p>

For more information see the UXgem legal page.

“There are only two hard things in Computer Science: cache invalidation and naming things.”

Philip Lewis Karlton, American computer scientist and programmerWord of mouth, - UX quotes