The SEO Advantages of Machine-Readable HTML5 Semantic Markup
Semantic HTML5 provides us with an opportunity to improve our websites and optimize for search engines. We can take full advantage of these opportunities by using machine-readable semantic HTML5 elements to describe page outlines. Specially-named containers can help search engines and browsers more easily identify how our pages are arranged. For example, is its […]
Semantic HTML5 provides us with an opportunity to improve our websites and optimize for search engines. We can take full advantage of these opportunities by using machine-readable semantic HTML5 elements to describe page outlines. Specially-named containers can help search engines and browsers more easily identify how our pages are arranged.
For example, , and so on. You have the ability to describe your page outline using these terms. By the way, it’s important not confuse ). These also have semantic rules we should follow; specifically about their relative level, as you’ll see below.
Here’s a look at the SEO opportunities with HTML5 elements and how and why to use them.
Genuine Articles
Perhaps the most important semantic HTML5 element is . This can be used in such a way that your ideal content gets parsed into screen readers and reader views, and search engines will find a hard-coded signal for unique content on the page. You can test to see how this works with a page loaded in your browser by toggling the reader view.
If you don’t see your toggle switch or there is no container in page code, you don’t get the option at all or it won’t load anything separately. If you get content in the reader view, it will be that content which the webmaster wrapped in a single container. As developers we get to style these containers with direct specificity.
Multiple Articles
Although it’s not syntactically incorrect to have more than one element per page, it’s still not a good idea. You don’t get reader view options this way, and there are no search engine benefits either. For blog homepages that list posts, you may think of each blog post as an “article,” except that an excerpt of an article is not the real thing.
Instead, try using the semantically correct element for each post summary where related details are gathered. can correctly nest as a child of in this case. The parent-child relationship between and can be reversed, but we wouldn’t recommend it unless circumstances make that logical.
Let a single wrap a page’s unique content:
Skip NavigationSEO for Developers by Detlef Johnson
Semantic HTML5
We're doing HTML5 semantic elements ...
Technical Debt
Technical debt is aging code in the codebase that looks to be no fun to replace or refactor away. The most common technical debt takes the form of un-insightful variable names and database column names.
SEO practitioners often dispense advice reactive to their own painful embedded technical debt. Implementing semantic HTML5 may be a bit like that.
If you’re using a modern framework with a templating language like JSX, and everything is a
,,,,,,, can seem daunting, depending how early in the process you are. The longer you wait the more that technical debt compounds.Semantic Details
Many of us prefer skipping what we initially think are smaller details for a process of writing code that is going to work, especially when under deadlines. We use what operations we have in place to publish websites and apps with minimal effort in order to be productive. We use frameworks, task runners, and tooling to great effectiveness. We’re constantly eyeing shiny new things to learn.
We also know that unaddressed details can immensely compound technical debt down the road. In the long run, you don’t want all your elements named after the same
elements. Your code will become less and less recognizable over time. Organize your code into logical elements. Use the elements HTML5 provides out of the box.Semantic SEO Outline
In SEO we’ve long known about headings, particularly the top-level
heading. What makes them special is the meaning they convey about document and section outlines. Start your document outline with elements,, and perhaps one or twocontainers (one per link grouping). Then you’ll likely want to useto wrap unique content with, headings, and perhaps its own.SEO for Developers by Detlef Johnson We're doing HTML5 semantic elements ... Articles and Sections
Article and Section elements should have at least one heading ... Headings
Headings provide 6 levels for organizing content ...
Each
ought to have at least one heading; probably more. Your headings will outline what makes the best sense in descending order of levels fromthrough to content with heading. Think of them as you would bullets and outline levels. It’s rare that you’ll actually use all 6 levels, but they’ll be at your disposal when you want them.SEO the Semantics
You’ll hear advice from the SEO community that there should always only be one
element per page, all on its own. That’s solid advice. Think of it as the whole page heading. However, it’s definitely not wrong to have more than one — it depends on your document outline. You may elect to bump up the top heading in aor, or you may show differentcontent between desktop and mobile.Use Headings
Each
should definitely have a heading, perhaps beginning with level two (), and descending from there, depending on the content for that section. Use your best judgement and get hints from the W3C validation service. This can warn you when you’re missingheadings. Each section can have its ownand, which makes sense when you think about it.Webmaster Tip: Encode an admin-only set of quick links in a site-wide header or footer, and insert the canonical page spelling for the name value pair so you can click and check page validation more quickly than with other tools like bookmarks.
Taking Aside
As for
, it’s been suggested that these containers are suitable for related content that is not part of the unique content identified by, like an advertising block. These can still be unique to the page, of course. Thewill nest nicely inorand can stand on its own, as well. Thecontainer can also have headings, and— it’s totally up to you.Footer Wrapper
That should be enough information to get you started. When you’re ready to wrap up your HTML5 semantic markup, you can use the
element for the page footer with its site-wide links in one or moreelements. Most of these Semantic HTML5 elements are treated as block elements by default unless otherwise noted.Support even the oldest browsers with the following sample polyfill:
Takeaway: Be Descriptive
The most important thing to look for when you’re otherwise using a semantically sensible
New on Search Engine Land
About The Author
Detlef Johnson is the SEO for Developers Expert for Search Engine Land and SMX. He is also a member of the programming team for SMX events and writes the SEO for Developers series on Search Engine Land. Detlef is one of the original group of pioneering webmasters who established the professional SEO field more than 25 years ago. Since then he has worked for major search engine technology providers such as PositionTech, managed programming and marketing teams for Chicago Tribune, and advised numerous entities including several Fortune companies. Detlef lends a strong understanding of Technical SEO and a passion for Web development to company reports and special freelance services.
