by Danny DonovanThe line between web design and programming on the one hand and search engine optimization on the other has always been implicitly there. Arguably, it’s never been more explicit, now that Google is considering mobile responsiveness as part of its ranking algorithm. However, not all web developers have caught on — and neither have SEO professionals. All too many times, SEOs with little or no knowledge of HTML are bewildered when their sites aren’t ranking as well as they should be. Often, the problem is that search engines don’t know what the site is even about. Content in and of itself can only convey so much information. The other half takes place behind the scenes in the form of semantic markup.
What exactly is semantic markup? Simply put, it’s a particular way of writing HTML:
Semantics + Markup = Semantic Markup
Semantic markup has been around for a while, but it’s seldom utilized to its maximum potential. Why is this? Because there is typically a disconnect between presentation (i.e. web development) and content (i.e. search engine optimization). SEOs are concerned with what a piece of content says, while the designers and coders are more concerned with how the content looks and behaves.
For the most part, non-semantic HTML tags look exactly the same as their semantic counterparts. The following are some examples of non-semantic elements:
The majority of a web document can probably be written using these two tags alone. The problem is that they organize but don’t convey meaning, i.e. they tell the web browser nothing about what the content contained within them actually is. By contrast, the following tags will organize efficiently while giving meaning to the markup at the same time:
With this kind of semantic markup, the header, footer, and main body of the document are well-defined and laid out. The <nav> tag will also delineate navigational elements such as menus and pagination. <article> will communicate that the page is a blog post or news article rather than an ordinary web page, while the <section> tags will do the job of dividing this article into logically related sections.
If it looks and feels the same as ordinary HTML, why should developers concern their selves with semantically marking up their documents? There are a number of reasons.
First and foremost, semantic design is a W3C standard. If for no other reason, it should be conformed to simply because it is the preference among all web browsers, IT companies, and search engines. It’s also considered best practice because it improves workflow among developers themselves. If one developer is handed a page that has been semantically marked up by another developer, they will get a better sense of the functionality of the whole document and its individual components.
In certain cases, semantic elements actually do look and feel different. It is more convenient for screen readers and browsers when content is semantically structured. This way, they spend less time trying to distinguish one <div> element from another. Another case in point is rich snippets, which can actually be viewed in search engine results and have been shown to increase click-through rates.
Lastly, semantics are integral to SEO. The proof of this is the SEO obsession with keywords. Keywords signal to search engines that a site’s content is relevant to a given search query. However, this only goes so far. For instance, marking up a blog post with the semantic <article> tag lets the search engine crawlers know that this web page contains editorial content. Thus, for example, a blog post can rank not only for “graphic design,” but also for more long-tail searches such as “articles about graphic design.”
In any case, semantics let all concerned parties — from other developers to search engines to the users their selves — know that the developer knew what he/she was doing at the time they wrote the code. It’s exactly like correctly formatting a research paper: the contents of the paper only mean so much. Without the correct formatting, citations, etc., it has not met its fullest potential.
Make your business vision a reality by giving your brand the competitive edge it needs with our branding and strategy consulting services. Our blend of creative skill and marketing experience is specifically tailored to help businesses define, refine, and elevate their brand identity. Through in-depth market analysis, consumer research, and creative brainstorming sessions, our team of expert consultants collaborate closely with clients to develop brand narratives and strategic positioning that resonate with their target audiences.
