Designers love splitting hero headlines across two lines with different styles---a bold top line and a lighter italic bottom line. It looks great. But when developers reach for <h1> and <h2> to achieve that visual difference, they create an SEO problem that most people never notice.
The Problem
HTML heading tags aren't visual tools---they're semantic markers that tell search engines how your content is structured. When Google encounters an <h1>, it treats it as the primary topic of the page. When it sees an <h2>, it treats it as a subsection under that topic.
So when your markup looks like this:
<h1>Good SEO Is</h1> <h2>Just Good Work.</h2>
Google reads that as two separate ideas:
- Page topic: "Good SEO Is" (an incomplete thought)
- Subsection: "Just Good Work." (a separate, disconnected fragment)
Neither fragment makes sense on its own, and neither communicates the full message to search engines. You've taken one strong headline and turned it into two weak signals.
Why It Matters More Than You Think
The H1 is one of the strongest on-page SEO signals you have. Google uses it to understand what your page is about. It influences how your page appears in search results, what queries it ranks for, and how it gets categorized. Your title tag works alongside your H1 to send Google clear signals about your page's topic.
When you split it, three things go wrong:
Your H1 becomes meaningless
An incomplete sentence as your page's primary heading gives Google nothing useful to index.
Your H2 is wasted on decoration
H2 tags should introduce actual content sections. Using one just to finish a visual headline wastes a valuable signal.
Your heading hierarchy breaks
Every subsequent H2 on the page now competes with your decorative one, confusing the document outline.
The Fix: One H1, Styled with Spans
You can achieve the exact same visual result with proper semantics. Keep everything inside a single <h1> and use <span> elements for visual styling:
<h1> <span className="bold-style"> Good SEO Is </span> <span className="italic-style"> Just Good Work. </span> </h1>
Now Google sees one complete, meaningful headline: "Good SEO Is Just Good Work." The visual styling is preserved with CSS classes on the spans. Two lines visually, one heading semantically.
The Rule of Thumb
Heading tags (h1--h6) define document structure. <span>, <em>, and <strong> define inline styling and emphasis. If your reason for using two heading levels is purely visual, you're using the wrong tool.
Quick Checklist
- ✓One
<h1>per page containing your full headline - ✓Use
<span>withdisplay: blockfor line breaks within the H1 - ✓Reserve
<h2>for actual content sections below the hero - ✓Your H1 should read as a complete, meaningful sentence when stripped of all styling
We Fixed Ours Too
We caught this on our own homepage. Our hero headline was split across an H1 and H2 for visual effect. We consolidated it into a single H1 with styled spans---same look, correct semantics, stronger SEO signal. It took five minutes.
Check your own site. View source on your homepage and look at the hero section. If your headline is split across multiple heading tags for visual reasons, fix it. It's one of the easiest SEO wins you'll find. Another easy win most sites overlook? Fixing your internal links.