Every webpage should have a defined title, which is a special code that tells third parties what the page is called. Titles appear in search engines, social networks, browsers and more. Compare with a heading.
Why they matter
Titles have become one of the most optimized parts of a modern website, especially when optimizing for traffic.
Titles appear as the heading for a search result (“Experience the ocean like never before | BBC Earth”):
The same title appears in the browser tab when that page is open:
And on Twitter, as the title of the post when shared (below the image):
Note that there are several different types of title, and you can specify them to be different. It is quite common to make a social media title shorter.
Best practices
Titles should make sense without any other information, e.g. “Man bites dog” is good, but “News article” is not.
Titles should be short (generally under 50 characters), with the most important information first. e.g. use “Experience the ocean like never before | BBC Earth” not “BBC Earth | Experience the ocean like never before”.
Generally, we recommend not including your organization’s name in every title. Instead of “About – Silktide” consider “About Silktide”.
Titles are arguably the most important part of making a page shareable. Where this is important, ensure that your titles are short and highly compelling. The best titles usually read like popular tweets by themselves.
There can be a conflict between clear, human-friendly titles and optimizing for SEO, which encourages keywords to be added to all your titles– e.g. “Tractor Design London – TractorCorp – tractors for the London Area – Best London Tractors”. As a general rule, optimize your titles for people first, but make sure your most important keywords are mentioned on a significant number of pages. “TractorCorp – tractor designs for London” would be an appropriate compromise.
How they are coded
The most common and essential title is defined inside a title tag, like so:
<title>This is a title</title>
You can also specify a different Open Graph title for Facebook, as the BBC did in the above example:
<meta property="og:title" content="This is a different title" />
Further reading
The title tag – MOZ