Design and SEO

In the web design business there is a bit of an impression that search engine optimization (SEO) and high quality design are inherently incompatible. The notion is that clever, highly interactive websites are difficult to SEO. Likewise, the idea is that a focus on SEO requires a level of simplicity that precludes better looks and innovative functions. The question then arises, “How do we bring quality SEO and sharp web design into harmony?”

Graphics Work Well with SEO
If a website embeds text into graphics, it is impossible for a search engine crawler, such as Googlebot, to discover the text. The majority of new visitors to your website, and by extension your potential converts, arrive using search engines. What is a website owner to do to achieve a look that combines graphic design excellence with top SEO work?

The answer is webfont. Webfont is an innovation that has been around a few years but is still struggling to gain traction with web designers. In the style sheet for a website, the designer needs to use the “@font-face” invocation. The design links the remotely hosted font in the headers. A modern browser will find the font and display it.

Webfonts can be used with any HTML elements that SEOs prefer. Add the webfont of your choice to your H1 tags. Voila! Now you have SEOed the heck out of your text and made sure it is visually appealing.

Nest your SEOed Content in Expandable Elements
You have a block of text that is critical to your SEO needs. However, you don’t want to beat your users over the head with the text. How do you split the difference between interface and SEO?

Build your text into hidden HTML elements, such as DIVs. Give the element the CSS properties to hide it, such as “display:none”. Using JavaScript, when the user clicks on a link or an image CSS can change on the fly to display the hidden text. Googlebot can see the text when it indexes the site. But your end users do not see the text unless they actively seek to view it.

The Ugly, Old-Fashioned Way
If all else fails, there is the simple, old-fashioned way of handling optimizing graphic text for SEO. Use the ALT attribute within your image tags. It’s not the slickest solution. But it is the old stand-by. Googlebot will recognize the ALT attribute text, although this is generally seen by SEOs as less optimal than other methods that contain the SEO content within a text-friendly element, such as a DIV.

The Ugly, New-Fashioned Way
If your site demands the use of more advanced AJAX features, Google encourages a method to allow Googlebot to parse the text produced when your site pulls content asynchronously. It’s not pretty. It’s called a hashbang.

A hashbang (typed as “#!”) allows you to pass the AJAX request as “!whatever”. This points Googlebot toward the request “”. That’s ugly. Try to reserve it as a nuclear option when other solutions fall short.

Design and SEO Can Coexist
It takes a bit of work. But with the right combination of tags, webfonts, and JavaScript it is possible to pull together a fully featured website that employs gorgeous design and tight search engine optimization. Open up to learning a few quick tricks and soon you’ll have everyone amazed at your web mastery.


This article was written by Dino Gomez and Sheldon Armstrong, a regular contributor here at INFOtainment News. They write this on behalf of Dinomite SEO, your number one choice when looking for San Diego Video Production. As a company that understands the importance of SEO and design for your site, they are sure to give you the best service possible. Check them out today!

Design and SEO 2
Sheldon Armstrong
Sheldon Armstrong is a regular contributor for INFOtainment News. He loves writing about technology and keeping up with the latest gadgets on the market. In addition, he contributes articles covering a wide range of topics together with his friends who appear as guest writers every now and then.

More from author

Leave a Reply!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related posts



Latest posts

Microsoft GroupMe app updated for iOS with new Community feature – MSPoweruser

Microsoft today updated the GroupMe app for iOS devices with a new feature. The new Community feature will allow you to find other groups...

All-In-One Messenger can merge all your messaging apps in one place

Most of us use multiple messaging apps these days to stay connected with different groups of people. These include Slack for business or work,...

How To Prepare Your Business For Global Expansion

Knowing when it is time and how to take your business to a new level is an important skill for any owner...

Want to stay up to date with the latest news?

We would love to hear from you! Please fill in your details and we will stay in touch. It's that simple!