[Support request] H1 Tag Missing From Homepage

[Jenny]

According to an SEO audit, I am missing an H1 tag on my homepage.
I have used a logo and displayed the site tagline but have hidden the site title. The logo has my website title in it.
I do not know how to fix it, I have tried looking for the answers, but I am not very techy.

[Leo]

Hi there,

The best solution here would be to add a <h1> element using a header element:
https://docs.generatepress.com/article/header-element-overview/
https://docs.generatepress.com/article/page-hero-examples/
https://docs.generatepress.com/article/how-to-create-a-page-hero/

Let me know if this helps 🙂

[Jenny]

Hi Leo,
I looked at all the documentation you sent me, but I am not techy at all and I do not know where to begin. I do not want to start adding code as I am afraid of messing my site up.

Is there a simple way that this can be done? If there is custom CSS to add I can do that if I knew where to add it.

[Leo]

CSS cannot turn something into an <h1>.

The issue here is that there isn’t an element that is suitable to be <h1> on the home page. To be honest I don’t think it’s a big deal nowadays.

If you really want to add an <h1>, then you can try creating a header element with something like this as the content:
<h1>Blog</h1>

[Alicia]

H1 on the home page is the title of the Site. It is very important when it comes to screenreaders for accessibility.

In fact, all of the Headings (h1, h2, h3, etc) need to be used hierarchically so the page makes sense to the sight impaired.

Hiding the site title doesn’t remove it from the code nor screenreaders (hopefully). It’s still there. I can see it in my own code for my clients’ site. So, I’m imagining this will be picked up by Google when the site is indexed.

Accessibility is becoming a BIG thing now, especially since the shelter in place. 98% of the web does not meet WCAG accessibility standards. And most of the court cases now are from blind users who found accessibility limitations.

[Tom]

Yes, by default your site title will be the H1 of your posts page.

If you’re not using a site title, you can add an H1 to the posts page quite easily:

1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Add your content:

<div class="page-header">
    <h1>Your title here</h1>
</div>

3. Add it to the generate_before_main_content hook.

4. Set the Display Rules to “Front Page” if your blog is your front page. If not, set it to “Blog”.

That should do it 🙂

[Cory]

I have that same problem. I added some code with the h1 tag for my blogroll but I don’t like where the heading “Blog” shows up on the page. Is there a way to change where the h1 tag shows up on the page?

Any help with this would be greatly appreciated.

Cory

[David]

Hi there,

See this visual guide for where each of the different hooks is positioned:

https://docs.generatepress.com/article/hooks-visual-guide/

[rajkumarsm]

Hi Tom & David,

Facing the same issue “H1 Tag missing from Homepage”

Here is my site URL “Software Testing Material”

Have added the above code and set the display rules as a blog. On the blog page, the H1 tag is appearing whereas the main problem still exists.

H1 tag is missing on the homepage. I tried setting display rules as homepage. H1 (title) is displaying on the homepage but the site design is breaking. My homepage is designed using Elementor.

Can I add any CSS for this to hide h1 in the front end for users?

As of now, I left display rule to blog page.

Is there any workaround for this.

Thanks in advance.
Rajkumar

[David]

Hi there,

as your Home Page is built with Elementor you will need to add the H1 in your elementor content.

[Anil]

Hi

I learned as follows

add

<h1 style="display:none">Your title here</h1>

with hook on home page only.

That’s it.

2 years before I pointed out this issue, can any gp version would update this? I believe one line of option in customizer would solve this for newer users.

[acela]

Expanding on what Tom, Alicia, and Anil wrote above, I solved this by adding the following Elements hook for generate_before_main_content:

<?php
	$site_info = get_bloginfo( 'name' ) .": ". get_bloginfo( 'description' );

	if ( get_query_var('paged') )
		$page_number = ", Page ".get_query_var( 'paged' );
	else
		$page_number = "";

	echo <<<EOT
<header class="page-header" style="display:none;">
	<h1 class="page-title">$site_info$page_number</h1>
</header>
EOT;
?>

…with “Execute PHP” checked, and Display Rules > Location set to “Blog.”

That added a <h1> tag to all pages on my site which had not previously included one.

[Alicia]

Nice, acela!

[imajn]

Thanks Anil. That worked for me out of all the coding mentioned.

[Elvin]

Watch out on where you put it on. It may cause duplicate h1 and that’s another error flagged. There should be one and only 1. Glad you got it sorted. 🙂

[Author]

Posts