Supercharge your SEO! Subscribe to our newsletter for the latest SEO tactics & best practices

How to Balance Visual Design and SEO

By Tim Brown
Updated October 22, 2016
No Comments

How to Balance SEO with Visual Design
Tim Brown
Tim Brown

Tim Brown is the owner of Hook Agency, an SEO and Web Design company focused primarily on driving traffic and leads for small businesses, roofers and construction companies.

How to Balance SEO with Visual Design


As an SEO Professional it’s very interesting to have someone looking to get SEO done on a website like this:
Web design visual design and SEO
Visual design is such a balance of white space and striking visuals – whereas Search engine optimization works better when you load on the heavy word count. To cater to both SEO and aesthetics, it helps to find the sweet spot where you selectively show text, break up large chunks of text with images, and this combination requires we pay attention to a third discipline – the way things are coded in web development.


Here are a number of ways to cater to SEO while maintaining a solid visual hierarchy and not scaring off real human readers.


1. Show / Hides for more text. You have to do it the right way in development for Google to index the text.

My google analytics after adding show hides

In the above graph the first annotation around October 2015 I moved to a show/hide system on my home page with 2,000+ words in show/hides and very little wording outside of them – It’s a highly visual portfolio. Overall, the word count on my website went up considerably and Google seemed to really like that.

(The second annotation around December is when I discovered backlinking strategy is alive and well and super fun!)


2. The old alternating side image to avoid a wall of text. Put an image on the right and text on the left and then put an image on the left and text on the right – so people don’t get fatigue of so much text, and their eye is drawn down the page. They don’t have to read it all! But it should be well done if they do.

Alternating Images to avoid Wall of text


3. Styling H1’s differently so that you can make sure your marketing messages are prominent. Just because you have something as an H1 tag (considered more important by search engines in content heirarchy) it doesn’t mean it needs to be the largest thing on your page – get creative with CSS and make the h1 smaller as a subtitle – and put your key differentiating feature or quick pitch in an h2 and style that to be the largest text.


Real H1 vs. Fake Heading - Html for SEO


4. Creative breadcrumbing for interlinking. In the scenario above – we’re always linking back to the category page with a link who’s text can be changed to give some variety of anchor text all directed at our most important pages.

Hook better leads with hard-working digital marketing

We help small businesses get more traffic and leads with Professional Visibility™ through web design & SEO

Free Marketing PlanGet a Free Demo
Ready to hook better leads and save time with hard-working digital marketing? Start the Conversation


5. Big footer sitemaps for the interlinking win! Who needs a fancy giant sitemap at the bottom of the page? Well… visually it can be a pain in the ass, but SEO wise – it’s glorious. Although in a recent interview on the Panda update, Google professes to categorize links as ‘in content’ or ‘footer’, in my experience – these footer sitemaps definitely help the pages included in them rank better.


6. Copy blocking – bigger text intros. You can target the first paragraph of a particular div element and make it larger so that your copy is blocked – inviting people to read at least the first paragraph, and giving you a chance to hook their interest. If they read the first paragraph, they’ll be much more likely to read the second and so forth. Combine this with bulleted lists to grab people’s attention and allow them to skim – but still increasing time on page, which can help improve your overall SEO as Google takes into consideration pages with a high bounce rate as not fulfilling the user’s intent for the search.

div.div-class p:first-of-type {
  font-size: 1.25em;


7. Making sure your titles, meta descriptions flow smoothly with the first images and messages a visitor sees when they actually get to your site.

It’s all about matching and exceeding expectations – so you can have a perfectly written meta description but if onsite the first thing they see is an unrelated photo to what they clicked and really dry and drab heading, you could lose eyeballs quickly.


8. Wonderful ways to amp up the amount of text quickly:

  • Question and answer
  • List of differentiating features
  • Common objections and answers
  • Step by step of the process for home page or category pages
  • How-to guide for categories
  • About the category or service
  • History of the category or service
  • History of the company focused on key points that a customer would be interested in


9. Including key location information in the visual design and preparing for Schema markup:

  • Name, address, phone number Schema for local SEO.
  • Question and answer schema.
  • E-commerce: Getting ratings into SERPS with rating Schema.

Thinking about this in design from the beginning allows you to not be awkwardly injecting into the design later

Educating your visual designers and developers

  • Start the conversation early in the process so that good places for copy are built into the design.
  • Talk with your developers about creatively hiding text until a visitor wants to see it, but making sure it’s visible to search engines.
  • If you create a culture that nurtures and supports SEO thinking in both design and development – your people will be excited to try out new things like schema snippets to experiment etc.


Bonus: My experience with backlinking – using your expertise to write guest posts can be gigantic to help search engines find you. In my case, I create articles on web design and simply include a link in my bio to my website. I’ve been able to get articles on Lifehack, EliteDaily,,,, Digital Information World, GetResponse, and many others and it’s done wonders for mine and my companies ranking.

As I build a network of blogs – I start wielding them and others for clients, and the value of what I’m offering goes up considerably. Combining this with as much in-depth and highly linkable content assets as possible on the site I’m trying to rank makes it easier to have a multi-faceted link strategy. Attracting links naturally + building as many high-quality links at the same time. Without the natural exposure, national P.R. campaigns that large companies have – local and small to mid size companies can have intentionality in linking that still works because so much of it is / seems natural to search engines.


Watch this quick video to see how savvy businesses save time and hook better leads:




Related Posts

Tim Brown
Tim Brown

Tim Brown is the owner of Hook Agency, an SEO and Web Design company focused primarily on driving traffic and leads for small businesses, roofers and construction companies.

Notify of
Inline Feedbacks
View all comments

Want to hook better leads with hard-working digital marketing?

Get a free consultation now

Most businesses worry about bringing in enough leads

We build beautiful websites and aggressively integrate them with Google search to hook better leads, so you can focus on what you love to do most - serving your customers