Call Today

Mon – Fri, 8am to 5pm

How SEO And Web Design Work In Harmony

by | Jan 21, 2014 | Articles, Web Design, Web Development | 0 comments

Balance of web design and seo

For a website to achieve its optimal performance it has to have great SEO and a beautiful design.  This article explores how you achieve this and gives some solutions for when it seems impossible to have both.

Great SEO

Let’s start with achieving great SEO, as it’s a more objective art form than creating a beautiful design.

Luckily in recent years search engines have evolved to the level that you no longer need to repeat keywords endlessly on the page.  It’s also never a good idea to use typos or bad grammar for SEO reasons.  Search engines aim to reward websites that have good content and therefore good content is now essential for effective SEO.

Instead of cramming the standard text with keywords, aim to include keywords a healthy number of times in different places:

  • Once or twice in the Metatag Title, Meta Description, URL and H1 Title.
  • One to four times in the keywords, ALT tags, H2 or H3 titles and links to other pages.
  • A healthy number of times in the main body of text (this depends on lots of things, as a rule of thumb, use your keywords naturally in the text, then add your main keywords once more somewhere).

There are plenty of other articles that go into more detail, so let’s move on.

A beautiful web design

What constitutes beauty is highly subjective and you should also design with your clients in mind.  A techy ecommerce store will need a different look and feel to a walking holiday site, for example.

Some simple guidelines:

  • Ask for opinions – Because it’s subjective, ask for different opinions of your design, ideally from people who are in your target audience.
  • Include unique images – While Google can’t read an image in the same way it does text, it nevertheless appreciates that a page with one or more unique images will provide added value than a page with no images.  It also looks better!
  • Design for different devices – Check your website on different screen resolutions and on mobile devices and ensure it’s adaptive to each.
  • Use complementary colors – This is one area where using a professional template or web design company really helps.  If you want to go with your own style and are new to this, then revert to the point above – ask for lots of opinions!

What to do when it seems impossible to have both

There are occasions when you might want to create a certain visual effect that makes good SEO difficult, or when you want to optimize a site for certain keywords, but do not want them to dominate your design.  This section explores some of the most common situations when it just seems impossible to achieve both goals and discusses possible solutions.

Splash Pages

Sometimes you (or your client) might want to create a website as if it was a book and have an attractive home page that’s like a book cover, with virtually no text and just an ‘Enter site’ button.

In the fast-paced world we live in today visitors typically want to access information as quickly as possible and if you optimize an internal page of your site for search engines, visitors are more likely to simply arrive on that page instead of your home page, I therefore question the logic of having a splash page, however there are two ways of going about this.

  • Scrolling down for content – Simply add your large welcoming image at the top of the screen and put the rest of the content, including a decent amount of text further down the page that visitors have to scroll down to see.  If you do this, it’s essential that somewhere on the page you include links to other internal pages of your site, as this carries ‘link juice’ and is essential for the SEO of your internal pages.  A single ‘Enter site’ link will lose too much SEO benefit for it to be worth it.
  • Hover over image – Some websites have a disclaimer or cookie message you have to accept before you enter the website.  You could replace this with a hover over image and an ‘Enter’ instead of an ‘Accept’ button, achieving the appearance of a splash page, but with the page behind it being part of the same item from an SEO perspective.

Incorporating fancy fonts into your web design

One reason people use images rather than text is that they get bored of the same old Arial and Times fonts that are compatible for everyone and images allow you complete freedom in design.  There are, however, options in most CMS systems that let you use custom fonts.  Google Fonts also provide a wide range of open source fonts (with accents) that can be embedded in your site, providing a convenient solution to show fancy fonts as text.

Creating an image rich site with little text

Google likes text and it’s hard to optimize a site with little text, however it can be done.  For optimal SEO you should still have at least 2 pages on your site with a decent amount of text; however not every page needs to be optimized, so for all those other pages, be creative to your heart’s content and don’t worry about SEO at all!

On pages with virtually no text, you can also use longer ALT tags on images to describe them and make good use of your Metatags.  Keep an H1 title somewhere on the page as this is an important component for SEO.

Optimizing a site for keywords not in the design

If you’re optimizing a page for e.g. keywords that include “cheap”, but don’t want to use “cheap” lots on the page, or want to write an article with an interesting title but optimize for words that aren’t in the title, how do you go about it?

What not to do is hide the keywords somehow.  Do not make them the same color as the background or so small no-one can read them.  Hidden keywords are terrible for SEO and risk getting your site penalized.  Valid tactics include the following:

  • Use two headers – It’s entirely possible to build a web template with more than one header, or to manually insert an H1 header somewhere else, other than the main title.  Use your interesting title as the main header and a keyword rich title somewhere else.  You can use CSS to make the keyword rich header normal font size and discreet.  Just because it’s H1, it doesn’t have to be large or in your face.
  • Use SEO elements that are meant to be invisible – Use metatags, ALT tags, file names of images and the URL to include these keywords (but not excessively).  They’re not part of the design but are still relevant for SEO.
  • Put the unwanted keywords below the fold or in a second tab – Websites can be designed with slideshows or tabs that only scroll part of the page and you can add your keywords in less prominent pages.  For longer web pages, add these keywords ‘below the fold’ – i.e. so people only see them when they scroll down.

Conclusion – SEO and Design in Harmony

Search engines aim to put good websites first and if your web design compromises the SEO, you have to ask yourself if what you’re attempting will truly resonate well with your customers.  If you’re not sure, ask friends, family or colleagues for their opinion.

When you have something specific you’re aiming to achieve, be creative and you’ll find there’s normally a solution that gives you great SEO and the beautiful design you want.

Martin Woods is the SEO Director of Indigoextra Web & SEO Solutions, a specialist graphic design, web design and multilingual SEO company.  When he’s not unraveling the latest Google algorithm he enjoys solving crosswords, reading and playing Ultimate Frisbee.

Allison Carmichael is the Art Director for Indigoextra and is a hybrid graphic designer and artist, with a background in the Fine Arts.  She is passionate about web design and film, always following the latest trends in both.

Divi WordPress Theme