What If CSS Style for <h1> Tag Is width: 1px; height: 1px; ?
cdblaine
9:19 am on Feb 27, 2019 (gmt 0)
Hello,
On the web page for a very important technology company (I won't say which one), here is how they code their <h1> tag and CSS style (I've omitted the product name):
Because width and height are 1px, the contents of the <h1> are never seen. What we do see is the pretty image that follows the <h1> tag.
Is this black hat SEO? Or no big deal?
Thank you.
JesterMagic
1:45 pm on Feb 27, 2019 (gmt 0)
I mentioned in the other post that our site name was in the H1 tag but our logo was set as the background image. The text of the H1 was set at a -3000px text-indent thereby hiding the text from normal view.
The text wasn't hidden for black hat purposes (we didn't create the initial template). As far as I know we didn't suffer any ill effects as when we removed it our serps remained the same.
I don't recommend hiding text for the purposes of SEO but there are a lot of legitimate reasons. For example Tabs, Form dialogues, and screen readers (which I think may be what has happened with your example). Ideally they should not have used the H1 tag though. For more on this see [webaim.org...]
Wilburforce
2:39 pm on Feb 27, 2019 (gmt 0)
Rendering H1 to make it invisible cannot have a legitimate purpose: its use is semantic, not decorative, or manipulative. What is its purpose in this example?
If you don't want to use it semantically, don't use it at all.
@JesterMagic, your link makes this point:
Important!
In general, content should only be hidden from sighted users and made available to screen reader users when content is apparent visually, but not apparent to screen reader users.
Techniques that render background or other images accessible to non-visual browsers are OK, but using images to conceal semantic content isn't doing that. The fact that you have got away with it doesn't make it good practice.
JesterMagic
6:04 pm on Feb 27, 2019 (gmt 0)
I actually wasn't indicating it was good practice. In another similar topic that cdblaine had, I said as much. I was in part carrying on the previous conversation.
cdblaine
8:28 pm on Feb 27, 2019 (gmt 0)
Thank you for your responses. Just to be clear, I didn't use the code that made the <h1> text invisible. Another company did that.
Thank you.
tangor
8:34 pm on Feb 27, 2019 (gmt 0)
How long ago was that page created? Do you have access to question the original coders to find out their thought process?
Something as odd as wanting the (product name) to be indexed but avoiding h1 for "styling text" is possible, dumb, but possible.
What was your solution to this? What changes have you made?