Did a “Missing Title” error appear in an Accessibility Checker audit of one of your WordPress posts or pages? Read on below for an explanation of this error, how it impacts your website’s accessibility, and how to fix it.
About the Missing Title Error
What is a title?
A title is an HTML tag that describes a web page. Unlike visible page headings, which can include an H1 heading that is the same as the page title and can be seen by sighted users on the website, an HTML title is not visible when viewing the content of the webpage.
Page titles are included in the code of the web page’s head section and are typically only visible to sighted users in the browser tab for the page:
They may also be visible in search engine results or if the post or page is shared on social media. The HTML title may or may not be the same as the heading level 1 (H1) heading that is visible on the page to sighted users.
Page titles help web users and search engine crawlers to know what the web page is about.
How are titles coded?
In HTML, there are two ways to code the title into a web page’s code, depending upon how likely the page is to be shared on social media.
The traditional way of coding titles into a website is by wrapping the descriptive title text in an opening and closing <title> tag. For example, the title for this web page would look like this in this method:
<title>Missing Title » WordPress Accessibility Checker Plugin</title>This tends to work best for web pages within web applications, internal portals, or other web pages that users are unlikely to share.
For pages that are likely to be shared to social media – including marketing pages on a website and blog posts – the best way to code in the title for the page is with an Open Graph tag. The Open Graph protocol was created by Facebook and is also used by other social media sites to quickly identify rich information, such as the title, description, and the featured image, for a web page.
If social media sharing and bringing traffic back to your website via social media is important to you, then an Open Graph meta tag is how you should code in your website title. This is how our titles are coded on our WordPress site. Here is the exact code for this page:
<meta property="og:title" content="Missing Title » WordPress Accessibility Checker Plugin" />What does the Missing Title error mean?
A Missing Title error means that your post or page does not contain a title element. This could happen if the theme fails to add a title tag, or if the title field of a post or page has been left blank in the WordPress edit screen.
How does Accessibility Checker test for missing titles?
While auditing your page or post content, Accessibility Checker checks to see if a title has been added to the post/page in the editor. Additionally, in the Pro version of the plugin, Accessibility Checker scans the website’s <head> section to ensure that a <title> tag or og:title meta tag is present.
If the post or page is missing a title in the database, or if there required code is missing from the head of the website, a Missing Title error will be flagged.
Impact on Accessibility
Why are titles important?
Title tags describe the content and purpose of a web page. If a theme fails to add title tags or the title field on your post or page is left blank so the theme cannot load a title, blind and visually impaired users may have a hard time determining the purpose of the page and what it is about. This is particularly true if they followed an ambiguous link to get to the page.
When a page is missing a title, the tab in the browser will display the URL.
For people who use screen readers, this means that if they are tabbing through the open tabs in their browser, they will simply hear the URL of the page. If that were the case on this page, for example, they would hear “https://equalizedigital.com/accessibility-checker/missing-title/” instead of “Missing Title » WordPress Accessibility Checker Plugin”.
If a blind person had several tabs open for your website, all of which did not have a title, it would take them a lot longer to figure out which tab they want to go to, because the screen reader would have to read the full URL to them before they could identify the page since to the information about the page is at the end of the URL.
In contrast, a properly formatted page title has descriptive information about the page before any additional information or the website name. This makes it easier for all users to identify the tab they are looking for quickly, including people without disabilities. Contrast, for example, these four browser tabs, the first two of which have titles and the second two do not.
Even a sighted user would find the last two tabs confusing. What are they about? No one would know unless they clicked on them.
Missing page titles are even more challenging if your website is not set to use descriptive or “pretty” links. If the URL to a web page is “https://website.com/post-1234” then someone using assistive technology may have to have their screen reader read them a fair bit of text on the page before they would know what the page is about. This is compounded if your page is also missing headings.
Not having page titles makes it harder to manage your WordPress site
Accessibility and usability is not just something that applies to your customers and website visitors, it should also apply to your team and employees as well.
We frequently see websites whether the content manager has intentionally left the post or page title blank because they didn’t like how it outputs on the front end of their website and don’t know how to visually hide it or change its appearance. The unfortunate result of leaving page or post titles blank in WordPress is not just that it’s bad for accessibility on the front end but also that it makes it really hard to manage the back end of your website.
The website in the screenshot above has 410 pages. More than 50 of them don’t have a title because it was intentionally left blank.
If one of these untitled pages was the “About” page and it needed to be edited, how would you find it? You would have to either:
- remember when that page was first published (unlikely),
- open all of the pages without a title one by one until you found the correct page, or
- navigate to the correct page on the front end and click edit from there.
No matter which route you chose, it would take a lot longer than if your page just had a visible title on the back end.
Having titles on your posts and pages makes it easier for your team to manage your website effectively. If you want to hide the visible title on the front end of your website, the correct solution is to install a plugin or choose a page template that hides the title. If you don’t like the way it looks then the correct solution is to restyle it (or have a developer restyle it) using CSS.
Bonus: title tags are good for search engine optimization and social media marketing
In addition to being good for accessibility, title tags appear in search engine results as hyperlinked text that web users click on to go to a web page. They also appear in link previews when someone shares a URL on Facebook, LinkedIn, Twitter, and other social media sharing sites.
Writing descriptive and well thought out title tags will allow more web users to easily understand the content and purpose of your web page at a glance which can lead to increased traffic and greater conversions.
Without a title tag, web users may ignore your page in favor of one with an appropriate title. Search engines and social media platforms may select a snippet of text to use as the title for the page which may not accurately reflect the page’s content.
Relevant WCAG 2.1 Success Criteria
2.4.2 Page Titled – Level A
Web pages have titles that describe topic or purpose.
How to Fix a Missing Title Error
What to do (in short)
To fix a page with no titles, you will need to add title elements. First, determine if the title is missing because you left the page or post title field blank in the editor. If so, fill it in. If a title is filled in and visible on the backend then the code in the <head> of your web page needs to be edited to include a <title> tag or og:title meta tag.
How to find missing titles on your WordPress site
First, install the free Accessibility Checker WordPress plugin.
For any pages or posts that have the Missing Title error, you will see the error in the details tab of the Accessibility Checker meta box. You generally do not need to expand the error for this particular case, but if you do, you’ll see the ID of the post missing a title.
If you are viewing the error within the post or page edit screen, the ID information is not necessary, but if you have Accessibility Checker Pro and are looking at the list of all open items, this ID might help you track down the post or page that needs to be fixed.
If the Missing Title error was flagged because of a title field intentionally left blank, these should be relatively easy to identify from within the editor, as shown in the screenshot above, showing pages without titles on the WordPress page edit screen.
If the title field is appropriately filled in and the error still flags, then that means the correct title code is missing from your theme.
What to do if your theme does not have the title coded in
If the title tag is missing from your theme there are a couple of ways that you can proceed:
- If you are comfortable editing code, you can add the missing tag to your header.php file in your theme or a child theme. If your theme receives updates, it is important that you add your changes to a child theme so that they are not lost the next time you update the theme. Learn more about child themes.
- Install Yoast’s SEO plugin. The Yoast SEO plugin will ensure that you have the appropriate information coded in your website’s
<head>section for social media and search optimization, and this includes adding anog:titlemeta tag.
If neither of these options works, see what to do if your theme has accessibility errors you cannot fix.
How to hide the page title on the front end
There are a number of free plugins on WordPress.org that hide titles. If you do choose to use one of these, you want to make sure that you manually place a heading level 1 (<h1>) tag on the page. Your H1 heading should contain text that adequately describes the page as this is important for both accessibility and search engine optimization. Learn more about why headings are important on the Missing Headings page.
