Epic #SEOisAEO series: Semantic HTML5, IA and Accessibility - so many missed opportunities
- Structural semantic HTML5 is simply changing divs to semantic tags. It's incredibly simple and incredibly effective
- What about tables, ol, ul, and headings, which have all come back into fashion because of SERP position zero?
- We're now looking at information architecture, which is really trendy at the moment
- That vocabulary reminds me of a knowledge graph. How close is that association?
- Accessibility for an answer engine world: for whom and in what environments?
- What tactics marketers can implement
- How far does WordPress go to actually covering accessibility?
- How does information architecture help get position 0?
- How does Accessibility help get position 0?
Jason Barnard: Welcome! Firstly, a nice new point on AEO from Grant Simmons, who was answering a question on Twitter from Jeannie Hill about #SEOisAEO Q: “Are we question engineers?” A: ”Question Engineering is about creating, delivering the best answer defined as best format, best delivery, best satisfying of user needs based on an understanding of their query intent in context. We're aspiring to be Google”. I think that's a great quote that is well worth a mention: "Semantic HTML5: not fashionable!".
Off we go with semantic HTML5. And it's really not fashionable. Clients tend to think it's boring, it's out of date, not interesting, or too simple… So it's not worth bothering about.
Structural semantic HTML5 is simply changing divs to semantic tags. It's incredibly simple and incredibly effective
Can you explain this example?
Simon Cox: The reason that developers traditionally use divs is because they moved from table layouts where they could do stuff to divs so that they could do layouts with CSS to actually control the layout of the page.
From a visual point of view, that was fantastic. But from other perspectives, it doesn't work at all.
HTML5 brings the ability to semantically describe areas of a web page. As you can see in the illustration, some obvious ones. Header, footer, nav (basic navigation).
The crux is the main part of the page that sits within the main tag as you can see there. The main really can tell assistive tools and crawlers where your main piece of content sits. Then within that, many pages have a single article tag. But some have multiple articles - a good example of that would be a blog listing.
There is an argument among the HTML5 glitterati that you can have h1s in each article when you have several. But I say you should have an h1 saying this is a list of articles and then they should all be h2s.
In each article, we can have sections. How many sections (if at all) depends upon your article: how long it is, and what it's got in it. If you split your article up with headings, h2s, h3s, etc., sections can be good to make bite-size chunks. That makes the content much more easy to understand from a crawler's point of view.
Then aside tags… Asides can be inside an article or outside an article, depending on how relevant they are to the article. If not directly relevant then an aside goes outside the article :)
Jason Barnard: That's really great! What I liked about that is that you're saying one h1 and the rest is h2s - no more arguing about it. I've been debating that question with myself for a couple of years now. You just made it simple for me, and I'm incredibly happy.
The other thing is that, whereas divs are design... sections, articles, navigation, footers, headers is all about semantics and all about the role each chunk of content plays in the page. In my experience, semantic HTML5 is incredibly powerful, incredibly useful, and very much underused. And, as you were saying, Simon, a missed opportunity.
What about tables, ol, ul, and headings, which have all come back into fashion because of SERP position zero?
The use of headings and the hierarchy that can give within a page is especially important. We often think about the hierarchy of a site, and we often fail to correctly look at the hierarchy of our page.
Simon Cox: It's incredibly simple, but so underutilized and misused. We've got h1 to h6, and they nest inside each other, so you have one h1, you can have then multiple h2s under that. And under each h2 you can have h3s. Under each h3, h4s, etc. I can't remember that last time I saw a site with an h5 and an h6...
Jason Barnard: Can I cut in there? I read an article on Yoast where he said if you're using h5s and h6s, you should create a new page.
Simon Cox: Yeah, you probably should, shouldn't you? (laughs) But truly important is that by using headings correctly, you are making things a lot easier for assistive technology to understand. And you have the possibility of actually getting a featured snippet if you've got decent headings with decent content underneath. And you will find featured snippets where Google has literally gone through the page and pulled out the headings as a list. And that's a really good argument for doing it and actually marking your content up correctly.
What we see most of the time, though, is headings being used because of the size they are, how visually they look. When you define a CSS class for h1s throughout the site with a specific size, people will keep applying that. And they don't think about the structure of the content; they think about the visual appeal of the site and how it looks. And that's a really difficult one to get away from.
Jason Barnard: Yeah. I agree 100%. I have so many clients who say, "Well, I'm not using the h2s because they're too big, so I'm using an h3,". But the solution is to change the CSS, because it should be an h2, and if it's not an h2, you're miscommunicating, and Google won't be able to pull out the information in manners such as those lists you talked about.
Worse. You're miscommunicating, creating problems for Google, and doing more harm than you are good. Would you agree?
Simon Cox: Absolutely. And to go back to tables and ordered lists, and unordered lists as well, tables dropped out of fashion very quickly when CSS came along because of table layouts etc., but they're actually brilliant for data. And that's where you should be putting them.
Jason Barnard: Indeed. You look at a table, it's a bit like MySQL or Excel. I mean, it's a presentation of data in a structured format, which is brilliant for Google.
Simon Cox: Agreed. The biggest problem we do have though as SEOs is when you work on a site, often from a template and the developers don't think about this stuff. Unfortunately, it's very, very difficult to go back and refactor HTML5. So, my biggest tip is to get in at the start of a project, set standards and say, "Right, everything's got to validate." That's not popular at all, especially amongst business people, because it's extra cost.
Jason Barnard: Yeah. Dave was saying last week that looking at Schema markup when you're planning the site is incredibly important and often undervalued. And here we're saying the same thing for HTML5. Get it right from the start. Thank you, Simon. That was brill.
Information architecture: fashionable (not always clear what it is though).
We're now looking at information architecture, which is really trendy at the moment
Here’s a quote from Rand Fishkin.
I think that's brilliant, but it isn’t 100% clear to me. What I understand is IA is all about engagement. Answer Engine Optimization is increasingly about engagement too. Is this an incredibly happy marriage, Jono?
Jono Alderson: I think so. Ask ourselves, what is IA? It's one of those very big broad terms that means nothing and everything at the same time. My best stab at explaining it: it's the stage that happens before design. It's when you know that you've got a set of objectives and you're going to build a website or an app or print something to achieve those objectives. You are asking "Okay, what does this need to have? How do those things need to work? What's the relative priority of the pieces?" All that happens before you start coloring things in and writing text. And that is very much the planning stage where you define what the thing is, not how the thing looks.
That is very much about planning to make sure that you build something that's inherently engaging. I think one of the reasons it's come back into fashion is that historically there's been a lot of friction between SEO and information architecture. I've certainly been through lots of meetings where the SEO guys have said, "We need lots of text on the page because Google likes lots of text," and the information architecture guys have said, "No, we need big hero images to display the brand message and to tell people where they are." And those two things didn't really fit very well together. Similarly, the SEO guys might say, "We need really meaningful button labels so that people can understand exactly where they're clicking through to," whereas the information architecture guys might say "Well, no, for the sake of consistency, we need to say Read More on every button." And neither of those scenarios are really good. Add to that the CRO guys saying, "We need to remove all that long text because it decreases conversion rate".So there's all this conflict between these disciplines.
Increasingly, it's all the same thing. We have a set of people with different skills and different focuses, who are ultimately trying to make better web pages. Users want good, fast pages with a sensible amount of text that describes the thing they want and feels good as they use it. And Google is getting smart enough to understand. So now, all those disciplines can now work towards the same goals. And IA is the planning and bringing together of all those people and all those objectives to make sure that what you're doing is gonna achieve all those goals. And as Simon says, you have to do that right at the beginning. You can't design the thing and then try and get it right from an IA perspective. You can't write the stuff and then try and get the framework right to house it. It's all gonna be part of the very initial planning process.
Jono Alderson: I think one of the reasons that doesn't happen very often is that people tend to build things, websites, that reflect their internal business structures. So, if I'm a fashion brand, I have men's clothes which divides into trousers and then jeans and then sizes, etc., because, in the physical world, that's how I need to store and organize my stock. Businesses need a system that allows them to navigate their analog system. So, when people search for a specific thing on the internet or visit a website, why are you making them go through that same process? We have an opportunity to design and architect something that's a much better fit for the way that users behave. So, you could develop systems of navigation that allow them to find and get to things exactly how they want.
For example, horizontal classification becomes possible. "Show me all the things which are blue". From an IA perspective is exactly the same level of complexity as "show me all the things which are jeans." So, suddenly you can untie yourself from the constraints of the real world and your physical business, and start considering, "How do I structure my site and my pages and my content and my functionality in a way that allows our audiences to find what they need in an appropriate manner for them.”
There's a really big realization that you don't need to build a big hierarchical website with a homepage and a big navigation and all your products categorized. You can start from scratch. You can say, "How do I get all the stakeholders working together to meet consumer goals?" So, I think it's a wonderful marriage, and it's only gonna get closer. And the people who succeed will be those who really meld SEO, Information Architecture, conversion rate optimization, accessibility, into one holistic discipline.
Jason Barnard: Yeah. Sure. Great. That was brilliant. I was incredibly confused and now I've got a good idea of what IA is. In short: IA and AEO is a marriage made in heaven. I also love the idea that, and I have this problem with my clients, they present things from their point of view. And I find myself telling them, “you need to look at the point of view of your users and your potential clients, and present it from their point of view.” And that's something that's coming, I think. But it's pretty difficult. It's tough going.
Jono Alderson: Everybody builds their website the wrong way up. They assume that people enter the homepage, get a nice brand message, and then navigate down and through, but the rise of search engines and social media platforms has turned that inside out. People arrive five levels deep on a product page or an information page, so when you're doing your IA phase and your planning phase, you need to understand that people need to be able to navigate up and through as easily as down. People are random and unpredictable. And your IA needs to encompass that.
Jason Barnard: That's a really great answer. Thank you very much. The next one is a bit trickier I think.
That vocabulary reminds me of a knowledge graph. How close is that association?
Am I a bit obsessed with knowledge graphs, or is there an association there?
Jono Alderson: No, you're spot on. On a bog-standard out-of-the-box WordPress site, for example, just look at categories and tags - they're mechanisms for sorting and organizing your content. Categories are vertical, let’s say clothes. Tags are horizontal, let’s say colors. Many websites hire an intern to categorize all their content and they make a mess. So they end up with a blog post about something nice with 30 different tags, each of which will only be used once. Just imagine that as a filing cabinet or a database, it just doesn't make sense. What we're trying to achieve is some kind of system which allows us to connect things in a meaningful way, and to presumably allow end users to navigate through those. Perhaps asking “show me the cheapest thing by color”, or “the best thing by category”. Unfortunately, businesses often use categories to reflect kind of their internal structure and that often doesn’t make sense to users. So when you're going through the IA pre-design phase, not only do you need to think how are these pages structured and where do the things live, you need to look at attributes and properties. For example, a promotion. What is a promotion? What properties does it have? What attributes does it have? Does it need to connect to other entities in a meaningful way on the front end and the back end of the database? Plus, you need to design the Schema of these things. And yes, very quickly, you're designing graphs of things.
Jason Barnard: Okay. I really like the idea of attributes, properties, and links between entities. Incredible stuff. I know that Gennaro from last week would've been incredibly keen to have chatted with you about that, so thank you.
Now. Accessibility. Kim. For me, this is anti-fashion fashionable. So we had the unfashionable, the fashionable, now we're anti-fashion. Accessibility is all about how we deliver content to people. How content accessible. In episode 3, Kim gave me new insights into accessibility. I was thinking about alt tags, very simplistic stuff for sight-impaired people, and she made the point that accessibility is about how you access the data or the information on the page. And is a question for every single user. That's incredibly important.
Accessibility for an answer engine world: for whom and in what environments?
Kim Krause Berg: The way we view accessibility is outdated. We tend to think that it's for blind or deaf who needed assistive technology like JAWS. But that is dated - 15 years old. Today, we refer to it as assistive and inclusive. Accessibility includes billions of people around the world, beginning with sight impaired, but also people who forget their glasses… but it's also the mental or emotional state. If you are using assistive technology through voice, maybe you are upset? Or intoxicated? Or medicated? Or simply easily distracted by the zippy sliders, pop-ups and other intrusive things that sites throw at us.
Remember that sometimes a disability is temporary. You might have a temporary injury to your hand, which means that you can't use your mouse or the keyboard. We often forget that accessibility includes temporary disabilities, but also a vast number of older people, and that is something that I think SEOs, content writers and developers don't always consider.
SEOs write for search engines with so many words per page. But that can really mess with people who have short attention spans, or memory or cognitive issues… those are all things that you need to consider during the design phase.
Add to that - the computer device and the technology that we use… in short, the environment is HUGE. As Simon and Jono said, ideally, marketers need to be in at the first discussion on a website - alongside the developers, the designers, the stakeholders, the content writers. Everyone should help flesh out who we're writing and building for… and the devices that information is gonna be accessed with.
Jason Barnard: Brilliant. I loved that. One thing that did stand out, was assistive and inclusive. That really says itYou've really brought a broader view of what accessibility is for me, and I'm very grateful for that. I now think it's incredibly important that we all look at the idea of accessibility, not only from the point of somebody who's handicapped or somebody who's sight impaired but for all of us, on all the multitude of different devices. The conclusion here is that semantic HTML5, Information Architecture, and Accessibility need to be integrated right at the start of the development process. Definitely a bad idea to try to shoehorn it in during the life of the site. Brilliant stuff.
What tactics can marketers implement to serve the needs in situations you just mentioned?
Kim Krause Berg: Education is key. The more a marketer knows about accessibility, the better they are able to contribute. Importantly, marketers can do accessibility testing. Even if they don't know how to implement the code, they can get an idea of what accessibility is all about. Most marketers, when approached with the idea of accessibility simply don't understand. Education is definitely the most important thing because accessibility is definitely a big thing.
Jason Barnard: Yeah, and I love that. Just saying to a developer, "make this accessible," doesn't make any sense. As a marketer, you need to understand what it is you're trying to make accessible, where you're trying to make it accessible, and to whom you're trying to make it accessible. Do your testing, figure it out, then go to the developers and say, "This is what we need to do for these different devices for these different people in their different environments."
Quick question for Jono, how far does WordPress go to actually covering accessibility?
Jono Alderson: It depends very much on the theme you're using, and if most people are using off-the-shelf themes that cost them maybe $20, the reason they're often $20 is they don't have a huge amount of depth to them. There are some plugins you can use to kind of paper over some of the cracks, but again this is a scenario where you really need to bake it in from the ground up.
And those are difficult questions, right? It's not, "Is it accessible? Cross or tick," it's, "Of all the possible audiences accessing it on any possible device with any possible set of needs, have we considered that?" And so we're doing a whole load of work on yoast.com at the moment looking at color contrast ratios, for example. And we're still not there yet. There are a million little things we need to do, and it's not a binary thing. So, even if it's reasonable out the box, pay a lot of attention to how much work your theme author has put into accessibility. And again, a $20 theme is never gonna be great.
Kim Krause Berg: And, if I could give one tip. Something that I see companies do all the time is copy what their competitors are doing. And I'm always saying to my clients, "They're not doing it right. So if you're copying them, you're also doing it wrong." So, education… plus truly understanding who your target market is. And I believe that's a really big part of the marketer's job.
Jason Barnard: Yeah, no, I love that point. Education is a brilliant, brilliant word to be using because it is all about that. It's educating our marketers, it's educating the developers, it's educating our clients, it’s educating our teams. Brilliant, brilliant stuff. I'm terribly keen on this one. And like the last episode, I'm gonna have to watch it all back again to actually try and get all this in my brain.
Simon Cox: I've had a lot of trouble in the past trying to persuade departments, businesses, to actually implement accessibility. They're just not interested. So one of the techniques I've used to really encourage them is to point out what the biggest blind user of their websites is. And that's Google. They get very interested then.
Jason Barnard: Brilliant one. Yeah, great. I love that. I'll do that next time I'm with a client. Right, the last furlong is position zero profile. It started off in the second episode. We have these five points.
This is gonna be interesting. Simon, HTML5, and position 0.
How does HTML5 help get position 0?
Simon Cox: Well, if you don't mark up your content correctly, I can pretty much guarantee you will not be in position zero.
Jason Barnard: So, next up, Jono. Great stuff.
How does information architecture help get position 0?
Jono Alderson: There's a big change coming to the core WordPress editor. It's called Gutenberg, and it changes the way that content is written and structured within your site. The big impact of this is that at the moment everything is about pages. I have a web page which might appear as a result in Google in position zero. In the world of Gutenberg, everything is blocks. So a paragraph is a block, a recipe is a block, a list within that recipe is a block of blocks.
Suddenly, we live in a world where Google can extract bits of pages, and all my position zero stuff suddenly becomes block-based. And it's not about who has the best page with the best markup, it's about who has the best blocks.
Jason Barnard: I really like the idea of Gutenberg, because instead of looking at pages, we look at blocks within pages, and pages become blocks within the website. Absolutely perfect. And that next one, last question on position zero is Kim, accessibility and position zero.
How does Accessibility help get position 0?
Kim Krause Berg: My biggest thing is to research where, what, why, when, and how people ask questions. And that includes the devices that they use, where they are, their environment, and what accessibility is. If a marketer has access to information, they can act as a scout and warn developers and writers “We're not gonna reach this person, or this target market, or this country, or the person using this device”. Further, whether looking at typed questions or spoken questions to Alexa or Hey Google, figure out what kind of questions does a special needs person ask? What terms do they use? I think to myself, "Okay, hardware store closest to me." Well, that's for somebody who can see and hear and walk. How often do people ask "Where is the hardware store that has handicapped parking”, or other accessibility-specific attributes near me?
Jason Barnard: Thank you. That was absolutely wonderful. My takeaway from those answers is it is all a question of presenting information to Google so it can understand and use it. So you need the HTML5, you need the IA, and you also need to communicate all these attributes.
Jason Barnard: Thank you, everybody. That was absolutely brilliant I'm gonna watch it again later on this afternoon, try and get all of that information in my head. Thank you, Jono, thank you, Kim, thank you, Simon, and thank you, Anton. Wonderful. Please don't forget that next Tuesday we've got another episode. How to help Google and Amazon make sense of a chaotic, unstructured web with Martha Aaron and Arnout - three stunningly good experts, just like the three experts we had today. We'll see you next Tuesday. Thank you.
This is the 5th episode of Epic Series by Jason.