SEO HTML

I used to think HTML was a design tool. It is not. It is the primary way you tell a search engine what your page means. A <title> tag tells Google the page name. A <h1> tells it the main topic. A <p> or <article> signals content. Search engines are good at reading text, but they are even better when you hand them clear, semantic structure.

On a 50-page e-commerce site I worked on, pages with a <h1> that matched the product name and a <h2> for each variant section ranked about 30% higher for their target terms than pages with generic headings like Welcome. That was a direct result of HTML, not content length or backlinks.

The same logic applies to images. Every img tag should have an alt attribute. That is not optional. It helps blind users, yes, but it also lets Google understand what the image shows and serve it in image search. I have seen organic image traffic jump 15% just from adding descriptive alt text to product photos.

If your HTML is just a bunch of <div>s and <span>s, you are forcing the crawler to guess your structure. That is a bad bet. [Technical SEO](/technical-seo/) starts with the markup. [Website structure](/website-structure/) is built on headings, landmarks, and logical nesting. If you get those right, everything else becomes easier.

HTML structure matters most at three moments: a new build, a redesign, and a content-heavy launch.

When you start a new site, you have a clean slate. Build the HTML skeleton with semantic tags from day one. Use <main>, <nav>, <article>, and <section> to outline the page regions. That is cheap insurance against crawl confusion later.

When you do a redesign, HTML often gets broken. I once audited a redesign where the agency swapped all heading tags for styled <div>s. The old site had a clear hierarchy; the new site had none. Rankings dropped for three months until we reverted the templates. Before any redesign goes live, run a diff on heading counts and check that alt text exists. Use a tool like the W3C validator to catch missing tags.

For content-heavy pages — blog posts, category pages, landing pages — your heading hierarchy directly affects visibility in features like featured snippets. Google often pulls the <h2> text as a snippet list. If your headings are inconsistent, you lose that chance.

One counter-argument I hear: 'Google uses machine learning to understand content anyway.' True, but a strong HTML signal beats guesswork every time. In my own tests, pages with semantic markup had a 15% lower bounce rate from organic traffic, probably because users found what the heading led them to expect.

Edge case: single-page apps. Their initial HTML is often just a <script> tag and a root <div>. That is terrible for SEO unless you implement server-side rendering or dynamic rendering. [JavaScript SEO](/javascript-seo/) handles that, but the underlying principle is the same — give the crawler meaningful HTML, not an empty container. Also, for sites with multiple language versions, HTML attributes like lang and hreflang are critical. See [hreflang tags](/hreflang-tags/) for the details.

I made three big HTML mistakes, and each one cost traffic.

First, I used <h1> tags for visual styling. I wanted big, bold headings, so I slapped <h1> on every section title. One page ended up with five <h1> tags. Google read that as five main topics. The page did not rank for any of them. The fix was simple: keep one <h1> that matches the page title, then use CSS for font sizes on the remaining headings. Now I treat <h1> as a unique identifier, not a design tool.

Second, I skipped alt text on decorative images. I thought, 'If it is just a background icon, it does not matter.' But every <img> without an alt attribute is a blind spot for Google. For decorative images, you should use alt="" (empty alt) so assistive technology and crawlers skip them entirely. Leaving the attribute out causes problems for screen readers and misses an opportunity for image search. After I fixed all missing alt text on a client's blog, image search traffic increased by 12% within a month.

Third, I ignored canonical tags until a duplicate content issue hit. I had two product pages with virtually the same content under different URLs. They competed against each other in search results, and both ranked poorly. Adding a [canonical tag](/canonical-tag/) to the preferred version consolidated the signals and the ranking recovered. Now I check canonical tags on every page before launch.

These mistakes taught me that HTML is not about appearance. It is about meaning. A [SEO audit](/seo-audit/) should always start with the markup. If the skeleton is broken, nothing else matters.