HTM-000034 | The <title> Element
A title tag is an HTML element that specifies the title of a web page. Title tags are displayed on search engine results pages (SERPs) as the clickable headline for a given result and are important for usability, SEO, and social sharing. The title tag of a web page is meant to be an accurate and concise description of a page’s content.
Code sample
<head> <title>Example Title</title> </head>
Optimal format
Primary Keyword – Secondary Keyword | Brand Name
8-foot Green Widgets – Widgets & Tools | Widget World
Optimal title length
Google typically displays the first 50-60 characters of a title tag. If you keep your titles under 60 characters, research suggests that you can expect about 90% of your titles to display properly. There’s no exact character limit because characters can vary in width and Google’s display titles max out (currently) at 600 pixels.
Understanding Fundamental questions about the title tag.
Why are title tags important?
Title tags are a major factor in helping search engines understand what your page is about, and they are the first impression many people have of your page. Title tags are used in three key places: (1) search engine results pages (SERPs), (2) web browsers, and (3) social networks.
1. Search engine result pages
Your title tag determines (with a few exceptions) your display title in SERPs, and is a search visitor’s first experience of your site. Even if your site ranks well, a good title can be the make-or-break factor in determining whether or not someone clicks on your link.
2. Web browsers
Your title tag is also displayed at the top of your web browser and acts as a placeholder, especially for people who have many browser tabs open. Unique and easily recognizable titles with important keywords near the front make sure that people don’t lose track of your content.
3. Social networks
Some external websites—especially social networks—will use your title tag to determine what to display when you share that page. Here’s a screenshot from Facebook, for example:
Keep in mind that some social networks (including Facebook and Twitter) have their own meta tags, allowing you to specify titles that differ from your main title tag. This can allow you to optimize for each network, and provide longer titles when/where they might be beneficial.
How do I write a good title tag?
Because title tags are such an important part of both search engine optimization and the search user experience, writing them effectively is a terrific low-effort, high impact SEO task. Here are critical recommendations for optimizing title tags for search engine and usability goals:
1. Watch your title length
If your title is too long, search engines may cut it off—adding an ellipsis (“…”)—and could end up not displaying important words. While we generally recommend keeping your titles under 60 characters long, the exact limit is a bit more complicated and is based on a 600-pixel container.
Some characters naturally take up more space. A character like uppercase ‘W’ is wider than a lowercase character like ‘i’ or ‘t’. Take a look at the examples below:
The first title displays a full 77 characters, because the “ittl” in “Littlest” is very narrow, and the title contains pipes (‘|’). The second title cuts off after only 42 characters, because of wide, capital letters (like ‘W’) and the fact that the next word in the title tag is the full website name.
Try to avoid ALL-CAPS titles. They may be hard for search visitors to read, and may severely limit the number of characters Google will display.
Keep in mind that, even within a reasonable length limit, search engines may choose to display a different title than what you provide in your title tag. For example, Google might append your brand to the display title, like this one:
Here, because Google cut off the text before adding the brand (the text before “…” is the original text), only 35 characters of the original title were displayed. See more below about how to prevent search engines from rewriting your title tags.
Keep in mind that longer titles may work better for social sharing in some cases, and some titles are just naturally long. It’s good to be mindful of how your titles appear in search results, but there are no penalties for using a long title. Use your judgment, and think like a search visitor.
2. Don’t overdo SEO keywords
While there is no penalty built into Google’s algorithm for long titles, you can run into trouble if you start stuffing your title full of keywords in a way that creates a bad user experience, such as:
Buy Widgets, Best Widgets, Cheap Widgets, Widgets for Sale
Avoid titles that are just a list of keywords or repeat variations of the same keyword over and over. These titles are bad for search users and could get you into trouble with search engines. Search engines understand variations of keywords, and it’s unnecessary and counterproductive to stuff every version of your keyword into a title.
3. Give every page a unique title
Unique titles help search engines understand that your content is unique and valuable, and also drive higher click-through rates. On the scale of hundreds or thousands of pages, it may seem impossible to craft a unique title for every page, but modern CMS and code-based templates should allow you to at least create data-driven unique titles for almost every important page of your site. For example, if you have thousands of product pages with a database of product names and categories, you could use that data to easily generate titles like:
[Product Name] – [Product Category] | [Brand Name]
Absolutely avoid default titles, like “Home” or “New Page”—these titles may cause Google to think that you have duplicate content across your site (or even across other sites on the web). In addition, these titles almost always reduce click-through rates. Ask yourself: how likely are you to click on a page called “Untitled” or “Product Page”?
4. Put important keywords first
According to Moz’s testing and experience, keywords closer to the beginning of your title tag may have more impact on search rankings. In addition, user experience research shows that people may scan as few as the first two words of a headline. This is why we recommend titles where the unique aspect of the page (e.g. the product name) appears first. Avoid titles like:
Brand Name | Major Product Category – Minor Product Category – Name of Product
Titles like this example front-load repetitive information and provide very little unique value at first glance. In addition, if search engines cut off a title like this, the unique portion is the most likely to disappear.
5. Take advantage of your brand
If you have a strong, well-known brand, then adding it to your titles may help boost click-through rates. It still commonly recommended to put your brand at the end of the title, but there are cases (such as your home page or about page) where you may want to be more brand-focused. As mentioned earlier, Google may also append your brand automatically to your display titles, so be mindful of how your search results are currently displayed.
6. Write for your customers
While Title tags are very important to SEO, remember that your first job is to attract clicks from well-targeted visitors who are likely to find your content valuable. It’s vital to think about the entire user experience when you’re creating your title tags, in addition to optimization and keyword usage. The title tag is a new visitor’s first interaction with your brand when they find it in a search result—it should convey the most positive and accurate message possible.
Sometimes, Google may display a title that doesn’t match your title tag. This can be frustrating, but there’s no easy way to force them to use the title you’ve defined. When this happens, there are four likely explanations…
Why won’t Google use my title tag?
1. Your title is keyword-stuffed
As discussed above, if you try to stuff your title with keywords (sometimes called “over-optimization”), Google may choose to get judgmental and simply rewrite it. For many reasons, consider rewriting your title to be more useful to search users.
2. Your title doesn’t match the query
If your page is matching for a search query that isn’t well represented in the title, Google may choose to rewrite your display title. This isn’t necessarily a bad thing—no title is going to match every imaginable search—but if your title is being overruled for desirable, high-volume searches, then consider rewriting it to better match those search keywords and their intent.
3. You have an alternate title
In some cases, if you include alternate title data, such as meta tags for Facebook or Twitter, Google may choose to use those titles instead. Again, this isn’t necessarily a bad thing, but if this creates an undesirable display title, you might want to rewrite the alternate title data.
4. You have an old DMOZ listing
In rare cases, search engines may pull a title from DMOZ (aka Open Directory Project). If your display title in search doesn’t match your Title tag but does match your DMOZ listing, then you can block that substitution with the Robots NOODP tag, which looks like this:
<meta name="robots" content="noodp">
Meta-robots is a fairly technical topic, but if you’re seeing an unexplained display title in SERPs, do a quick search on DMOZ for your business. You might save yourself a few headaches.
Tasks to Complete
- Complete all available resources found in lesson resources
- Read all content on this page.
- Follow any links and complete quick review.
- There are no assignments associated with this section of the lesson that must be submitted.