Say you're creating a page for faculty and staff. You enter Faculty & Staff as the Display Name, but after clicking Preview Draft, you notice it's splashed across the top of the page.
You can’t shake the feeling that it just doesn’t look right, and you think the simplest solution would be to delete the Display Name, so nothing appears at the top of the page.
That’s a bad idea. Every page on your site needs a Display Name. It serves as both the H1 and part of the meta title. Deleting it can hurt your page's SEO rankings.
Keep the Display Name, change the H1
While every page in Cascade needs a Display Name, it doesn’t always have to be the main heading. In Page Options, you can select Remove auto-generated page title (H1) to stop the Display Name from appearing as the heading.
In the Page Editor, look for the Page Options section at the top.
Click the section to expand it. Then, find the Remove auto-generated page title (H1) option and check the box marked Yes.
Turning off this feature stops the Display Name from automatically appearing at the top of the page. You’ll then need to add a new H1 so the page can have a proper heading.
How to write an effective H1
Every page needs an H1. It sets the subject for the page, guides readers into the content and helps screen readers and other assistive technologies navigate your page. A strong H1 improves readability, accessibility, and SEO.
Here are a few quick tips for crafting a strong H1:
- The first rule of any H1 is that it must be at the top of your page. H2s and other headings should appear below your H1.
- Be direct and eye-catching.
- Use relevant keywords for better SEO, but avoid keyword stuffing.
- Keep it concise. One word or short phrase is the ideal length.
- Be creative! Don’t reuse the same H1 for similar pages. For example, instead of Faculty & Staff as the H1, try Meet our Dedicated Staff or Connect with Faculty.
These small, simple changes in your H1 can make the page more inviting and improve SEO.
What is a hidden H1?
A hidden H1 is a page heading that is included in the HTML of the page but not visible to users. Even though it’s hidden, it still needs to provide the same information as a regular H1. It’s important to format your hidden H1 correctly so screen readers can still access it.
How to create a hidden H1
To create a hidden H1, add the show-for-sr class to your heading like this:
<h1 class="show-for-sr">Your H1</h1>
This ensures your page has a proper H1 that is accessible to screen readers and web crawlers without showing any visible text to viewers.