Write Proper CSS: Headings and SEO
This is one in a series of byte-sized tips and tricks for upping your CSS game.
In an era of frameworks, compilers, component libraries, and data-binding, most who call themselves front-end developers are making less and less time to hone their CSS skills and architecture their CSS properly. The role of CSS in shaping user experience and application flow is undeniable, yet so many client-side developers appear unwilling to touch CSS with a ten-foot pole, viewing it as a black box better relegated to “Design” or else hacking away at it piecemeal and only where necessary.
I’ve seen the same attitude affect 99.9% of my students and peers, and, to me, it smacks of the I-couldn’t-learn-coding-because-I-was-never-great-at-math-in-high-school illusion. You don’t need to be a web developer to write well-architected CSS (and designers shouldn’t be worried about code architecture), and as a front-end developer, it’s a professional responsibility to fill that gap.
One step at a time, I aim to break down those walls.
Headings and SEO
Take a look at the image below. It’s a pretty standard hero section of a site; a custom header put together in a CodePen (linked further down). All I want you to look at is the heading text in the center. Think about how you would architect that text using HTML.
Done? If your thoughts was something like:
<h2>Be a Part of Something</h2>
<h1>Bigger</h1>then you are among the many developers with similar instincts, including hundreds of my own students.
Certainly, this would work, and with the right CSS styling you could easily arrive at the same header as seen in that image. But it is incorrect.
“Be a Part of Something Bigger” is a statement which clearly occupies a supremely important role on the page. Presumably, it’s the business’ primary slogan or call-to-action. It’s the first thing the business-owners want users to see when visiting their site.
The H1 tag is an extremely important tag for Search Engine Optimization and for the profiling and classification of your site by search engines. The H1 is very heavily weighted and goes a long way towards determining how your page is understood and where it is placed by a given search engine. In fact, lots of digital marketing specialists even recommend using ONLY ONE H1 tag on a given page, for the purposes of focusing and clarifying that page’s SEO strategy (how many of you are guilty of multiple H1s on a given page? I know I am!).
So where am I going with this? To put it simply, by following the architecture above, using an H2 and an H1, your site’s primary message would be profiled as “Bigger.” Compare that with what we should intuitively want our site’s primary message to be: “Be a Part of Something Bigger.”
That’s a massive difference in message, even if the precise value/product of the site isn’t really in play here.
The solution, for aligning message, content, title, and style?
<h1>
<span class="heading-primary-sub">Be a Part of Something</span>
<span class="heading-primary-main">Bigger</span>
</h1>It’s as simple as that. Two distinctly styled spans inside an H1 tag. It’s a straightforward and not-inelegant solution at which shockingly few of my students, or developers to whom I pose the same question, organically arrive.
TLDR: No matter how visually-divided your site’s primary slogan/heading/title/CTA is, wrap the entire message in the page’s only H1 tag.
View the CodePen (and follow for more):
Evan is an illustrator, developer, designer, and animator who tells stories in any which way he can. When he’s not branding businesses or building front-end apps; he’s illustrating children’s books, painting for tabletop games, animating commercials, or developing passion projects of his own.
