Page title
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
- The Document Title element – MDN
