Archived topic
Adding H1 to blog page
3 replies · Started by mkjj on August 4, 2021
Similar questions has been asked before here:
https://generatepress.com/forums/topic/h1-to-blog-post-page/
https://generatepress.com/forums/topic/blog-page-missing-h1-tag/
However, that's not quite what I want. I use a header element for the blog page showing a full-width image and a link like so:
<a class="hero-click" href="https://doriskirch.de/achtsamkeits-blog/"><!-- click zone --></a>
https://doriskirch.de/achtsamkeits-blog/
Now, there is no H1 on the blog pages, and I don't really need one to show, since the header image is essentially the headline. How could I keep the SEO tools happy while not changing the design of the page?
I could change the hero content to something like this and set the text-indent so, that the text never shows. Or I could set it to unvisible:
<h1><a class="hero-click" href="https://doriskirch.de/achtsamkeits-blog/">Some text here</a></h1>
Would this be ok?
This it not anything I would consider very important. But customers or their SEO experts will eventually run the site through SEO tools and will blame me for any warnings that appear. This is why I would rather pro-actively avoid this. :-)
Hi there,
<h1><a class="hero-click" href="https://doriskirch.de/achtsamkeits-blog/">Some text here</a></h1>
This would be ok but this'll make the text of the link look huge. You may have to custom style that.
Adding in an h1 and styling it with display: none; to hide it is fine too.
Thank you very much for taking the time for this question that is not really GP-related. I appreciate that. Well, it seems there is no best practice for this specific problem. Nobody knows what Google might consider cloaking. For now, I set opacity: 0;. Is it better than display: none; or visibility: hidden;? I have no idea. I keep you posted if I can get some definitive information on that topic.
It's better to go with display: none;.
opacity: 0; and visibility: hidden; will cause empty spaces because you basically just made the h1 invisible.
display: none; completely removes it from view.
