H1 Heading clarification

Is the “H1” the the POST TITLE? For example, on this page https://www.floridagreenhomeconsultants.com/air-duct-sealing/

No – it’s an H2 element.

is the 1st centered heading below it, “Looking for Air Duct Sealing in Florida?” also a H1 Heading

No – that’s not a heading at all. Just text that has been styled to look like a heading. And, yes, there is a big difference from an SEO perspective.

Thanks for your input, but now I am really confused.

Firstly, when I created the post, I had to give it a title, at which time there was no way for me to assign an H1 or H2 to it. So how did my POST TITLE just become an H2?

Secondly, When I typed “Looking for Air Duct Sealing in Florida?” a the top of my post, I intended it to be a heading, and so selected “H1” from the PARAGRAPH dropdown. My concern, is that someone pointed out to me (rightly or wrongly ???)that this is a mistake because there can only be one H1, and that was automatically given to my POST TITLE.

Where am I going wrong with this?????

Thank you again for your help,
Marius

The post title h2 is already coded in the theme. It’s not true that you can only have one h1 — but for SEO purposes, you should only have one h1 per page. In your theme (and most themes), the h1 is the blog or page title. Yours is set to not display as you are using an image for the header.

Generally, for SEO, and accessibility, headings (h tags) should be used in the order of importance on the page — so you could still use h3 for those headings in the articles.

You might want to do some reading on SEO — Google webmaster tools is a good place to start.

I understand your 2nd paragraph but I cant understand one thing about the 1st one. I will go and study Google webmaster tools and see if I can make more sense of it after that.
Thank you for your interest.

Marius

Ok, in other words. You can use h1, h2, h3… h6 any time you want but for design purposes you should use them only on headers, and for SEO purposes you should use h1 only once.

They are numbered in order of importance and h1 should be your blog name, h2 your posts titles and then h3 and the rest to use at your own discretion.

If you chose to display an image instead of you blog heading, you are not using your h1. Your h2 is well employed as post title and you can use and style a h3 as you desire for subheadings within your contents.

Cheers!

Thanks for your input Bea. Most of the confussion for me comes from the different names for everything. For clarification of what you wrote, let’s use this page as an example :
https://www.floridagreenhomeconsultants.com/air-duct-sealing/

You wrote: h1 should be your blog name,- IS MY “BLOG NAME” “Air Duct Sealing” AT THE TOP LEFT OR IS IT “Looking for Air Duct Sealing in Florida?”?

You wrote: h2 your posts titles – WHAT IS MY “POST TITLE”?

You wrote: If you choose to display an image. – IS MY “IMAGE” MY COMAPNY NAME IN GREEN AND 2 PICTURES, ALL ABOVE MY NAVIGATION?

You wrote: instead of you blog heading, you are not using your h1. WHAT IS MY “BLOG HEADING”?

Your h2 is well employed as post title. WHICH ONE IS MY “H2” AND WHICH ONE IS MY “POST TITLE”?

Thanks again for your interest and help.
Marius

Hehehehe ok.

Mmmm I’d say:

– your blog name / page name is the green banner at the top. –> h1 (if it were not an image)

– “Air Duct Sealing” (top left) is the post title if it were a blog post (it seems a static page though, but more or less the same “rules” apply) –> h2

– “Looking for Air Duct Sealing in Florida?” is another subheader –> h3

– “Comfort”, “Indoor Air quality”, “Safety”… and so on could be h4

– The two lines underneath “Looking for Air Duct Sealing in Florida” could be h5 and h6 or be as well specially styled paragraphs.

This is according to structure. Then, in the style.css file you can style each of these headings to make the fonts bigger, smaller or change color to suit what you would like it to look like.

I hope this is clearer now.

Cheers.

Thanks for wading through all of that Bea.

So because the green banner at the top IS an image, I dont ahve an H1?

And if so, shouldn’t “Air Duct Sealing” (top left)become the H1 (even though I have no controll of that)? Otherwise I dont have an H1 anywhere ??

Marius

You could change all h2 for h1… you could just leave h1 out… or you could add a h1 page name just before or after the banner image and hide it with css.

For instance:
html
<h1 id="blogname">Your page's name</h1>

css:
#blogname {visibility: hidden; height: 0px;}

I’m not a SEO guru. I don’t know what the best option in terms of that would be. But I guess the third one because in that case, although it is not visible, it is still in the code.

Cheers.

Google does honour some CSS, so rather than using visibility: hidden, try:

#blogname {
position:absolute;
top:-9999px;
left:-9999px}

Google is quite happy with that (as long as you don’t overdo it) and it has the added benefit of making the site name available for disabled users and those using non-graphical browsers.

Well, yeah, it is the way to hack google’s SEO, but it is not actually “hiding”, you’re just moving it aside.

As you say, it is fine as long as you don’t overdo this technique.

It’s an accepted best practice technique for improving accessibility levels on sites and this scenario is exactly the kind of situation it was meant to be used in. From what I recall, we had one of the guys from Google onboard when a group of us developed these kinds of techniques. So it will get the thumbs up from Google. I use it regularly for skip links etc. and still get excellent PR. The only time it would bite back would be if you used the technique for hidden keyword stuffing.

It is an accepted technique, but definitely not best practice in design terms. If this person wants to totally hide (as in “has never existed something there”) why would he want it to be visible to people with css off?

On that matter my solution would also prove wrong, he should filter it out from his html, but I assume it is easier to trick in the css.

Anyway, I’m not saying your solution is wrong. I’m just saying it is good for SEO, it is good for Google and PRs, but it is not an elegant design solution. Hide means ‘hide’ and you’re ‘displacing’. That’s all.

Nevertheless, yes, it is a common practice that I also do in my own website.

Cheers!

why would he want it to be visible to people with css off?

Because screen reader software doesn’t honour this kind of positioned CSS. In situation where the site’s title is actually a graphic, the same screen reader users cannot “see” the text in the graphic and their AT software will not render the text in the image if the image has been applied using CSS. The technique merely makes the same information that is available to sighted users available to these users too.

Sorry but this is basic accessible web design.

Yes, I know that, but this is NOT the case here ;).

He is not substituting any text with images that screen readers will not be able to read.
He is not looking for any FIR technique.

He just wants to completely eliminate some text, from the view, from his website. He does not want it there.

Sighted users will not be seeing an image instead, they will not be seeing anything there, so why should non-sighted users be able to see it? Is there any point in making accessible something that the author does not want anyone to read?

Of course, the best practice should be to not have it there in the first place ??… so I would recommend to simply strip it off. Why would you design a page for yourself with content you don’t want to have? But then again, as many times, people tune already existing themes and have to deal with their structure… so that’s why I posted a css hide trick.

EDITING: (:$)
OMG esmi, I confused threads!!! I was talking about a guy that wanted to hide a page title and did it white instead so there was a huge gap there… SORRY!!! Yes, in this case… You DO want to keep the h1 text AND the image. Sorry. I hope you see that I was talking about a different case. I guess this topic is resolved now ??