DEV Community

Andy Leverenz
Andy Leverenz

Posted on • Originally published at web-crunch.com on

HTML Title Tag Tips and Tricks for better SEO

The <title> tag in an HTML document is the main entry point for popular search engines including Google and Bing.

You can use it to both inform the end-user of your website and increase your SEO (search engine optimization) rankings with the search engines mentioned before.

The <title> tag lives between the <head> tags in an HTML document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My website | Web-Crunch.com</title>
  </head>
  <body>
    ...
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

You won't see the contents of the <title> tag render on the page but it does render in your browser's tab. This feature is useful for understanding where you are on a website as well as what website you are on if you are using a browser with multiple tabs open.

Additionally, you can provide real-time updates to the <title> tag to inform users of updates taking place on the website they have already visited. This might include things like errors, status updates, notifications, and more. Some websites will go as far as updating both the favicon (the icon next to the title in your browser's tab) and the title when a change occurs.

Besides real-time updates, having unique <title> content on every page of your website will perform much better when people search on search engines. This allows search engines to properly index all the pages of your website which ultimately returns higher quality search results.

How you construct your <title> tag contents can vary. You'll want the unique content first in line no matter which path you go.

<title>Blog: The blog of Andy Leverenz | web-crunch.com</title>


<title>This is one good blog post title | web-crunch.com</title>
Enter fullscreen mode Exit fullscreen mode

Here are some good guidelines to follow:

  • Avoid one or two-word titles. Use a descriptive phrase or a term-definition pairing for glossary or reference-style pages.

  • Search engines typically display about the first 55–60 characters of a page title. If you must use a longer title, make sure the important parts come earlier in the string of text.

  • Don't use "keyword blobs." If your title is just a list of words, algorithms often reduce your page's position in the search results.

  • Make your titles as unique as possible within your own site. Duplicate—or near-duplicate—titles can contribute to inaccurate search results.

Read more about the <title> tag on MDN.

Shameless plug!

Hello HTML & CSS

I have a new free course coming out soon called Hello HTML & CSS. It's a course designed to help you learn HTML & CSS from scratch.

Subscribe to get notified when it launches >>

Top comments (0)