Search code examples
htmlseosemantic-markup

HTML5 semantic tag usage, will search engines respect large wrapping?

I was planning to use the <nav> tag for a few things, however, the following occurred to me.

Take the following markup for example:

<nav id="sidebar">

<div class="links">
<a href="/"></a>
<a href="/"></a>
<a href="/"></a>
</div>


<div class="links">
<a href="/"></a>
<a href="/"></a>
</div>


<div class="links">
<a href="/"></a>
</div>

<div class="statement">
random content here, unrelated to navigation
</div>

<div class="randomstuff">
unrelated to navigation, but still here
</div>

</nav>

Will search engines respect this sort of usage of semantic tags? By that I mean, "ignore" or lower the priority on all content that's wrapped with a nav tag(even divs and such), even if not directly, or even necessarily all navigational content.

Same question for header and footer tags with divs inside.

Thank you in advance for any assistance.

Solution

  • You shouldn't include content in nav that is not about navigation. Not only the spec is very clear about it, it would harm accessibility, too.

    So your two div elements (.statement and .randomstuff) need to get out of the nav element. Only if they'd be "tangentially related" to the content in nav, you could put the two elements in an aside element inside ofnav, but I don't think this is the case for your content.

    May I ask what HTML5 tag you'd recommend for general page content that is included on each page but isn't navigation? Serving the same purpose as header, footer, and nav, deterring inclusion in results since it's general and on each page.

    There is no general answer; it depends on your content which element should be used.

    You create the overall structure (the document outline) by using the sectioning elements (section, article, nav, aside) and headings. Now each section (not to be confused with section element!) can have header/footer elements. That's it. Everything inside a section that is not included in header/footer can be considered the main content of that section. Finer grained elements like address or small can give additional clues which role their content plays.

    Now, if something (a search engine, a screenreader, an artifial intelligence, …) wants to consume your document, it might take advantage of your markup. If and to what extent this is the case depends on several factors, like use case, will, skill, costs, etc. So there is no general answer to "Do search engines …?", because a) there are countless search engines (and everyone can create a new one everyday) and b) some (especially the "big players" for general web search) don't like to talk in details about this stuff.

    But we can assume what would be useful for all those user-agents/consumers in respect to their use cases:

    • a screenreader might offer a function to only read the main content (ignoring nav, aside, footer, …)
    • a blog post search engine might score words inside article higher than inside nav/aside
    • a search engine might score words in header, footer, small and address higher for a navigational search query, and lower for a research query
    • a readibility add-on might try to find the main content by ignoring nav, footer and top-level aside elements
    • …

    HTML defines the meaning of all elements. If all HTML authors would respect this, we could build and use user-agents that make perfect use of the markup. In reality though, authors might (mis-)use nav to "devalue" boilerplate content ☺, which would force all consuming user-agents to forget about the special meaning of nav (because it might contain other, non-navigational content, that could be important for their use case).