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.
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.
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:
<head>
<title>Your Title Here</title>
</head>
The text placed between the opening <title> and closing </title> tags will be displayed as the title of the web page.
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).
The title of each Web page should:
Provide accurate and concise information to describe the Web page’s purpose or subject.
<title>Manuals and Instructions For Use (IFUs) | Brand Name</title>
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>
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>
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>
Ensure that each page on your website has a unique title.
<title>Wonders of the Amazon Rainforest | Eco Adventures</title>
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>
The title of each Web page should not:
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>
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>
Ensure the title isn’t empty or missing parts to accurately describe a webpage’s purpose or subject.
<title>| Brand Name</title>
When a page consistently displays recurring information, but the title lacks the latest date update.
<title>Meetings and Conferences 2018 | Brand Name</title>
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>
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>
Most common questions and brief, easy-to-understand answers on the topic:
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.
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.
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.
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.
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.
To make titles more compelling, use action verbs, numbers, and create a sense of urgency or curiosity. Make it relevant and engaging.
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.
Yes, every page should have a unique HTML title that accurately represents its content. This helps users and search engines distinguish between different pages.
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.
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."
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.
Sources and recommended, further resources on the topic:
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="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.uxgem.com/articles/html-title-copywriting-tips">Title tag copywriting tips</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" 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.”