Content plays as important a role as design on your website’s homepage. The words that appear on your website not only communicate what you do and what you stand for, they help potential customers find you via search.
Because of the importance placed on web copy for search, we often see our clients struggle with balancing beautiful design and marketing copy with what they know Google will want to see when crawling their home page.
When Google looks at a web page it notices a few important behind-the-scenes elements that, when combined, paint a picture for Google of what a web page is about. Some of these elements, likeheadlines and paragraph text,are styled, using CSS,to appear a certain way onyour website. So for instance,Google places a lot of value on what’s contained in your H1 tag (the most important headline on your website), and your CSS also dictates how H1s appear on a particular page (usually bigger than anything else).
Sometimes, the disparity between how important Google thinks the H1 is and what copy you want to appear to be the biggest on your website creates a conflict that isn’t easily resolved. Often, designers and marketers don’t want the largest text on the website to be the most descriptive for search engines.
Take a look at Airbnb’s home page. The largest text on their website, the H1, is “Welcome Home.” It’s a nice sentiment and supports their new branding, but it doesn’t nothing to aid them in search visibility.
Wouldn’t it be better for them to have an H1 that’s more descriptive of the product they’re offering? Wouldn’t the subtitle, “Rent unique places to stay from local hosts in 190 countries,” be a better H1, because it containsthe text you want to be more visible to Google?
The answer is that here, on the home page, your H1 can be used for non-search-engine-friendly marketing copy. Your H1 isn’t the only thing Google is looking at in order to determine what your page is about and where it should rank in search, so ifyour H1 isbeautiful butnot SEO-friendly, you can make up ground elsewhere, like:
- Your H2s, H3s and H4s, which can also contain keywords
- Your page title, meta description and image alt tags whichalsocontain keywords and aren’t visible on the design of the page
- On unique landing pages designed to capture keywords traffic on more specific searches
The reality is that people tend to perform more specific searches when looking for products you offer. “Welcome home” won’t help Airbnb rank for the term “vacation rentals,” but dominating the search results for “vacation rentals” in just about every city will.
Can I Hide My H1 Tags?
Unfortunately, one way people tryto solve the problem of satisfying both the search engines and aesthetics isto usecode to hide their H1s. This means the H1s appear to search engines but don’t appear to people looking at the page. Over the years many developers have come up with sneaky techniques: making the text the same color as the background, using an indent to send text flying off the page, and setting the font size to 0 just to name a few.
This is not an advisable practice! Hiding text using HTML and CSS trickery angers the search engines and yoursite couldget penalized. Hiding your H1s is worse than having no H1 at all.People sometimes feel that hiding an H1 is necessary when the name of the website is already contained in the logo image. If the name appears in the logo and must also appear in the H1, doesn’t that look redundant?
Stop sweating about the magic tricks. Like any solid design, the key is to style elements in relation to each other. While the browser renders an H1 larger than an H2 (and rightfully so), you can easily target one and override the browser with a different font size. The same goes for location – having an H2 over an H1 in your page or using positioning won’t penalize you as long as you’re not sending valuable content off the page.
This doesn’t mean that all H2s (or H3s, H4s, and so on) have to be the same size or have the same alignment either. Using classes, you can give a single header special treatment if the content has a special purpose for your users.
Hopefully you can usually let your main header shine loud and bright, but we’ve all seen exceptions. Good luck on your quest making your HTML work for you rather than the other way around. With a little bit of thought and elbow grease, you can have a semantically solid page that’s also a delight for your users.
