Planning HTML for SEO

Planning HTML for SEO

HTML. SEO. You’ll see those abbreviations a lot in this blog post — but don’t worry, our explanation isn’t too abbreviated. We’re here to simplify and explain!

One of the cornerstones of web development, HTML is the standard language used to create web pages and apps. It’s also one of the first languages people usually learn in the world of programming.

The latest version of the language, known as HTML5, is the foundation of an essential online marketing tool — search engine optimization (SEO).

Using HTML5 effectively is vital to SEO efforts, and there are specific things you can do with your website HTML to give your site a better chance of ranking higher in search engine results.

First, let’s take a look at HTML’s role as it relates to search.

How Search Engines Interact With HTML

Put simply, search engines take a look at your website’s HTML to figure out what your site is all about.

Search engines learn different things from different HTML tags, using a clear hierarchy that’s similar to that of a book. It starts with your title — which is most important, because it’s the first thing a reader (or the search engines) can see. Next is the meta description, which is like the inside or back of a book jacket cover where you find a brief summary.

And so it goes. Which is why it’s crucial that you cover all of the important meta tags, such as:

  • Meta Title
  • Meta Description
  • Header Tags
  • Structured Data

So now that we know this, let’s take a closer look at how a web page needs to utilize these tags and other elements.

How to Organize Your Web Page in HTML5

Understanding the importance of the tags makes it easier to plan out your web page with HTML — and search — in mind.

You want to include the most relevant content that you want to rank for in the title. Whether it’s “5-minute cooking recipes” or “programming languages made easy,” your title needs to be eye-catching and engaging for search engine “spiders” crawling the web AND for online users as well. Of course, it’s best to use your most important keywords in the title.

Next, your meta description should expand on the title much more, while maintaining focus on the main subject.

You can better optimize your pages by dividing them into sections — for example, with a header, a footer, navigation, and article. Use those specific meta tags for each section to fully develop each web page.

About Semantic Elements

One of the great benefits of HTML5 is that you can use semantic elements — which clearly describe their meaning to both the online browser and the developer — to better define each page’s content and its different sections, as well as make your page easier to navigate.

Examples of semantic elements include: article, form, table, header, main, footer, etc. These quite clearly define the content. (Note that HTML5 semantic elements are supported in all modern web browsers.)

These kinds of semantic elements (and there are some new ones in HTML5) can be effective in optimizing your page for search engines. The more elements you use, the more readily the search “bots” will recognize, understand, and index your content.

How Code Authority is Using Semantics in HTML5

Recently, Code Authority’s team was developing a site for HTML5. While they were optimizing it, they found some opportunities to use semantic functions. When optimizing a web page, Code Authority targeted different keywords for each section of a page.

"We gave each section its own keywords in their h1 and h2 to better tie into our overall SEO Goals.", says John, Code Authority's SEO Analyst.

"Not only did it allow us to make better use of our tail-end keywords but it made optimizing the layout a lot easier for on-the-fly content changes should we wish to change anything in the future."

The bottom line? If you have a website, you owe it to yourself — find out how you can take advantage of semantic functions in HTML5 to improve your search ranking. Contact us today!