Page title

Every webpage should have a defined title, which is 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 (“BBC – Earth – Seven incredible ocean record breakers”):

The same title appears in the browser tab, when that page is open:

And on Facebook, as the title of the post when shared (below the image):

Note that here the Facebook title (“Seven incredible ocean record breakers”) was shorter than the one in Google (“BBC – Earth – Seven incredible ocean record breakers”). This is because there are several different types of title, and you can specify them to be different. It is quite common to make the social 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 “Exciting thing happened – BBC News” not “BBC News – Exciting thing happened”.
• Generally we recommend not including your organization 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 are 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 in 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, like 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
• The Open Graph Protocol