How not to write for search engine optimization. Good blog post, more Q's

Publishing help SEO
1

Jeff Cardello over at the Webflow blog wrote a good article “How not to write for search engine optimization”, which I thought was worth bringing to the forum as it brought up a few questions; specifically, H1’s.

Jeff says generally only use one H1 tag per page, but what about a longer page with multiple sections. Is it appropriate to use an H1 tag per section?

What about an H1 with a H3 subheading? Or using H4 and H5 for smaller bullet points?

Should a heading ever NOT be an H tag? Just a a regular paragraph element? I’ve always looked at H tags like they exist first for people, and second for search engines. In other words, they exist to organize content structured for easy reading by people.

What are your thoughts?

1 Like
2

That’s not what HTML5 has been built for. Any piece representing a full content has a H1 with HTML5. You have a collection list full of teasers of articles? H1 for everyone.

Think about the items you’d want to see listed in a RSS feed: they’re all <articles> and they each have an H1. How you treat them visually to present a clear hierarchy of content is disconnected from the HTML tag structure.

This isn’t meant for SEO but for accessibility.

edit: That said, I love this article from Jeff Cardello. I love the tone of course, and everything he says is true, designers have to put the effort to produce a clean and optimized structure and copy. The h1 opinion I don’t share is a very tiny part of the article and I’m sure we can have a discussion with Jeff about it :smiley:

Here is, a simple—I hope—explanation of my point:

http://vincent.polenordstudio.fr/snap/e2vpp.jpg

1 Like
3

I think this article can help you!!
https://www.hobo-web.co.uk/headers/

4
5

TL:DR : Heading tags have some influence on pages when it comes to ranking in Google in 2018. If you are a desgner and don’t know what you are doing, or want to approach this simply, stick to one H1 on the page, and make the rest of the text headings ‘H2’.

This is beyond my understanding. I spent (and continue to spend) countless hours reading about HTML5. Not only reading but testing, building, confronting, asking experts what was the right way to build a structure with HTML5. And there are, on some points, some disagreements, different way to interpret things (but less and less, some tenacious ideas are debunked one after another, it seems.)

Advising designers to “stick with one H1 per page” is unefficient. Why but why? How to use H1 in HTML5 is extremely easy to understand, and using H2 where you should use H1 is counter productive. Of course we’ll use only one H1 for a page that has 1 content. But using H2s for titles of a list of other contents, in the same page, isn’t logical. It’s not semantical, those titles aren’t siblings of the H2s of the main piece of content, the article. They are h1 title of their own content.

It’s so easy, and it is SO NOT (originally) about SEO! It’s writing code that makes sense, and making sense is respecting accessibility.

1 Like
6

The html5 document is just a text document and all the tags should be used for what they are designed for. I think we sometimes try to hard to please the search engines and try to find ways to be at the top. It all usually comes down to if content is relative to that person. So content I most important. But of course we need to use the right tags for the right content.

Heres a good list of html5 tags and what they are for:

2 Likes
7

Tl;dr You can visually style your page structure like you want, but with HTML5 you don’t get to fiddle with your tags structure. Rules are rules and they’re simple.

H are for headings so any heading must be an H. No exception. Once again, it’s about accessibility, how pages appear with no style, how page appears with no screen, how page behave when navigated without a pointer device.

And accessibility is not meant—only—for people with a handicap. It’s meant for allowing anyone and anyTHING to access and read your content. Any technology, any machine, modern or ancient. Also, building accessible code is healthy for everything else, including SEO. It’s good for performances, robots, maintenance…

Why would we do that? h2 comes after h1, 3 after 2 etc. No reason to skip a level. No reason to consider that because a heading FEELS LIKE that other heading on another place of the page which is a h5, but is after a h2… No, you’ll still make it a h3, but you are completely free to VISUALLY STYLE it like that other h5 down the page. Once again, graphic design is disconnected from structure of content. A page can tell 2 stories.

Not sure what you mean here. H4 and 5 aren’t “small”, they’re just down the hierarchy. Use them when you should use them. If it means having a title for list items that are inside of h4 sections, then yes, bullet points TITLES will be h5. But not the bullet point itself, that’s a <li>and only a <li>(well you can put a p in it.)

They exist for accessibility, now. For most of the people, how you style them will still be more important. For robots/search engines, they’re less and less important. What’s important now is how your whole content design is achieved. We chase Google’s position zero nowadays, trying to make it clear for Google what’s an answer to a popular request. Information has to be precisely structured. Read @jmw post How to structure your Webflow CMS Collections | Webflow Blog, it’s gold with diamond sparkles. (And it will lead you to schema.org)

3 Likes
8

I wrote this with the help of @jmw, same topic but in the Webflow context https://webflow.com/blog/html5-semantic-elements-and-webflow-the-essential-guide. There’s a second part which enters into the details of the structure, with a practical ideal HTML5 page, but it’s still not finished.

3 Likes