SEO-friendly HTML structure example
Hey there! I got a quick question on structuring my HTML especially on heading-levels. I have a design with eyebrow headings (basically a subtitle but above the title) so the eyebrow will be a
h3 and the title a h2. Is it fine to place the h3 eyebrow above the h2 title inside my HTML structure?
Or do I bother to do the following, since it brings me more benefits then flaws?
57 Replies
No
One sec let me elaborate lol
If you look up headings in MDN, you'll see this: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#usage_notes
Do not skip heading levels: always start from <h1>, followed by <h2> and so on.I'd use an
hgroup here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup
The <hgroup> element allows the grouping of a heading with any secondary content, such as subheadings, an alternative title, or tagline. Each of these types of content represented as a <p> element within the <hgroup>.So maybe you can try something like this:
I will have a h1 as visually-hidden, so you would suggest the
hgroup with a paragraph and a h2?Regarding the original example too, I see what you're trying to go for but that feels really hacky, in any case I don't think you'll get that much benefit from including an h3 over using something more semantic like
hgroup but as always I could be proven wrong
My h1 was just an example, feel free to use an h2 if it's below an h1, but I'm not sure you're exact use case. Do you mind sharing what the h1 is & context of what you're trying to achieve?This is basically my current structure just looking at headings
Don't use headings visually
only semantically
Ignore the sizes of them would you still right it like that?
probably not xD
Agree with Vince don't sleep on <heading> and <hgroup>
you can even combine the too to really style up headings with mustaches or beards
then just use <b><i><span><p> w/e
I didn't write the headings like this for font-size or whatever, was looking to make it best for SEO-cases and screen-readers. But I guess there are better ways?
Please never use headings inside <a>'s
If you really want to make it good for SR you need to download and use a SR to test with to truly understand (imo)
But SR's use Heading lists, link lists, landmark region lists to navigate mostly
Far as SEO goes you just want to make sure you are using the proper struct and heading levels as Vince said
Very rare will you need a H3 for example
for that you would have a page title, section title, subsection title<h3>
or like in a <aside>
You also have "reader modes" that will want a <article> with proper direct heading to enable it in browsers with support
This is an example of one of the eyebrows (this case "Design page"). Probably doesn't deserve a h2?
no 3d collect would be the only heading there*
mustache should just be a div/span/i/em/b/strong/ w/e
that would also depend how you wanted it read outloud
Honestly, 'design page' as a heading will probably not really help your seo efforts anyway
nope it wouldn't xD
yeah true, I thought just for screen readers 😂
but I feel like SR is so complex that I won't cover it all anyways
Also whats in the heading is not going to help with SEO as much as you think it might.. Its more about having the proper structure
Maybe it'll help google understand your page a bit better but I doubt your rankings would increase all too much but maybe I'm wrong
no you are not wrong vince, again whats in the heading matters little
I would match your title and h1 though
Should be pretty much identical imo
so Multimedia Designer as h1?
but like sitename - title | or w/e
no the <title>
Match w/e you do for the <h1>
oh yeah makes sense
the mustache thing is kinda unclear for me, should I check it out?
🤷♂️ I mean think of it this way maybe
You will never have a heading be a sibling right after another heading
so
the H3 would be a sub title inside the section
so unless you are going another level down don't use it
that makes more sense
So something like this?
Also I will use <header> before <hgroup> but I'll use <hgroup> in a header 😄
Some reason I found that <hgroup> was not being seen in Edges readermode but it would inside the <header>
rather it would not engage the icon for reader mode*
I would use section in this case not hgroups
also the h1 should be inside main
idk why you are visually hiding it though 🤔
Lots of times if you visually hide something you will want to hide it from a reader too.
Or vise versa
I'm hiding it cus it's not within the design, but I feel like all my other headings are not h1's cus they don't really say what the page is
I don't get what they are 😄
context is lost for me I think but thats ok
I still wouldn't hide a H1 🤔
This is the design for my portfolio
I would make your name the h1 in that
The visible text that could be a h1 is my title
actually I would make all of name+title the h1
job-title or whatever u wanna call it 😂
So like
sorry I write in pug 🤣
haha no worries
That is how I would do that design personally
and then just style the span to make it break and stuff
Then the 3d collective would be a section with h2
awesome
make all those cards sections?
I would yea inside a <main>
I just did plain divs rn
You could make them Articles too its debatible which xD
yeah I was looking at articles, however the smallest card doesnt say much on it's own
its connected to the image above
Yea I've seen arguments where article for cards does make sense but I can't brain atm.
alright awesome, gonna make some changes. Thanks!
dig the design gl!
I will most likely reach out to people instead of being reached out to, but.... good practice is always good practice 😉
thanks! I've been struggling a lot with getting it to work, but i'll keep trying haha
appreciate ur time and explanation
yea np I'm passionate about semantic html/a11y/seo so xD makes it easy.
I do recommend installing w/e free SR you can to test with though if you do care. (you might be surprised at how it works/or site is read out)
do they show areas of improvement?
or just show how it works
https://www.sarasoueidan.com/blog/testing-environment-setup/ (older but still great starting off point of reference and why its good to test than just slapping aria on stuff)
i'll have a read, it's very interesting
oh btw i'll have the project title h2 most likely hooked up with js to change the title, that should be fine right?
change title on button press to change between projects
Only the first loaded one will matter for SEO*. But it would be fine.
I'm not sure if it would change for the SR I would assume so ( yes it seems to)
If you wanted all those cards to work with SEO they need to be in the DOM in the first load, then hide/show with JS
Or use a CSS only for your carousel vs js at all 😅
probably just gonna change the innerHTML, thanks
just so you know that still wont be read by SEO, any JS a user has to interact with to inject data won't. Google claims its better about JS fetched data on load* but having all the info in the DOM for the first crawl/parse is still best.
Its one reason why SSR/Static are still best for SEO (that and speed)
so there is a way for css only to change text and image when interacting with an arrow image?
You would just hide/unhide it visually
switch between displays I assume?
Christian Schaefer
CodePen
A CSS-only Carousel Slider
I've recently read about and discussed CSS Scroll Snapping so often that I felt like I should build a CSS-only carousel based on it. Here are a few th...
There are lots of examples I would search and find* one you like. (more modern ones use modern css too)
awesome, didn't know u could interact using just css (aside from buttons and links)
or these use anchors I think
I see thats interesting
cool thing about that is url === best state
so you could share the url with #anchor tag in it and it would be on that slide 🤔 thats actually dope af
its kinda going ham by itself out of focus though 😂 so yea maybe learn from this, wouldn't copy it.
yeah I think this one does that? https://codepen.io/skillthrive/pen/jOzVLGR