julezrulez
commented
3 years ago Titles are used in many places:
- titles used to shown in the title bar of browsers
- nowadays the title is shown in a tab of browsers
- search engines in search results
- first thing a screenreader announces when a webpage is loaded is the title
Some things to think of for page titles.
- The
<title>element should only appear once in the header of the code. - The
<title>element must be used in a webpage. (WCAG) - Every page must have a non-empty title. (WCAG)
- The title describes the topic or purpose of the page. (WCAG)
- Put the most important words in front.
- This said; -- Start the title with the page description. -- End the title with the name of the website. -- Separate the 2 strings with characters that are not read by a screenreader. For instance a certain screenreader reads aloud the | as "vertical line". So better use a comma or other character or symbol a screenreader ignores.
- Use short (not too short) titles. Keep in mind that Google only shows about 55 characters of the title in the search results.
- Use unique titles in a website.
- Identify different versions of a webpage: -- For instance add a date to the title when a older version of a page is of a certain date. -- This might be harder for a bi-langual website. It has a sitemap for the Dutch version and a sitemap for the English part of the website. Both are named "Sitemap".
- The title of the homepage might differ in structure from the rest of the website, just like the
<h1>is often differently implemented on the homepage. -- Use the website name only, i.e.: "ICTU" for the homepage of the ICTU website -- Use "Homepage" and website name: "Homepage ICTU" -- Instead of "Homepage" other names can be used, like: "Home", "Portal", "Startpagina" - Change titles when pages change dynamically (i.e. single page applications)
Yolijn
Component with instructions for rendering an effective and helpful HTML
<title>element.